set function onchange in dropdown - PHP

Question

I have a dropdown list and when when user selects a value and a different forms will appear depends on what the selected value. My file is in html. I'm using bootstrap for my design.

here is my sample code:

<form name="exmType" method = "POST">
<select class="form-control" name="txtType" class="select" method = "post"
onChange="this.form.submit();" style="width:300px;">
    <option value="">Option A</option>
    <option value="1">Option B</option>
    <option value="2">Option C </option>    
<?php

if (isset($_POST['txtType'])) {
if ( $_POST['txtType'] == "" ){
       *display form a*
} elseif ( $_POST['txtType'] == 1 ){
        *display form b*
 } elseif ( $_POST['txtType'] == 2 ){
        *display form c*
 }
}

?>

  </select>
</form>

Why do you use jQuery to hook an event that shows the form according to the value of the select element? it's much simpler. — odedta, Jun 21 '15 at 06:47
@odedta I'm not really familiar with jQuery, I haven't code in a while and I'm still lost at the moment. — maecy m, Jun 21 '15 at 06:54

score 0 · Answer 1 · edited May 23 '17 at 10:26

You should try using Jquery:

<script>
$('form select[name=txtType]').change(function(){
  if ($('form select option:selected').val() == '1'){
    $('#optionA').show();
  }else{
    $('#optionA').hide();
  }
});

$('form select[name= txtType]').change(function(){
  if ($('form select option:selected').val() == '2'){
    $('#optionB').show();
  }else{
    $('#optionB ').hide();
  }
});
</script>

You can find the Jquery: http://jsfiddle.net/ecZrE/

Some good answers: Show Form Field if Drop Down Item is Selected Using jquery

Javascript: Trying to show different forms based on drop down value?

Drop down menu selection ditactes what form will display

Show different elements of a form depending on dropdown box selection

score 0 · Accepted Answer · answered Jun 21 '15 at 07:01

Here is a simple code example for what you need, you can fiddle with it for your needs.

The code is really simple so I don't see any reason to elaborate on what it does, if you have any questions post a comment.

$(document).ready(function() {
    $('select').change(function(){
        if($(this).val() == '0') {
           $('form').css('display','none');
        }
        if ($(this).val() == '1') {
           $('form').css('display','none');
           $('#form_a').css('display','block');
        }
        if($(this).val() == '2') {
           $('form').css('display','none');
           $('#form_b').css('display','block');
        }
        if($(this).val() == '3') {
           $('form').css('display','none');
           $('#form_c').css('display','block');
        }
    });
});

form {
    display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option value="0">-- Choose Form --</option>
    <option value="1">Form A</option>
    <option value="2">Form B</option>
    <option value="3">Form C</option>
</select>
<form id="form_a" method="post" role="form">
    Form a: <input type="text" value="form_a_text"/>
</form>
<form id="form_b" method="post" role="form">
    Form b: <input type="text" value="form_b_text"/>
</form>
<form id="form_c" method="post" role="form">
    Form c: <input type="text" value="form_c_text"/>
</form>

This is a great example. Though I am still working on my codes. Thank you for your help — maecy m, Jun 21 '15 at 07:24
I have to admit, at first I didn't know what I should do the example you gave me, took me a few times to re-read your code to finally understand it. I'm code works just fine now. :D — maecy m, Jun 21 '15 at 15:00
Really? I was sure it was self-explanatory. Oh well, good to know you got it working. — odedta, Jun 21 '15 at 15:39

score 0 · Answer 3 · answered Jun 21 '15 at 07:04

First of all your select tag has two class=. Choose the right one.

   `<select class="form-control"       name="txtType" class="select" method =       "post"
   onChange="this.form.submit();"         style="width:300px;">
<option value="">Option A</option>
<option value="1">Option B</option>
<option value="2">Option C </option>`

To add the onClick or onChange event use below function. Before adding it would be better if you add an id to the select tag.

$('#select_tag_id').change(function(){ $('#form_id_to_display').show('slow'); $('#form_id_to_hide').hide('slow'); });

Add above code in head section or at the botton of the page.

Sorry for wrong alignments. posting from mobile phone. Editing option is limited.

set function onchange in dropdown - PHP

3 Answers3