Maison  >  Article  >  interface Web  >  Comment utiliser ajax pour exploiter un formulaire avec JavaScript

Comment utiliser ajax pour exploiter un formulaire avec JavaScript

php中世界最好的语言
php中世界最好的语言original
2018-03-31 13:40:281816parcourir

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

. Par exemple, en réponse à un événement de clic
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn