I am working on a form that includes a select element with multiple options. Depending on the option selected, a different form will be displayed.
My concern is if a user starts filling out one form and then decides to select another option, I want to add an alert asking if they want to clear the form they have already started filling out if they confirm. Is this possible?
$("select").change(function () {
$('div.box').hide();
$('div.box.'+$(this).val()).show();
});
<h2>SELECT YOUR TEST!</h2>
<select id=a>
<option value="chem">Chemical Analysis Testing Request Form</option>
<option value="fat">Fatigue Testing Request Form</option>
<option value="hard">Hardness Testing Request Form</option>
<option value="neutral">Neutral Salt Spray Testing Request Form</option>
<option value="stress">Stress Corrosion Testing Request Form</option>
<option value="tensile">Tensile Testing Request Form</option>
</select>
<!-- Test One -->
<div class="chem box">
<h2>Chemical Analysis Testing Request Form</h2>
<label>Accreditation / Approval required:</label><br>
<input type="checkbox" value="ISO17025/UKAS">ISO17025/UKAS<br>
<input type="checkbox" value="Nacap">Nacap <br>
<input type="checkbox" value="other">Other
<br>
<br>
<br>
<label>Material / Allow type:</label>
<input type="text">
<br>
<br>
<br>
<label>Can a Drawing be Supplied:</label><br>
Yes<input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck">
No<input type="radio" onclick="yesnoCheck();" name="yesno" id="noCheck">
<br>
<div id="ifYes" style="display:none">
Image upload: <input type='file' id='yes' name='yes'><br>
</div>
<div id="ifNo" style="display:none">
If no can you sepcify form and dimensions:<br>
<textarea type='text' id='other3' name='other3'></textarea><br>
</div>
To see a demo, click here: Demo fiddle