Er Nishant Thakur Er Nishant Thakur - 4 years ago 105
Javascript Question

Validate my HTMK form field after my checkbox is checked

I have created an html form with hidden fields that shows after checking checkbox. I want to validate these hidden fields when the checkbox is checked.

style:
.box {
display:none;
}


here javascript code:

$(document).ready(function(){
$('input[type="checkbox"]').click(function() {
if($(this).attr("value")=="red") {
$(".box").toggle();
}
});
});
<form action="thankyou.php" method="post" name="form9" >
<label>First Name:* </label><input type="text" class="FullContactFields" name="Firstname" required title="Specify your first name"> <br><br>
<label>Last Name:* </label><input type="text" class="FullContactFields" name="Lastname" required title="Specify your last name" > <br><br>
<label>Phone:* </label><input type="text" pattern=".{10}|.{10}" required title="Enter your correct 10 digit phone number" class="FullContactFields" name="UserPhone" required ><br><br>
<label>Email:* </label><input type="email" class="FullContactFields" name="UserEmail" required title="Specify your correct email address." ><br><br>

<div class="checkbox">
<input id="check1" type="checkbox" name="colorCheckbox" value="red">
<label for="check1" class="CheckboxLabel">I would also like quotes for moving my vehicle</label>
</div>

<div class="box">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>

<td width="52%" valign="top" class="txtmatterarl2" rowspan="2">
</td></tbody></table>
<div style="display: block; color:#fff; padding: 28px 0 0 4px;" id="autozone" fade="1" speed="400">
<!--hide /show -->
<table width="100%" cellspacing="1" cellpadding="1" border="0">

<tbody><tr>
<td width="6%" align="left">&nbsp;</td>
<td width="16%" align="left"><b><font color="#fff" class="headingcontact">Vehicle Details:</font></b></td>
<td width="7%" align="left">&nbsp;</td>
<td width="71%" align="left" nowrap="nowrap"><b><font color="#fff" class="headingcontact">Vehicle #2 (Optional):</font></b></td>
</tr>
<tr>
<td height="35" align="left" class="nish4"><font color="#fff">Make:</td>
<td align="left">
<select onChange="FillList()" class="TextBox3 nish" id="vehicle1_make" size="1" name="vehicle1_make">
<option selected="selected" value="">Select Vehicle</option>
<option value="Acura">Acura</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="AMC">AMC</option>
<option value="Aston Martin">Aston Martin</option>
<option value="ATV">ATV</option>
<option value="Auburn">Auburn</option>
<option value="Audi">Audi</option>
<option value="Austin-Healey">Austin-Healey</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Bricklin">Bricklin</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevy">Chevy</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daewoo">Daewoo</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Datsun">Datsun</option>
<option value="Delorean">Delorean</option>
<option value="Dodge">Dodge</option>
<option value="Eagle">Eagle</option>
<option value="Edsel">Edsel</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Fisker">Fisker</option>
<option value="Ford">Ford</option>
<option value="Geo">Geo</option>
<option value="GMC">GMC</option>
<option value="Graham">Graham</option>
<option value="Harley Davidson">Harley Davidson</option>
<option value="Honda">Honda</option>
<option value="Hudson">Hudson</option>
<option value="Hummer">Hummer</option>
<option value="Hyundai">Hyundai</option>
<option value="Infiniti">Infiniti</option>
<option value="International">International</option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Jeep">Jeep</option>
<option value="Kia">Kia</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lasalle">Lasalle</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Lotus">Lotus</option>
<option value="Marmon">Marmon</option>
<option value="Maserati">Maserati</option>
<option value="Maybach">Maybach</option>
<option value="Mazda">Mazda</option>
<option value="McLaren">McLaren</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Mercury">Mercury</option>
<option value="Merkur">Merkur</option>
<option value="MG">MG</option>
<option value="MINI">MINI</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Morgan">Morgan</option>
<option value="Nash">Nash</option>
<option value="Nissan">Nissan</option>
<option value="Oldsmobile">Oldsmobile</option>
<option value="Opel">Opel</option>
<option value="Packard">Packard</option>
<option value="Panoz">Panoz</option>
<option value="Plymouth">Plymouth</option>
<option value="Pontiac">Pontiac</option>
<option value="Porsche">Porsche</option>
<option value="Renault">Renault</option>
<option value="Rolls-Royce">Rolls-Royce</option>
<option value="Saab">Saab</option>
<option value="Saturn">Saturn</option>
<option value="Scion">Scion</option>
<option value="Smart">Smart</option>
<option value="Sterling">Sterling</option>
<option value="Studebaker">Studebaker</option>
<option value="Subaru">Subaru</option>
<option value="Sunbeam">Sunbeam</option>
<option value="Suzuki">Suzuki</option>
<option value="Talbo">Talbo</option>
<option value="Tesla">Tesla</option>
<option value="Toyota">Toyota</option>
<option value="Triumph">Triumph</option>
<option value="Vanden Plas">Vanden Plas</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Volvo">Volvo</option>
<option value="Willys">Willys</option>
<option value="Yugo">Yugo</option>
</select>
</td>
<td align="left" class="nish4"><font color="#fff">Make:</td>
<td align="left" >
<select onChange="FillList2()" class="TextBox3 nish" id="vehicle2_make" size="1" name="vehicle2_make">
<option selected="selected" value="">Select Vehicle</option>
<option value="Acura">Acura</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="AMC">AMC</option>
<option value="Aston Martin">Aston Martin</option>
<option value="ATV">ATV</option>
<option value="Auburn">Auburn</option>
<option value="Audi">Audi</option>
<option value="Austin-Healey">Austin-Healey</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Bricklin">Bricklin</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevy">Chevy</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daewoo">Daewoo</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Datsun">Datsun</option>
<option value="Delorean">Delorean</option>
<option value="Dodge">Dodge</option>
<option value="Eagle">Eagle</option>
<option value="Edsel">Edsel</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Fisker">Fisker</option>
<option value="Ford">Ford</option>
<option value="Geo">Geo</option>
<option value="GMC">GMC</option>
<option value="Graham">Graham</option>
<option value="Harley Davidson">Harley Davidson</option>
<option value="Honda">Honda</option>
<option value="Hudson">Hudson</option>
<option value="Hummer">Hummer</option>
<option value="Hyundai">Hyundai</option>
<option value="Infiniti">Infiniti</option>
<option value="International">International</option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Jeep">Jeep</option>
<option value="Kia">Kia</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lasalle">Lasalle</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Lotus">Lotus</option>
<option value="Marmon">Marmon</option>
<option value="Maserati">Maserati</option>
<option value="Maybach">Maybach</option>
<option value="Mazda">Mazda</option>
<option value="McLaren">McLaren</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Mercury">Mercury</option>
<option value="Merkur">Merkur</option>
<option value="MG">MG</option>
<option value="MINI">MINI</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Morgan">Morgan</option>
<option value="Nash">Nash</option>
<option value="Nissan">Nissan</option>
<option value="Oldsmobile">Oldsmobile</option>
<option value="Opel">Opel</option>
<option value="Packard">Packard</option>
<option value="Panoz">Panoz</option>
<option value="Plymouth">Plymouth</option>
<option value="Pontiac">Pontiac</option>
<option value="Porsche">Porsche</option>
<option value="Renault">Renault</option>
<option value="Rolls-Royce">Rolls-Royce</option>
<option value="Saab">Saab</option>
<option value="Saturn">Saturn</option>
<option value="Scion">Scion</option>
<option value="Smart">Smart</option>
<option value="Sterling">Sterling</option>
<option value="Studebaker">Studebaker</option>
<option value="Subaru">Subaru</option>
<option value="Sunbeam">Sunbeam</option>
<option value="Suzuki">Suzuki</option>
<option value="Talbo">Talbo</option>
<option value="Tesla">Tesla</option>
<option value="Toyota">Toyota</option>
<option value="Triumph">Triumph</option>
<option value="Vanden Plas">Vanden Plas</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Volvo">Volvo</option>
<option value="Willys">Willys</option>
<option value="Yugo">Yugo</option>
</select>
</td>
</tr>
<tr>
<td height="35" align="left" class="nish4"><font color="#fff">Model:</td>
<td align="left">
<select class="TextBox3 nish" id="vehicle1_model" name="vehicle1_model" >
<option value="0"> Please Select&nbsp;&nbsp;&nbsp; </option>
</select>
</td>
<td align="left" class="nish4"><font color="#fff">Model:</td>
<td align="left" style="padding: 10px 0 12px;">
<select class="TextBox3 nish" id="vehicle2_model" name="vehicle2_model">
<option value="0"> Please Select&nbsp;&nbsp;&nbsp; </option>
</select>
</td>
</tr>
<tr>
<td height="35" align="left" class="nish4"><font color="#fff">Year:</td>
<td align="left"><input type="text" size="15" id="vehicle1_year" class="TextBox3 nish" name="vehicle1_year"></td>
<td align="left" class="nish4"><font color="#fff">Year:</td>
<td align="left"><input type="text" size="15" id="vehicle2_year" class="TextBox3 nish" name="vehicle2_year"></td>
</tr>

<tr>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
</tr>
</tbody></table>
</div>
</div>

<input type="hidden" name="subid" id="subid" value='<?php echo $subid; ?>'/><input type="submit" value="Get Your FREE Quotes" class="OrangeButton"></td>

</form>

</div></div>

Answer Source
    $('form[name="form9"]').on('submit', function () {
        var subidValue = $("#subid").val();
        // Now do all the validations that you want to do on the value stored in the variable subidValue
    });

$('input[type="checkbox"]').click(function() {
        if($(this).attr("value")=="red") {
            $(".box").toggle();
            // Get/Select all the fields that you want to validate right here and run the validations...
        }
});
  1. register click event for all the checkboxes
  2. if the value of the clicked checkbox is 'red'
  3. then select all the elements with class 'box' and toggle them
  4. after this since you have landed in a place where the checkbox with value 'red' is clicked, now you can write your validation code.

Hope this explains...

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download