How to make textbox required if a certain value is selected in dropdown box

1.27K views
0

How to make textbox required if a certain value is selected in drop-down box using Jquery?

 

htmlAdmin2609 Changed status to publish October 2, 2021
Add a Comment
0

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>

<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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
htmlAdmin2609 Changed status to publish October 2, 2021
Add a Comment
Write your answer.
close