CODEWITHSUNDEEP
javascriptjqueryforms
Ruslan
Ruslan

Reputation: 45

Using a dynamic form select with a jquery

Good day,

I woud like to appologize - I'm new to jQuery and trying to build a form wich will show additional fields depending on user select.

Right now I have a form with lots of steps and want to make it on one page. So idea is the following:

The first form on a site is:

         <label for="form1">Form1</label>
         <select name="select1" id="select1">
             <option value="airport">Airport</option>
             <option value="railway">Railway station</option>
             <option value="address">Address</option>
         </select>

What I whant to do is when a person make a selection another fields will apear, like:

  1. If option airport is selected, it should show the select field as:

      <select name="select1" id="select1">
      <option value="airport1">Airport1</option>
      <option value="airport2">Airport2</option>
      <option value="airport3">Airport3</option>
  </select>

  2. If option railway is selected, same as for airport.

  3. If option address is selected, it should bring up an input text field:

     <input name="sometext" type="text" size="30" maxlength="255">

Any ideas? I've looked everywhere for a tutorial.

Upvotes: 3

Views: 2107

Answers (9)

Luca Davanzo
Luca Davanzo

Reputation: 21520

I give just an example when you click airports, take a look on this DEMO.

Essentially, you have to bind click event on "select" and then check what kind of element has been selected:

$('#select1').on('click', function() {
    var category = $(this).val();
    if(category === 'airport') {
        $('#select2, #airports').fadeIn(200); 
    }
});
  • Here full example.

Upvotes: 1

David Goss
David Goss

Reputation: 707

Firstly all your options should be in the HTML already...

<select class="travel-conditional" name="airports" id="airports">
    <option value="airport1">Airport1</option>
    <option value="airport2">Airport2</option>
    <option value="airport3">Airport3</option>
</select>
<select class="travel-conditional" name="stations" id="stations">
    <option value="station1">Station1</option>
    <option value="station2">Station2</option>
    <option value="station3">Station3</option>
</select>
<input class="travel-conditional" name="sometext" type="text" size="30" maxlength="255">

...but hidden by CSS.

.travel-conditional {
    display: none;
}

Then with the jQuery, I'd detect the change event on the original dropdown and then do a switch statement on the value.

$('#select1').on('change', function() { // detect change of dropdown
    $('.travel-conditional').hide(); // hide any options already shown
    switch ($('#select1').val()) { // show whichever option is appropriate
      case 'airport':
        $('#airports').show();
        break;
      case 'railway':
        $('#stations').show();
        break;
      case 'address':
        $('#sometext').show();
        break;
      default:
        break;
    }
});

Upvotes: 0

chriz
chriz

Reputation: 1345

html

<label for="form1">Form1</label>
  <select name="select1" id="select1">
     <option value="airport">Airport</option>
     <option value="railway">Railway station</option>
      <option value="address">Address</option>
   </select>

<select id="select1airport" id="select1">
   //options
</select>

<select id="select1railway" id="select1">
   //options
</select>

<input id="sometext" type="text" size="30" maxlength="255" style="display:none;">

jquery

jQuery("#select1").change(function () {
      $('#select1airport').hide();
      $('#select1railway').hide();
      $('#sometext').hide();
      if(jQuery(this).val() == "Airport") {
        $('#select1airport').show();
      }
      else if(jQuery(this).val() == "railway"){
          $('#select1railway').show();
      }
      else if(jQuery(this).val() == "address"){
          $('#sometext').show();
      }
    });

Upvotes: 0

Y.Puzyrenko
Y.Puzyrenko

Reputation: 2196

Listen for change event and check selected value 

$('#checkboxId').change(function(){//some actions})

Here is fiddle.http://jsfiddle.net/Goodluck/NS24G/

Upvotes: 1

Annapoorni D
Annapoorni D

Reputation: 849

A short answer I can suggest for you to dig is 

jQuery("#select1").change(function () {
   //if its airport
  if(jQuery(this).val() == "airport") {
    //do what you need here 
  }
});

EDIT[nonchip]: important: val() returns the value attribute of the selected option.

Upvotes: 0

Bez Hermoso
Bez Hermoso

Reputation: 1132

1.) Listen to the change event for the #select1 element

2.) Inspect value

3.) Hide/show appropriate elements according to the user selection.

Here is a quick demo: http://jsfiddle.net/DmPU9/

Upvotes: 0

frenchie
frenchie

Reputation: 51927

This jsFiddle should get you started:

$(Start);

function Start() {
    $('#MainSelector').change(MainSelectorChange);
}

function MainSelectorChange() {

    var CurrentValue = $('#MainSelector').val();
    var TheHTML = "";

    for (var i = 1; i < 4; i++) {

        TheHTML = TheHTML + '<option value="' + CurrentValue + i +'">' + CurrentValue + i + '</option>';
    }

    $('#SecondarySelector').html(TheHTML);
}

Upvotes: 0

abiieez
abiieez

Reputation: 3189

You may want to hide and show the element (dropdown, input field, etc). Check out https://api.jquery.com/hide/ and https://api.jquery.com/show/

Upvotes: 0

nonchip
nonchip

Reputation: 1142

you would do something like:

<label for="select1">Form1</label>
<select name="select1" id="select1">
  <option value="airport">Airport</option>
  <option value="railway">Railway station</option>
  <option value="address">Address</option>
</select>
<label for="select2airport" class="sel2">Airport</label>
<select name="select2airport" id="select2airport" class="sel2">
  <option>...</option>
</select>
<label for="select2railway" class="sel2">Railway</label>
<select name="select2railway" id="select2railway" class="sel2">
  <option value="">...</option>
</select>
<script>
  $('#select1').change(function(){
    $('.sel2').hide(); // hide all
    selection=$('select1').val();
    $('#select2'+selection).show(); // show select
    $('label[for=select2'+selection+']').show(); // show label
  });
</script>

Upvotes: 0

Related Questions