Maison > Article > interface Web > Comment utiliser ajax pour exploiter un formulaire avec JavaScript
Cette fois, je vais vous expliquer JavaScript comment utiliser ajax pour faire fonctionner le formulaire, et quelles sont les précautions pour utiliser ajax pour faire fonctionner le formulaire en JavaScript. cas pratique, jetons un coup d'oeil.
L'utilisation de JavaScript pour faire fonctionner des formulaires est similaire à l'utilisation de DOM, car le formulaire lui-même est également une arborescence DOM.
Cependant, la zone de saisie, la zone déroulante, etc. du formulaire peuvent recevoir des entrées de l'utilisateur. Ainsi, l'utilisation de JavaScript pour faire fonctionner le formulaire peut obtenir le contenu saisi par l'utilisateur ou définir un nouveau contenu pour une entrée. boîte.
Les contrôles de saisie du formulaire HTML incluent principalement les types suivants :
Texte case , correspondante , utilisée pour saisir du texte
Boîte de mot de passe, correspondante , utilisée pour saisir le mot de passe ;
Le bouton radio correspondant , est utilisé pour sélectionner un élément
Box à cocher, correspondante, utilisée pour sélectionner plusieurs éléments
Boîte déroulante, correspondante < ;select> ; ;, utilisé pour sélectionner un élément;
Le texte masqué, correspondant , n'est pas visible par l'utilisateur, mais sera masqué lorsque le formulaire est soumis Le texte est envoyé au serveur.
Obtenir la valeur
Si nous obtenons une référence à un nœud Obtenez la valeur d'entrée utilisateur correspondante :
// <input type="text" id="email"> var input = document.getElementById('email'); input.value; // '用户输入的值'
Cette méthode peut être appliquée au texte, au mot de passe, masquée et sélectionnée. Cependant, pour les boutons radio et les cases à cocher, l'attribut value renvoie toujours la valeur prédéfinie du HTML, et ce que nous devons obtenir, c'est en fait si l'utilisateur a "coché" l'option, nous devrions donc utiliser vérifié pour juger :
// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label> // <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label> var mon = document.getElementById('monday'); var tue = document.getElementById('tuesday'); mon.value; // '1' tue.value; // '2' mon.checked; // true或者false tue.checked; // true或者false
Définir la valeur
La définition de la valeur est similaire à l'obtention de la valeur. Pour le texte, le mot de passe, les masqués et la sélection, définissez simplement la valeur directement :
// <input type="text" id="email"> var input = document.getElementById('email'); input.value = 'test@example.com'; // 文本框的内容已更新
Pour les boutons radio et les cases à cocher, définissez simplement coché sur vrai ou faux.
Contrôles HTML5
HTML5 a ajouté un grand nombre de contrôles standard, les plus couramment utilisés incluent la date, la dateheure, la dateheure-locale, la couleur, etc., ils le sont tous. Utilisez la balise :
<input type="date" value="2015-07-01"> <input type="datetime-local" value="2015-07-01T02:03:04"> <input type="color" value="#ff0000">
Les navigateurs qui ne prennent pas en charge HTML5 ne pourront pas reconnaître les nouveaux contrôles et les afficheront sous la forme type="text". Les navigateurs prenant en charge HTML5 obtiendront la chaîne formatée. Par exemple, la valeur d'une entrée de type="date" est garantie comme étant une date valide au format AAAA-MM-JJ ou une chaîne vide.
Soumettre le formulaire
Enfin, JavaScript peut gérer la soumission de formulaire de deux manières (la méthode AJAX sera introduite plus tard).
La première méthode consiste à soumettre un formulaire via la méthode submit() de l'élément