set function onchange in dropdown - PHP [duplicate] - php

Question

This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 7 years ago.
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>

Answer 1

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>

Answer 2

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

Answer 3

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.