Obtenir la valeur sélectionnée de la liste déroulante dans un formulaire HTML sans soumettre
-
05-07-2019 - |
Question
Comment obtenir le texte de l'élément sélectionné à partir d'un élément de la liste déroulante dans des formulaires HTML? (en utilisant python) Comment enregistrer la valeur dans une variable lorsque je sélectionne un élément dans la liste déroulante à l'aide de la souris? (c.-à-d. sans utiliser un bouton d'envoi)
Ceci est pour une application que je suis en train de faire dans un moteur d'applications qui ne supporte que Python.
La solution
Votre question révèle des malentendus sur le fonctionnement des applications Web .
L'utilisateur doit saisir une adresse dans un navigateur pour accéder à l'application. Cela envoie une requête au serveur. Le code serveur (écrit en python) reçoit cette demande et a la possibilité d’envoyer une réponse. La réponse est un document généralement écrit en HTML . Certaines parties de ce document peuvent être dynamiques, c’est-à-dire générées par le code python. D'autres parties du document peuvent être statiques. Le navigateur affiche ensuite le document dans la fenêtre utilisateur.
Ensuite, la seule façon dont votre code python peut savoir quelque chose qui se passe dans la fenêtre du navigateur ou pour exécuter une partie du code python est de demander au navigateur d'envoyer une autre requête.
Cela peut arriver dans de nombreuses situations, la plus courante étant:
- l'utilisateur clique sur un lien vers un autre URL, rendant le navigateur envoyer un autre demande à cette nouvelle URL.
- L'utilisateur clique sur le bouton
submit
pour créer navigateur soumettre le formulaire en tant que demande à l'adresse configurée dans le L'attributaction
du formulaire. - Certains codes de la page, généralement écrits en ECMAscript (également appelé javascript ), fait une demande sous le capot.
Ce dernier est ce que vous voulez. Vous devez écrire dans javascript du code pour que le navigateur envoie les informations choisies dans le menu déroulant au serveur. De cette façon, votre code python sur le serveur peut y remédier.
La méthode la plus simple consiste à créer l'événement onchange
du menu déroulant, puis à le soumettre:
<select name='myfield' onchange='this.form.submit()'>
<option .... >
...
</select>
</form>
Ainsi, lorsque l'utilisateur modifie la valeur dans la liste déroulante, le formulaire est soumis comme si l'utilisateur avait cliqué sur soumettre. Le code Python sur le serveur sera exécuté. Le navigateur chargera la réponse.
Une autre méthode populaire consiste à utiliser l’API DOM XmlHTTPRequest de javascript pour envoyer la demande. De cette façon, vous pouvez recevoir la valeur en python et envoyer une réponse, qui sera à son tour reçue par le code javascript du navigateur. Ce code peut modifier des parties de la page en fonction de la réponse, sans modifier la page entière. Cette technique s'appelle AJAX .
Si vous envisagez d'écrire beaucoup de code javascript, je vous suggère fortement d'utiliser au moins une bibliothèque javascript pour vous faciliter la tâche, car elle vous facilitera la tâche avec de nombreuses versions de navigateur.
Autres conseils
Votre code python s'exécute sur le serveur (google appengine). Le formulaire HTML s'exécute sur le client (dans le navigateur). Le client et le serveur communiquent via le protocole HTTP. Le client envoie des demandes et le serveur répond par des réponses . Vous devez envoyer quelque chose au serveur pour que votre code python connaisse les actions de l'utilisateur.
Du côté client, vous pouvez utiliser Javascript (pensez à utiliser la bibliothèque jQuery). Vous pouvez probablement vous en sortir sans communiquer avec le serveur.
Si vous devez communiquer avec le serveur sans vouloir recharger la page, utilisez le Technique AJAX . Dans ce cas, vous devez créer des vues spéciales dans votre application python et lancer des requêtes en Javascript.
N'oubliez pas que Javascript est destiné au client, Python au serveur.
Si vous devez envoyer la valeur sélectionnée à votre serveur sans l'envoyer, je pense que la meilleure (sinon la seule) solution serait d'utiliser un peu de ajax.
Si vous utilisez jQuery, consultez c'est du travail ajax. et son modèle d'événements . Vous devrez d'abord attacher l'événement du menu déroulant à la fonction que vous souhaitez exécuter. Ainsi, lorsque l'utilisateur modifie la liste déroulante, le navigateur ouvre une nouvelle connexion en coulisse. Ainsi, vous pouvez obtenir cette valeur et la sauvegarder côté serveur. Serait qc. comme ceci:
$(document).ready(
$("#select_id").change(function() {
$(this).getJSON("/method", {"selectValue":$(this).val()}, function() {
alert("value received!");
});
});
);
J'espère que ça aide!
Le problème avec onchange est que tous les utilisateurs n'utilisent pas de souris. Si vous avez une liste déroulante et modifiez la valeur avec le clavier, vous ne pourrez jamais dépasser la première valeur sans la soumission du formulaire.
~ Cyrix