html radiobutton won't fire event

Question

I'm constructing this webpage and i want to change the label and mas of an input depending on the radio button selected by the user.

I have read all the posts from people with the same problem, like jQuery .focus() and .blur() not working in Chrome or Safari or http://juristr.com/blog/2008/06/attaching-client-side-event-handler-to/ but the solutions proposed don't seem to be working!

Here's the javascript:

$(document).ready(function() {

$("#cep").mask("99999-999");

$("#jur", "#fis").click(function() {

        docProcess(this.value);
    });

function docProcess(value) {
    alert("hi");
    if (value == "jur") {
        $("#docLabel").value = "CNPJ: ";
        $("#docLabel").mask("99.999.999/9999-99");
    } else {
        $("#docLabel").value = "CPF: ";
        $("#docLabel").mask("999.999.999-80");
    }
}

});

and here is the html:

<label for="clientType">Tipo de cliente: </label>
<input class"radioButton" type="radio" name="clientType" id="jur"     value="jur" />
<label class="radioButton" for="clientType">Jurídico</label>
<input class"radioButton" type="radio" name="clientType" id="fis"    value="fis" />
<label class="radioButton" for="clientType">Físico</label>
<label for="doc" id="docLabel">CNPJ: </label>
<input type="text" id="doc" name="doc" />

Any help?

`$("#jur", "#fis")` is the context selector, it's the same as `$('#fis').find('#jur')`. It looks like you wanted to do `$("#jur, #fis")` instead — adeneo, Mar 18 '15 at 21:56
Also, in jQuery it's `$("#docLabel").val("CNPJ: ");` but a label doesn't have a value, it has text, so it should be `$("#docLabel").text("CNPJ: ");` — adeneo, Mar 18 '15 at 22:00
yep, it did the trick! you should post this in an answer so i can mark and upvote dude! ty! — Jorge Andrade, Mar 18 '15 at 22:08

score 0 · Accepted Answer · answered Mar 18 '15 at 21:59

0

Instead of writing $("#docLabel").value = "CNPJ: ";, write $("#docLabel").text("CNPJ: ");.

answered Mar 18 '15 at 21:59

Pierre Wahlgren

875
7
15

score 0 · Answer 2 · answered Mar 18 '15 at 22:04

Multiple selectors are delimited by a comma within the string. Update your selector to $("#jur, #fis") and it will work fine.

For more info regarding multi select statements reference jQuery Multiple Selector

$(document).ready(function() {

  //$("#cep").mask("99999-999");

  $("#jur, #fis").click(function() {

    docProcess(this.value);
  });

  function docProcess(value) {
    alert("hi");
    if (value == "jur") {
      $("#docLabel").value = "CNPJ: ";
      //$("#docLabel").mask("99.999.999/9999-99");
    } else {
      $("#docLabel").value = "CPF: ";
      //$("#docLabel").mask("999.999.999-80");
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label for="clientType">Tipo de cliente:</label>
<input class "radioButton" type="radio" name="clientType" id="jur" value="jur" />
<label class="radioButton" for="clientType">Jurídico</label>
<input class "radioButton" type="radio" name="clientType" id="fis" value="fis" />
<label class="radioButton" for="clientType">Físico</label>
<label for="doc" id="docLabel">CNPJ:</label>
<input type="text" id="doc" name="doc" />

score 0 · Answer 3 · answered Mar 18 '15 at 22:07

0

Thanks all, so it was a bit of help from adeneo and pierre! changed the access to $("#jur, #fis") and the prop change $("#docLabel").text("CNPJ: ") and it worked like a charm! ty!

answered Mar 18 '15 at 22:07

Jorge Andrade

17
4

html radiobutton won't fire event

3 Answers3