Geek asks and answers

Using dynamic form selection with jquery

Good afternoon,

I like appologize - I'm new to jQueryand trying to create a form in which additional fields will be displayed depending on the user's choice.

Now I have a form with many steps and I want to make it on one page. So the idea is this:

The first form on the site:

         <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 want to do, when a person makes a choice, other fields will appear, for example:

  • If an airport option is selected, it should display the selection field as:

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

  • If the railway of choice is chosen, the same as for the airport.

  • If an option is selected, it should display an input text box:

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

Any ideas? I searched everywhere for a textbook.

+3
source share
9 answers

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

http://jsfiddle.net/Goodluck/NS24G/

+1

, , DEMO.

, click "select", , :

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

, , -

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

EDIT [nonchip]: important: val() value .

0

- :

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

jsFiddle :

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

1.) change #select1

2.) Check the value

3.) Hide / show the corresponding elements according to the user's choice.

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

0
source

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

Firstly, all your parameters should be in 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 CSS.

.travel-conditional {
    display: none;
}

Then, using jQuery, I discovered an event changein the original dropdown, and then I made a switch statement for 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;
    }
});
0
source

More articles:


All Articles