How to make textbox required if a certain value is selected in drop-down box using Jquery?
Share this:
htmlAdmin2609 Changed status to publish October 2, 2021
The HTML Code
<div class=”col-md-5″>
Select Discipline
<select id=”groups” class=”form-control” name=”discipline” required=””>
<option disabled=”disabled” selected=”selected” value=”0″>Select</option>
<option value=”CSE”>CSE</option>
<option value=”HCD”>HCD</option>
<option value=”ECE”>ECE</option>
<option value=”CB”>CB</option>
<option value=”MATH”>MATH</option>
</select>
</div>
<div class=”col-md-6″>
Select Degree
<select id=”degreeTypes” class=”form-control” name=”degreeTypes”>
<option value=”BSc-Computer-Science”>BSc (Computer Science)</option>
<option value=”BSc-In-any”>BSc</option>
<option value=”BTech-BE”>BTech/BE(CSE/IT/ECE/EE)</option>
<option value=”BPharma”>BPharma</option>
<option value=”MBBS”>MBBS</option>
</select>
</div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="form-group"> <div class="row"> <label class="control-label col-sm-2"><span style="text-align:center;">Exam</span></label> <label class="control-label col-sm-2">Year</label> <label class="control-label col-sm-3">Marks obtained</label> <label class="control-label col-sm-3">Total Marks</label> <label class="control-label col-sm-2">Rank</label> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-2"> <select class="form-control nationalLevel" name="nlexam1" id="nlexam1"> <option value="" selected disabled>Exam</option> <option value="GATE">GATE</option> <option value="UGC-JRF">UGC-JRF</option> <option value="CSIR">CSIR</option> <option value="DBT">DBT</option> <option value="None">None</option> </select> </div> <div class="col-sm-2"> <select class=" form-control" name="nlyear1" id="nlyear1" > <option value="" disabled selected>Year</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> </select> </div> <div class="col-sm-3"> <input type="text" name="nlmarks1" id="nlmarks1" class="form-control" > </div> <div class="col-sm-3"> <input type="text" name="nlscore1" id="nlscore1" class="form-control"> </div> <div class="col-sm-2"> <input type="text" name="nlrank1" id="nlrank1" class="form-control"> </div> </div> |
Jquery Code
|
1 |
<span class="html-tag"><script <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" target="_blank" rel="noreferrer noopener">https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js</a>"></span><span class="html-tag"></script></span> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<script> $('#degreeTypes').change(function() { var responseIdc1 = $(this).val(); var selValue = $("#groups").val(); if(responseIdc1 !="MBBS" && selValue =="CB"){ $("#nlexam1").prop('required',true); $("#nlyear1").prop('required',true); $("#nlmarks1").prop('required',true); $("#nlscore1").prop('required',true); $("#nlrank1").prop('required',true); $("#nldiscipline1").prop('required',true); $("#nlregno1").prop('required',true); $("#NLEDocs").prop('required',true); } else { $("#nlexam1").prop('required',false); $("#nlrank1-error").attr('style', 'display:none'); $("#nlyear1").prop('required',false); $("#nlyear1-error").attr('style', 'display:none'); $("#nlmarks1").prop('required',false); $("#nlmarks1-error").attr('style', 'display:none'); $("#nlscore1").prop('required',false); $("#nlscore1-error").attr('style', 'display:none'); $("#nlrank1").prop('required',false); $("#nlrank1-error").attr('style', 'display:none'); $("#nldiscipline1").prop('required',false); $("#nldiscipline11-error").attr('style', 'display:none'); $("#nlregno1").prop('required',false); $("#nlregno1-error").attr('style', 'display:none'); $("#NLEDocs").prop('required',false); $("#docUpload1-error").attr('style', 'display:none'); } console.log(responseIdc1); }); </script> |
Share this:
htmlAdmin2609 Changed status to publish October 2, 2021
Write your answer.
Related Post
