Affichage d'un formulaire en fonction de la valeur sélectionnée dans la liste déroulante

Question

Il y a deux formulaires à remplir dans mon programme. Je veux juste afficher chaque formulaire après avoir sélectionné une liste déroulante de formulaire de valeur. J'ai essayé plusieurs fois mais je n'ai pas réussi. Je ne suis pas une personne de programmation. Aussi, j'ai besoin de la valeur sélectionnée dans la liste déroulante à rester même après rechargement de la page. Donc, si quelqu'un peut m'aider à résoudre ce problème en utilisant php, javascript ou jquery je serai reconnaissant.

Answer 1

Une partie du code serait utile. Mais peut-être cela vous diriger dans la bonne direction (celui-ci utilise jQuery):

<select name="formType" id="formType"> 
    <option value="Type A">Type A</option> 
    <option value="Type B">Type B</option> 
</select> 
... 
<form id="formA"> 
    ... 
</form> 
<form id="formB"> 
    ... 
</form> 

<script type="text/javascript"> 
$(function() {//on document load 
    $('#formA').hide(); 
    $('#formB').hide(); 
    $('#formType').change(function(){ 
     showForm($(this).val()); 
    }); 

}); 

function showForm(myFormType){ 
    if(myFormType == 'Type A'){ 
     $('#formA').show(); 
    } 
    else{ 
     $('#formB').show(); 
    } 
} 
</script> 

Answer 2

La solution dépend si vous voulez avoir les deux formulaires sur la page et une projection sera modifié en fonction de la sélection ou si vous vouloir que le rechargement de la page affiche le bon formulaire.

La première solution est simple Javascript (jQuery et dans ce cas):

$(document).ready(function() { 
    $('.group').hide(); 
    $('#option1').show(); 
    $('#selectMe').change(function() { 
     $('.group').hide(); 
     $('#'+$(this).val()).show(); 
    }) 
}); 

Voir http://jsfiddle.net/eYzSb/ pour un exemple complet.

La deuxième solution pourrait être faite avec Ajax ou PHP et je mettrai à jour cette réponse plus tard.

Answer 3

<select> 
<option value="" selected="selected"></option> 
<option value="form_1">Form 1</option> 
<option value="form_2">Form 2</option> 
<option value="form_3">Form 3</option> 
</select> 

<form name="form_1" id="form_1" style="display:none"> 
<input type="text" value="1"> 
</form> 

<form name="form_2" id="form_2" style="display:none"> 
<input type="text" value="2"> 
</form> 

<form name="form_3" id="form_3" style="display:none"> 
<input type="text" value="3"> 
</form> 

JS:

$("select").on("change", function() {  
    $("#" + $(this).val()).show().siblings().hide(); 
}); 

demo