CODEWITHSUNDEEP
javascriptphp
John Siniger
John Siniger

Reputation: 885

Passing requred attribute on input depending on selection

Hello I am trying to make a javascrip validate option depending on previouse choice.

Here is my form code: 

<li><label for="age1">Question One ?</label> 
<input type="radio" name="tienes_negocio" value="Yes" class="aboveage1" /> Si
<input type="radio" name="tienes_negocio" value="No" class="aboveage1" /> No</li></ol>

<ol id="parent1" class="formset2">
<li><label for="age2">Question Two ?</label> 
<input type="radio" name="labora_negocio" value="Yes" required="true"  class="aboveage2" /> Si
<input type="radio"  name="labora_negocio" value="No" required="true"  class="aboveage2" /> No</li>

Basicaly if you choose No frm the first selections I would like to pass the required attribute inside the selecond selection,

here is the JavaScript code:

  $(document).ready(function(){
    $("#parent1").css("display","none"); 

    $(".aboveage1").click(function(){
        if ($('input[name=tienes_negocio]:checked').val() == "No" ) {
            $("#parent1").slideDown("fast"); //Slide Down Effect 
            $('input[name="labora_negocio"]').prop('required', true); 

        } else {
            $("#parent1").slideUp("fast");
            $('input[name="labora_negocio"]').prop('required', false);  //Slide Up Effect
        }
     });            
});

this is the code which I am using for passing the requred attribute: $('#labora_negocio').attr('required');

The problem is that when you choose No it is not passing anything.

Upvotes: 0

Views: 40

Answers (1)

Musa
Musa

Reputation: 97672

You have two elements with the same id, in html this is a no no. Also when setting live element states you should set the element property rather than its (html) attribute.
You can select the radio button via their names and set their properties via prop.

<li><label for="age2">Question Two ?</label> 
<input type="radio" name="labora_negocio" value="Yes" id="labora_negocio1" class="aboveage2" /> Si
<input type="radio" name="labora_negocio" value="No" id="labora_negocio2" class="aboveage2" /> No</li>

$(".aboveage1").click(function(){
    if ($('input[name=tienes_negocio]:checked').val() == "No" ) {
        $('[name="labora_negocio"]').prop('required', true); 
        $("#parent1").slideDown("fast"); //Slide Down Effect 

    } else {
        $('[name="labora_negocio"]').prop('required', false); // not sure about this
        $("#parent1").slideUp("fast");  //Slide Up Effect
    }
 });

Upvotes: 1

Related Questions