CODEWITHSUNDEEP
javascriptjquery-mobileradio-buttonevent-listener
user3819673
user3819673

Reputation: 17

jQuery mobile radio events listener

i would like to put a listener when a radio button is checked to add a input text, but i don t really get how work listeners on jquery mobile. (when "radio_choice_v_6c" is checked i want to show "autrenumero") (i don t really get how to add the listener) (sry for bad english)

<fieldset id="NumTel" data-role="controlgroup" data-theme="a">
      <input name="radio_choice_v_6" id="radio_choice_v_6a" type="radio" checked="checked" value="on">
      <label name="radio_numTel" for="radio_choice-v-6a"></label>
      <input name="radio_choice_v_6" id="radio_choice_v_6b" type="radio" value="off">
      <label name="radio_numMob" for="radio_choice_v_6b"></label> 
      <input name="radio_choice_v_6" id="radio_choice_v_6c" type="radio" value="off">
      <label for="radio_choice_v_6c">Appelez-moi sur ce numéro :</label>
</fieldset>

<div id="labelAutreNumero">
  <input name="autrenumero" id="autrenumero" type="number" value="" placeholder="Numéro" data-mini="true" data-clear-btn="true">
</div>

thanks

Upvotes: 0

Views: 2727

Answers (1)

ezanker
ezanker

Reputation: 24738

Give each radio button a unique value:

<fieldset id="NumTel" data-role="controlgroup">
    <input type="radio" name="radio_choice_v_6" id="radio-choice-v-6a" value="on" checked="checked" />
    <label for="radio-choice-v-6a">Choice One</label>
    <input type="radio" name="radio_choice_v_6" id="radio-choice-v-6b" value="off" />
    <label for="radio-choice-v-6b">Choice Two</label>
    <input type="radio" name="radio_choice_v_6" id="radio-choice-v-6c" value="numero" />
    <label for="radio-choice-v-6c">Appelez-moi sur ce numéro :</label>
</fieldset>
<div id="labelAutreNumero">
    <input name="autrenumero" id="autrenumero" type="number" value="" placeholder="Numéro" data-mini="true" data-clear-btn="true" />
</div>

Then bind the change event within the jQM pagecreate:

$(document).on("pagecreate", "#page1", function(){
    $("#labelAutreNumero").hide();

    $("input[name='radio_choice_v_6']").on("change", function() {
        if ($("input[name='radio_choice_v_6']:checked").val() == 'numero')
            $("#labelAutreNumero").show();
        else
            $("#labelAutreNumero").hide();
    });
});

In the script, we wait until page1 is created by jQM so that the DOM is ready. Then we hide the number input waiting for the third radio to be checked. Next we handle the change event on all radio buttons with a name of radio_choice_v_6. In here we get the radio that is checked and read its value, then show or hide the input based on the value.

Here is a working DEMO

Upvotes: 1

Related Questions