krishan krishan - 7 months ago 8
Javascript Question

Not able to select radio button in jquery

I am new. I want the relevant inputs to be activated based on the selection made. Here is my page's HTML

<body>

<form id="add_employer" method="post" action=".">
<input type='hidden' name='csrfmiddlewaretoken' value='UAUPCMpOzGlCfPIZxAFkkhAqVVUxgoVw' />

<p><label for="id_ind_or_company_0">Is employer an individual or company:</label> <ul id="id_ind_or_company"><li><label for="id_ind_or_company_0"><input id="id_ind_or_company_0" name="ind_or_company" type="radio" value="True" /> Individual</label></li>
<li><label for="id_ind_or_company_1"><input id="id_ind_or_company_1" name="ind_or_company" type="radio" value="False" /> Company</label></li></ul></p>
<p><label for="id_emp_family_name">Employer&#39;s Family Name:</label> <input id="id_emp_family_name" maxlength="30" name="emp_family_name" type="text" /></p>
<p><label for="id_emp_first_name">Employer&#39;sFirst Name:</label> <input id="id_emp_first_name" maxlength="18" name="emp_first_name" type="text" /></p>
<p><label for="id_emp_middle_name">Employer&#39;s Middle Name:</label> <input id="id_emp_middle_name" maxlength="18" name="emp_middle_name" type="text" /></p>
<p><label for="id_emp_coname">Company Name:</label> <input id="id_emp_coname" maxlength="87" name="emp_coname" type="text" /></p>
<input type="submit" value="Add" />
</form>
</body>


and here is my JS

$(document).ready(function(){
$("p:has(input)").hide()
$("[value^='Add']").hide()
//$( "#id_emp_family_name" ).click(function(){ });
});


$("label:contains('Individual')").click(function(){
$("p:has(input)").unhide()
});


Please tell me how to find if one of the radio button has been clicked.The input fields should unhide on clicking but they are not unhiding.

Answer
<body>

<form id="add_employer" method="post" action=".">
  <input type='hidden' name='csrfmiddlewaretoken' value='UAUPCMpOzGlCfPIZxAFkkhAqVVUxgoVw' />

  <p><label for="id_ind_or_company_0">Is employer an individual or company:</label> <ul id="id_ind_or_company"><li><label for="id_ind_or_company_0"><input id="id_ind_or_company_0" name="ind_or_company" type="radio" value="True" /> Individual</label></li>
<li><label for="id_ind_or_company_1"><input id="id_ind_or_company_1" name="ind_or_company" type="radio" value="False" /> Company</label></li></ul></p>
<div id="divIndividual">
<p><label for="id_emp_family_name">Employer&#39;s Family Name:</label> <input id="id_emp_family_name" maxlength="30" name="emp_family_name" type="text" /></p>
<p><label for="id_emp_first_name">Employer&#39;sFirst Name:</label> <input id="id_emp_first_name" maxlength="18" name="emp_first_name" type="text" /></p>
<p><label for="id_emp_middle_name">Employer&#39;s Middle Name:</label> <input id="id_emp_middle_name" maxlength="18" name="emp_middle_name" type="text" /></p>
</div>
<div id="divCompany">
<p><label for="id_emp_coname">Company Name:</label> <input id="id_emp_coname" maxlength="87" name="emp_coname" type="text" /></p>
</div>
  <input type="submit" value="Add" />
</form>
</body>

Javascript

$(document).ready(function(){
            $("#divIndividual").hide();
            $("#divCompany").hide();
            $("[value^='Add']").hide();
            //$( "#id_emp_family_name" ).click(function(){   });
        });


        $("label:contains('Individual')").click(function(){     
            $("#divIndividual").show();
            $("#divCompany").hide();
            $("[value^='Add']").show();
        });

$("label:contains('Company')").click(function(){     
            $("#divIndividual").hide();
            $("#divCompany").show();
            $("[value^='Add']").show();
        });

Solution without updating HTML:

$(document).ready(function(){
             $("p:has(input)").hide()
            $("[value^='Add']").hide()
            //$( "#id_emp_family_name" ).click(function(){   });
        });


        $("label:contains('Individual')").click(function(){
        $("p:has(input)").hide()
            $("#id_emp_family_name").closest("p").show();
            $("#id_emp_first_name").closest("p").show();
            $("#id_emp_middle_name").closest("p").show();
            $("[value^='Add']").show()

        });

$("label:contains('Company')").click(function(){     
$("p:has(input)").hide()
$("#id_emp_coname").closest("p").show();
$("[value^='Add']").show()

        });