Maison > interface Web > js tutoriel > Comment récupérer toutes les valeurs du formulaire en js (code ci-joint)

Comment récupérer toutes les valeurs du formulaire en js (code ci-joint)

不言
Libérer: 2018-08-28 16:48:15
original
7994 Les gens l'ont consulté

Le contenu de cet article explique comment obtenir toutes les valeurs du formulaire en js (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Habituellement, toutes les zones de saisie du formulaire sont obtenues via l'objet dom du document

<form>
<input id="a1" type="input" value="" name="a1"><br>
<input id="a2" type="input" value="" name="a2"><br>
<input id="a3" type="input" value="" name="a3"><br>
<input id="a4" type="input" value="" name="a4"><br>
<input id="submit" type="button" value="提交" name="submit">
</form>
Copier après la connexion

Ce qui suit est une comparaison des deux méthodes :

<script>
$(function() {
$(&#39;#submit&#39;).click(function() {
						
//方法1:
var a1 = document.getElementsById("a1").value;
//var a1 = document.getElementsByName("a1").value;
						
//要是提交json的格式的话还需要
var json ={"a1":a1}
						
//这样子转化一下,一个两个10个input还是可以接受的,但是实际开发中往往几十个 这样子就显得很笨重了,所以推荐方法二
						
//方法二:
var d = {};
var t = $(&#39;form&#39;).serializeArray(); // 默认是json 格式
						
//传统的for循环,将值打印出来
/*
console.info(t)
						
for (var i = 0;i<t.length;i++) {
console.info(t[i]);
d[t[i].name] =  t[i].value;
							
}
						
*/
						
//jQuery的循环
$.each(t, function() {
//console.info(t)
d[this.name] = this.value;
console.info(d)
}); 
						
console.info(JSON.stringify(t));   //从json对象解析出json字符串
var json_str = JSON.stringify(t);
						
console.info(JSON.stringify(d)); //从一个对象解析出字符串
});
});
</script>
Copier après la connexion

. Méthode 1 :

Utilisez le js d'origine pour obtenir la valeur

Méthode 2 :

Utilisez la bibliothèque de fonctions jquery pour obtenir la valeur

Recommandations associées :

Comment obtenir la valeur sélectionnée du bouton radio en js

Comment obtenir la valeur et le nombre d'éléments dans la liste déroulante dans js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal