Jquery es una libreria multiplataforma de Javascript que nos permite realizar muchas interacciones con el HTML y el DOM de forma muy sencilla.
Hoy vamos a ver como mediante Jquery le vamos a cambiar el nombre a un par de elementos HTML. En este caso, tenemos un formulario, y al enviar los datos al servidor los valores que se envían asociados a cada input de entrada que tenemos se hace mediante el nombre del input correspondiente.
En nuestro caso, teníamos dos inputs diferentes que relacionaban con el mismo campo a nivel de backend. Pero para unos usuarios queriamos mostrar unos valores, y para otros unos valores distintos. La manera que encontramos para solucionarlo fué crear dos selectores distintos, cada uno con la lista de valores que queriamos que pudiera elegir el usuario. Y en función de un tercer campo, mostrabamos el que le tocaba y ocultabamos el que no.
De esta manera podríamos haberlo solucionado, teniendo ambos campos en el backend y controlando cual de los dos teníamos que utilizar para guardar en nuestra base de datos. Pero no queríamos modificar el backend, así que se nos ocurrió que podíamos modificar los nombres de los selectores, para que el que se enviara al servidor fuera el que el usuario había utilizado.
Para ello, a parte de mostrar y ocultar los campos correspondientes, decidimos modificar el nombre. ¿Y como lo hicimos? Pues utilizamos JQuery para poder modificarlo y como veréis es una instrucción muy sencilla.
$("[name='options_provincia']").attr("name", "options_provincia_old");
$("#options_provincia_new").attr("name", "options_provincia");
Os ponemos las dos instrucciones que utilizamos.
Simplemente se debe buscar el elemento que queremos cambiarle el nombre, en la primera instrucción utilizamos el selector por nombre y en el segundo por id.
Y luego una vez encontrado simplemente tenemos que modificar, mediante la instrucción attr el atributo "name" e indicarle el nuevo nombre que queremos que tenga.
Esperemos que os haya sido de utilidad.