hemanth kumar hemanth kumar - 6 months ago 15
Javascript Question

change form fields based on dropdown values

Hi I have a html for in which I have dropdown at the begining, How do I change the form fields base on selection of dropdown value?
Here is the code. Like if I select General Inquiry it should display first 2 form fields and the form fields in general div

<form action="">
<select name="cases" id="cases">
<option value="general">General Inquiry</option>
<option value="credit">Credit Inquiry</option>
<option value="payment">Payment Issue</option>
</select><br>
<label for="email">Email Address <span>*</span></label>
<input type="text">
<label for="full name">Full Name <span>*</span></label>
<input type="text">


<div class="general" id="general">
<label for="documents">Wish to submit any requested documents?</label>
<input type="radio" name="radio">Yes
<input type="radio" name="radio">No <br><br>
<label for="select">How did you find out about us?<span>*</span></label><br>
<select name="case" id="case-type">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select><br>
</div>

<div class="credit" id="credit">
<label for="Date of Inquiry">Date of Inquiry<span>*</span></label>
<input type="date">
<label for="Agency">Agency 3 <span>*</span></label>
<input type="text">
</div>

<div class="payment" id="payment">
<label for="Service Phone Number">Service Phone Number<span>*</span></label>
<input type="text">
<label for="select">Topic<span>*</span></label><br>
<select name="case" id="case-type">
<option value="topic1">Topic 1</option>
<option value="topic2">Topic 2</option>
<option value="topic3">Topic 3</option>
</select><br><br>
</div>
<br><br>
<button>Submit</button>
</form>


if I select Credit Inquiry it should display first 2 form fields and the form fields in credit div
if I select payment Inquiry it should display first 2 form fields and the form fields in payment div

Answer

I wrote for case "general"..U can follow this for other cases

  $("#cases").change(function () {
            var case = $( "#cases option:selected" ).val();
            if(case=="general")
            {
              //show 2 form fields here and show div
               $("#general").show();
            }
        });