Input fields required if certain select option is selected in a HTML form

Question

I am trying to make the textbox required when select option is selected and submit.

When I select Education then input for Education is required When I select Business then input for Business is required When I select Business & Education then both inputs are required. is required

Any help would be greatly appreciated. Thanks.

 function changePurpose(){ if(document.getElementById('TravelPurpose').value == "Education") { document.getElementById('PoT_Ebudget').setAttribute("required",""); } else { document.getElementById('PoT_Ebudget').setAttribute("required",""); } if(document.getElementById('TravelPurpose').value == "Business") { document.getElementById('PoT_Bbudget').setAttribute("required",""); } else { document.getElementById('PoT_Bbudget').setAttribute("required",""); } if(document.getElementById('TravelPurpose').value == "Education & Business") { document.getElementById('PoT_Bbudget').setAttribute("required",""); document.getElementById('PoT_Ebudget').setAttribute("required",""); } else { document.getElementById('PoT_Bbudget').setAttribute("required",""); document.getElementById('PoT_Bbudget').setAttribute("required",""); } }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <form id="myform"> <div class="row"> <div class="col-sm-6"> <div class="form-group options"> <label class="form-label" for="purpose"> Purpose of Travel</label> <div class="controls" onchange="purpose(this)"> <select class="form-control" id="TravelPurpose" name="PoT_TravelPurpose" onchange="changePurpose()" required> <option selected value="">Select Travel Purpose</option> <option value="Business">Business</option> <option value="Education">Education</option> <option value="Education & Business">Education and Business</option> </select> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="form-label" for="Budget"> Education</label> <div class="controls input-group primary"> <span class="input-group-addon">$</span> <input type="number" style="text-align: right;" id="PoT_Ebudget" name="PoT_Ebudget" placeholder="00.00" min="0" max="10000" oninput="this.value = Math.abs(this.value)"> </div> <br /> <label class="form-label" for="Budget"> Business</label> <div class="controls input-group primary"> <span class="input-group-addon">$</span> <input type="number" style="text-align: right;" id="PoT_Bbudget" name="PoT_Bbudget" placeholder="00.00" min="0" max="10000" oninput="this.value = Math.abs(this.value)"> </div> </div> </div> </div> <input type="submit" value="Submit" > </form>

Answer 1

You can set a field to become required by setting its required property:

Example:

document.getElementById('PoT_Ebudget').required = true;

//...or

document.getElementById('PoT_Ebudget').required = false;

Also, it's a good idea to cache your element references in variables, for both improved code readability and performance.

 const PoT_Ebudget = document.getElementById('PoT_Ebudget'); const PoT_Bbudget = document.getElementById('PoT_Bbudget'); function changePurpose(){ const value = document.getElementById('TravelPurpose').value; PoT_Ebudget.required = (value == "Education" || value == "Education & Business"); PoT_Bbudget.required = (value == "Business" || value == "Education & Business"); }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <form id="myform"> <div class="row"> <div class="col-sm-6"> <div class="form-group options"> <label class="form-label" for="purpose"> Purpose of Travel</label> <div class="controls"> <select class="form-control" id="TravelPurpose" name="PoT_TravelPurpose" onchange="changePurpose()" required> <option selected value="">Select Travel Purpose</option> <option value="Business">Business</option> <option value="Education">Education</option> <option value="Education & Business">Education and Business</option> </select> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="form-label" for="Budget"> Education</label> <div class="controls input-group primary"> <span class="input-group-addon">$</span> <input type="number" style="text-align: right;" id="PoT_Ebudget" name="PoT_Ebudget" placeholder="00.00" min="0" max="10000" oninput="this.value = Math.abs(this.value)"> </div> <br /> <label class="form-label" for="Budget"> Business</label> <div class="controls input-group primary"> <span class="input-group-addon">$</span> <input type="number" style="text-align: right;" id="PoT_Bbudget" name="PoT_Bbudget" placeholder="00.00" min="0" max="10000" oninput="this.value = Math.abs(this.value)"> </div> </div> </div> </div> <input type="submit" value="Submit" > </form>