Envoie d’un formulaire avec AJAX

On ne présente plus le système AJAX qui aujourd’hui permet pas mal de chose, mais envoyer un formulaire complait grâce à lui, c’est encore un peu fastidieux.

Je m’explique, pour envoyer les informations d’un formulaire à une autre page avec AJAX, vous devez au préalable récupérer toutes les informations que contient le formulaire, (document.getElementsByName()…). C’est faisable si vous avez trois champs de saisies.
Bon maintenant si vous en avez 200, là ça rigole déjà moins! (200 champs de saisies et autres listes déroulantes, radio-bouton…, ça n’existe pas, si si je vous l’assure, ça existe…)

Donc je me suis mis à la recherche d’un script qui ferait ça à ma place (je suis faignant et ça se sent).
J’en ai trouvé un, mais il ne ne convenait pas encore assez.

Je l’ai donc retravaillé et adapté, afin qu’il soit pleinement compatible avec AJAX Code-Kit (SACK) .
–> Allez avec un exemple en live c’est toujours mieux <–

Voici le code :

<br />
// recherche des champs dans le formulaire et ajout de ceux-ci dans la variable POST de AJAX Code-Kit<br />
function getDataFromForm(Form, ajaxObj) { // fonction principale<br />
	var data= new Array();<br />
	var key=0;<br />
	for (key=0; key &lt; Form.elements.length; key++) {<br />
		switch(Form.elements[key].type) {<br />
			case 'checkbox': var currentValue = getValueFromChk(Form.elements[key]);<br />
			break;<br />
			case 'radio': var currentValue = getValueFromChk(Form.elements[key]);<br />
			break;<br />
			default: var currentValue = (Form.elements[key].tagName.toLowerCase() == &quot;select&quot;)? getSelectValue(Form.elements[key]) : Form.elements[key].value;<br />
			break;<br />
		}</p>
<p>		if(currentValue != undefined &amp;&amp; currentValue != '') {<br />
			// Ajout des valeur dans la variable POST<br />
			// ajaxObj.setVar (Nom de l'élément , Valeur de l'élément)<br />
			ajaxObj.setVar (Form.elements[key].name, currentValue)<br />
		}<br />
	}<br />
}</p>
<p>// recherche des checkBox sélectionné<br />
function getValueFromChk(obj) {<br />
	if(obj.checked) {<br />
		return obj.value;<br />
	} else {<br />
		return '';<br />
	}<br />
}</p>
<p>// recherche des valeurs sélectionnés dans une liste déroulante<br />
function getSelectValue(select) {<br />
	var value = &quot;&quot;;<br />
	for (var i=0; true; i++) {<br />
		if (select[i]) {<br />
			if (select[i].selected) {<br />
				value += select[i].value + &quot;,&quot;;<br />
			}<br />
		} else {<br />
			return value.substr(0, value.length-1);<br />
		}<br />
	}<br />
}<br />

Tagués avec : , , ,
Publié dans JavaScript - AJAX
Un commentaire pour “Envoie d’un formulaire avec AJAX
  1. pseudo dit :

    Lien de l’exemple ne marche plus…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*