web-dev-qa-db-fra.com

Formulaire HTML à soumettre lors du changement de menu déroulant

Bonjour!

Je sais que ce sujet a déjà été abordé dans SO auparavant, mais je ne trouvais pas la réponse complète à ma situation ci-dessous, aussi je m'excuse si j'ai manqué la réponse ailleurs.

Portée:

Ce que j'essaie de réaliser est une liste déroulante (que ce soit en HTML pur ou en script Java, HTML est préférable) qui peut charger un fichier php. Dans ce fichier php, il devrait pouvoir accéder à la valeur du menu déroulant sélectionné.

Ce que j'ai essayé:


Méthode 1:

J'ai déjà utilisé une méthode comme celle-ci:

<form action="test.php" method="post">
<select name="dropdown" id="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
</select>
<input name="submitbutton" type="submit" value="submit" />
</form>

En cliquant ensuite sur le bouton d'envoi, la page test.php se charge et je peux obtenir la valeur du menu déroulant à l'aide de $ _POST ("menu déroulant"). Cette méthode fonctionne parfaitement bien! Cependant, je souhaite soumettre le formulaire SANS avoir besoin du bouton, en utilisant simplement le menu déroulant Onchange à la place.


Méthode 2:

J'ai aussi essayé d'utiliser:

<form>
<select name='dropdown' onchange='this.form.submit()'>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
</select>
<noscript><input type="submit" value="Submit"></noscript>
</form>

qui rechargera la page onchange mais pas la page test.php .. Changer "this.form.submit ()" en test.php ne fonctionne pas.


J'ai l'impression d'être proche des deux mais pas tout à fait là. J'espère que ce que j'essaie de réaliser est suffisamment expliqué.

Merci pour vos réponses à l'avance!

6
Eric F

Ajouter:

<form action="test.php" method="post">

Pour method2 et cela devrait bien fonctionner.

7
michal.hubczyk

Donnez un nom à votre formulaire:

<form name="form1" action="test.php">

.... alors votre échange serait: document.form1.submit();

BTW, cela n'a rien à voir avec PHP, car il est à 100% sur le client.

Essayez d'utiliser avec ajax

jQuery:

$(document).on("change", "select#dropdown", function(){
    $.ajax({
         url: 'http://localhost/test/action.php',
         type: "post",
         data: $("#myform").serialize();,
         success: function(response) {
             $('select#dropdown').after("dropdown changed!");
         }
    });
});
0
user2567536

Vous avez oublié d'ajouter 'action="test.php"' et 'method="post"' dans votre balise for .. Votre méthode IInd devrait donc ressembler à ce qui suit:

Code HTML:

<form action="test.php" method="post">
<select name='dropdown' onchange='this.form.submit()'>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
</select>
    <noscript><input type="submit" value="Submit"/></noscript>
</form>

et cela fonctionnera et vous pourrez afficher vos données de publication avec print_r($_POST) dans test.php. Il va vous montrer dropdown valeur :)

0
Neeraj Singh