Change form fields based on dropdown values

Question

I have an HTML for in which I have dropdown at the beginning, 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
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

 <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>

You need to write javascript function which will decide what fileds to hide and what to show. on change of dropdown — Prashant
– Prashant, Commented May 23, 2016 at 12:33

R4nc1d · Accepted Answer · 2016-05-23 13:15:31Z

5

Late to the party here, but here is another way

    // hide all the divs
    $('div').hide()

    // Show and hide selected div
    $('#cases').change(function () {
        var value = this.value;

        $('div').hide()
        $('#' + this.value).show();
    });

Also created a demo

answered May 23, 2016 at 13:15

R4nc1d

3,1533 gold badges29 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muthu Sundar Arumugavelu · Accepted Answer · 2016-05-23 12:52:30Z

2

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();
            }
        });

answered May 23, 2016 at 12:52

Muthu Sundar Arumugavelu

1495 bronze badges

1 Comment

R4nc1d Over a year ago

@Muthu, this is not really a great way of doing it, reason being if more items gets added to the list you will need to update the change method

Voinea Ionut · Accepted Answer · 2016-05-23 12:52:58Z

2

Just hide all divs an show the corresponding one on select change if this is what you mean

$('div').hide()
$('#cases').change(function(){
    var v=this.value;
    $('div').hide().filter(function(){return this.id==v}).show()
});

answered May 23, 2016 at 12:52

Voinea Ionut

723 bronze badges

Collectives™ on Stack Overflow

Change form fields based on dropdown values

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related