5. Leggere i form HTML

Leggere i form HTML

Vediamo di seguito alcuni metodi che ci consentiranno di leggere rapidamente tutti i dati contenuti in una form, e di aggiungerli all'array params, pronti per essere processati e inviati nella prossima richiesta AJAX.
Il metodo principale (e l'unico che richiameremo) è form_read.
Quest'ultimo si servirà di altri due metodi esterni solo nel caso in cui, nella form HTML che dovrà leggere, ci sarà una select multipla.

Il primo metodo d'appoggio è getSelected, che legge i valori selezionati nella select multipla e restituisce un'array contenente i suddetti valori.
Il secondo metodo d'appoggio è storeSelected, che prenderà l'array elaborato da getSelected e lo memorizzerà in params pronto per la spedizione.

AjaxModule.prototype.getSelected = function(opt)
{
	var selected = new Array();
	var index = 0;

	for (var intLoop = 0; intLoop < opt.length; intLoop++)
	{
		if ((opt[intLoop].selected) || (opt[intLoop].checked))
		{
			index = selected.length;
			selected[index] = new Object;
			selected[index].value = opt[intLoop].value;
			selected[index].index = intLoop;
		}
	}

	return selected;
}

AjaxModule.prototype.storeSelected = function(opt, p)
{
	var sel = AjaxModule.prototype.getSelected(opt);
	var strSel = "";

	var cont = 0;
	for (var item in sel)
	{
		cont++;
		AjaxModule.prototype.params[p + "_" + cont] = sel[item].value;
	}
	AjaxModule.prototype.params["n_" + p] = cont;
}

AjaxModule.prototype.form_read = function(nome_form)
{
	var oForm = document.getElementById(nome_form);

	for (var i = 0; i < oForm.elements.length; i++)
	{
		var oField = oForm.elements[i];

		switch (oField.type)
		{
			case "checkbox" :
			case "radio" :
				if (oField.checked)
					AjaxModule.prototype.params[oField.id] = "1";
				else AjaxModule.prototype.params[oField.id] = "0";
				break;

			case "text" :
			case "hidden" :
			case "password" :
			case "textarea" :
			case "select-one" :
				AjaxModule.prototype.params[oField.id] = oField.value;
				break;

			case "select-multiple" :
				AjaxModule.prototype.storeSelected(oField.options, oField.id);
				break;
		}
	}
}

Per utilizzare questa nuova funzionalità è sufficiente assegnare un ID alla form che dobbiamo leggere ed utilizzare il seguente codice per estrapolarne i dati.

<script type="text/javascript" language="JavaScript">
	imp.form_read('nome_form');
</script>

Una volta chiamato form_read, tutti i valori contenuti nel form HTML saranno pronti e disponibili in params e non dovrete fare altro che effettuare la richiesta al server attraverso il metodo makeRequest.

Il codice di esempio, e il codice della classe AjaxModule, li trovate in allegato a questo post.

E con questo abbiamo concluso il nostro tutorial.
Buon AJAX a tutti!

AllegatoDimensione
Esempio_AjaxModule.zip10.39 KB