Enviar Formulario con <select multiple> via POST

[Computer XTress]

Holas

Sip, te explico como lo hice... tengo estas funciones:

sendData(): Envía un request por background. Espera una URL apuntando hacia un script que recibirá y procesará información.

setQueryString(): Recorre el primer formulario del documento capturando elementos y valores. Genera un string con formato nombreElemento=valorElemento&. Es llamada internamente desde la funcion sendData();


En el formulario no usas ningun action... pero le aplicas un evento onsubmit indicando que llame a la función sendData(). De forma tal que se genere el string con toda la data y se envíe al URL deseado.

Vamos a las funciones... todavia no optimize la función setQueryString(), fijate de hacerlo vos para no repetir estructuras...

FUNCION sendData()

Código:

function sendData(vUrl) {
	setQueryString();
	httpRequest("POST", vUrl, true, handleResponse, queryString);
}

Como ves, se llama a setQueryString(), luego se envia un request indicando el URL (vUrl), la función handler y el string con toda la data.


La funcion setQueryString()

Código:

function setQueryString() {
	queryString = "";

	var frm = document.forms[0];
	var numberElements = frm.elements.length;

	for (var i = 0; i < numberElements; i++) {

		if (i < numberElements - 1) {

			if (frm.elements[i].tagName == "SELECT"){
				var select = "_"+ frm.elements[i].name +"=";
				for (y=0; y < frm.elements[i].options.length; y++) {
					if (frm.elements[i].options[y].selected) {
						select += encodeURIComponent(frm.elements[i].options[y].value) + "-";
					}
				}

				queryString += select + "&";
				select = "";
			}

			queryString += frm.elements[i].name + "=" + encodeURIComponent(frm.elements[i].value) + "&";

		} else {

			if (frm.elements[i].tagName == "SELECT"){
				var select = "_"+ frm.elements[i].name +"=";
				for (y=0; y < frm.elements[i].options.length; y++) {
					if (frm.elements[i].options[y].selected) {
						select += encodeURIComponent(frm.elements[i].options[y].value) + "-";
					}
				}

				queryString += select;
				select = "";
			}
			queryString += frm.elements[i].name + "=" + encodeURIComponent(frm.elements[i].value);
		}
	}
}

Si la analizas detenidamente la vas a entender... es simple la cuestión. No solo recorro el form creando un STRING, sino que analiso los elementos en busqueda de elementos tipo "SELECT". Si aparece alguno, creo una segunda string y en su contenido voy a colocar el nombre del SELECT y todos los "values" separados por coma de los <OPTION>'s seleccionados. Esto me quedaría asi:

"_"+ Nombre_Del_SELECT + "=" + valor_1 +", "+ valor_2 +", "+ valor_3

Luego sumo ese string al string principal queryString.

Me queda algo asi... ejemplo:

nombre=Pedro&apellido=Fernandez&_saboresdehelado=1 , 2, 3&[email protected]


Ahora.. fijate un detalle...

var select = "_"+ frm.elements[i].name +"=";

En el PHP vos sabes que si tu <select> tenia name="modulos", el post correspondiente a éste será $_POST["_modulos"]. Por que en el string le agregaste "_" adelante... esto es para no confundir la información real del form !!


CONCLUSION

Código:

...
<form action="javascript:void%200;" method="post" onsubmit="sendData('../scripts/proceso_forms.php');">

<select name="modulos">
 <option id='1' value='SISTEMA'>SISTEMA</option>
 <option id='2' value='USUARIOS'>Usuarios</option>
 <option id='19' value='WEBS'>webs</option>
</select>

<input type='submit' value='manda' />
...
</form>

Código PHP:

  <?php

if ($_POST['_modulos') {
   $ar_modulos = array();

   $ar_modulos = explode(", ", $_POST['_modulos']);
}

  foreach($ar_modulos as $value) {
   echo $value."<br/>";
 }
}

?>   

Bueno, espero sirva. Un saludo