Conditional Form with Javascript

Question

I'm creating a form where certain fields should only show depending on the initial product selected, here's the JS i have:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript'>
    //<![CDATA[ 
    $(window).load(function() {
        $("#product").change(function() {
            var selected = $("#product option:selected").text();
            $('div').hide();
            $('#' + selected).show();

        });

        $(document).ready(function() {
            $('div').hide();
        });
    }); //]]>
</script>

and here is the HTML so far:

<select id="product">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<div id="1">Options that are available for Product 1</div>
<div id="2">Options that are available for Product 2</div>
<div id="3">Options that are available for Product 3</div>
<div id="4">Options that are available for Product 4</div>
<div id="5">Options that are available for Product 5</div>
<div id="6">Options that are available for Product 6</div>
<div id="7">Options that are available for Product 7</div>

The problem i'm having is that in the options (1/2/3/4/5/6/7) these need to be product names, but it doesnt work without the numbers in there. So for example 1 should be called Product 1, 2 should be called Product 2, and so forth.

Can you help?

@SatishSharma he wants it to show Product 1, Product 2, ... instead of 1,2,... — abc123
– abc123, Commented Dec 10, 2013 at 12:05
then use the select box value var selected = $("#product").val(); — Satish Sharma
– Satish Sharma, Commented Dec 10, 2013 at 12:07

abc123 · Accepted Answer · 2013-12-10 12:33:33Z

jsFiddle

JS

 $(document).ready(function () {
     $("#product").change(function () {
         var selected = $("#product option:selected").val();
         $('div').hide();
         $('#' + selected).show();

     });
     $('div').hide();
 });

Description

By using .val() instead of .text() you will be getting the option's value. This let's you show the user anything like Screwdriver instead of Product 1.

The removal of the following code is because it is duplicate of $(document).ready(function () {:

$(window).load(function() {

Although the functionality differs in this situation there isn't a benefit of both usages.

HTML

<select id="product">
    <option value="1">Product 1</option>
    <option value="2">Product 2</option>
    <option value="3">Product 3</option>
    <option value="4">Product 4</option>
    <option value="5">Product 5</option>
    <option value="6">Product 6</option>
    <option value="7">Product 7</option>
</select>
<div id="1">Options that are available for Product 1</div>
<div id="2">Options that are available for Product 2</div>
<div id="3">Options that are available for Product 3</div>
<div id="4">Options that are available for Product 4</div>
<div id="5">Options that are available for Product 5</div>
<div id="6">Options that are available for Product 6</div>
<div id="7">Options that are available for Product 7</div>

user2857877 · Accepted Answer · 2013-12-10 11:58:36Z

0

var selected= $("#product option:selected").val();

Try it please.

answered Dec 10, 2013 at 11:58

user2857877

1251 silver badge10 bronze badges

Comments

Satpal · Accepted Answer · 2013-12-10 11:59:17Z

0

Use .val() instead of .text()

 var selected = $("#product").val();

DEMO

answered Dec 10, 2013 at 11:59

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Kinjan Koradiya · Accepted Answer · 2013-12-10 12:00:07Z

0

USE:

var selected = $("#product option:selected").val();

answered Dec 10, 2013 at 12:00

Kinjan Koradiya

4901 gold badge5 silver badges17 bronze badges

Comments

Ben Barkay · Accepted Answer · 2013-12-10 12:16:58Z

What I suggest is doing the following:

Create a container div for all of the different product-related forms
Listen for change events on the select box
When a select event is caught, hide all of the children in the container div and then show the one that has been selected.

I also suggest that you decouple the product form configuration from the value of the select box, so that you have greater freedom as far as controlling your form.

A working example (jsfiddle)

HTML

<body>
    <select id="selector">
        <option data-for="p1-form">Product 1</option>
        <option data-for="p2-form">Product 2</option>
        <option data-for="p3-form">Product 3</option>
    </select>
    <div id="product-forms">
        <div id="p1-form" class="product-form">
            Product 1 form
        </div>
        <div id="p2-form" class="product-form">
            Product 2 form
        </div>
        <div id="p3-form" class="product-form">
            Product 3 form
        </div>
    </div>
</body>

CSS

.product-form {
    display: none;
}

JS

var $selector = $('#selector');
var $productForms = $('#product-forms');
$selector.change(function () {
    var toEnable = $('option:selected', $selector).data('for');
    $productForms.children().css('display', 'none');
    $('#' + toEnable).css('display', 'block');
}).change();

Collectives™ on Stack Overflow

Conditional Form with Javascript

5 Answers 5

jsFiddle

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related