manejo de formularios con jQuery

MrH2 · #1 (**permalink**) 17/08/2012, 19:48

En primer lugar saludo a toda la comunidad, les comento que soy nuevo en el mundo de jQuery he estado leyendo mucho sobre esta libreria y me decidi a usarla.
Me gustaria me ayudaran con el siguiente código. tengo una pagina en la cual listo una serie de usuarios a traves de un bucle y al lado de los nombre inserto 3 iconos, 1 para editar, otro para borrar y otro para cambiar el pass. el HTML seria el siguiente:

Código HTML:

<form  method="POST" enctype="multipart/form-data">
<input name="formCtrl" id="formCtrl" type="hidden" value="xx">
<input name="pid" id="pid" type="hidden" value="user1">
<a href="editar" class="btnForm" ><div class="editar"></div></a>
<a href="borrar" class="btnForm" ><div class="borrar"></div></a>
<a href="cambiar" class="btnForm" ><div class="cambiar"></div></a>
</form>
<form  method="POST" enctype="multipart/form-data">
<input name="formCtrl" id="formCtrl" type="hidden" value="xx">
<input name="pid" id="pid" type="hidden" value="user2">
<a href="editar" class="btnForm" ><div class="editar"></div></a>
<a href="borrar" class="btnForm" ><div class="borrar"></div></a>
<a href="cambiar" class="btnForm" ><div class="cambiar"></div></a>
</form>
<form  method="POST" enctype="multipart/form-data">
<input name="formCtrl" id="formCtrl" type="hidden" value="xx">
<input name="pid" id="pid" type="hidden" value="user3">
<a href="editar" class="btnForm" ><div class="editar"></div></a>
<a href="borrar" class="btnForm" ><div class="borrar"></div></a>
<a href="cambiar" class="btnForm" ><div class="cambiar"></div></a>
</form>

Luego utilizo el siguiente script para capturar los click en los diferentes iconos.

Código HTML:

$(document).ready(function(){ 
$('a.btnForm').click(function(e) {
	e.preventDefault();
	var acc = $(this).attr("href");
	$('#formCtrl').attr("value",acc);
	$(this).parents().get(0).submit();
	});
})

La explicacion de lo que pretendo hacer es: que al dar click en un icono cambio el atributoo del campo ctrlForm ya se por editar, borrar o cambiar y luego envio el form. Al recibir los datos por POST en base a los valores de formCtrl y pid ejecuto las correspondientes funciones de PHP.

El inconveniente que tengo es que el script solo me funciona con la primera linea, o sea con el primer form.
en los restante no realiza el cambio de atributo de formCtrl, agredeceria me hagan notar mi error y/o me sugieran una mejor manera de hacer lo que pretendo.

Desde ya Muchas Gracias

gebremswar · #2 (**permalink**) 18/08/2012, 09:10

Hola MrH2, que tal. Bienvenido al foro.

Déjame decirte que estas haciendo mal uso de algunos atributos, como tambien el uso innecesario de elementos.

No es necesario incluir un <div> dentro de un <a>.
El atributo href del elemento <a> debe contener un vinculo hacia algun destino o en su defecto #. (Atributos <a>)
El valor del id de cualquier elemento debe ser unico en todo el documento. Para enviar datos de un formulario basta con el atributo name.

Despues de esas pequeñas correciones, puedes probar el siguiente ejemplo que preparé

Código Javascript:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(document).on('ready',function() {
    $('#myList').on('click','a.btnForm',function(e){
        e.preventDefault();
        var action = $(this).attr('rel');
        $(this).parent('form').find('input[name=formCtrl]').attr('value',action);
    });
});
</script>
</head>
<body>
<input type="button" id="add" value="add new form">
<div id="myList">
    <form method="POST" enctype="multipart/form-data">
        <input name="formCtrl" type="hidden" value="not">
        <input name="pid" type="hidden" value="user1">
        <a class="btnForm" rel="edit" href="#">editar</a>
        <a class="btnForm" rel="delete" href="#">eliminar</a>
        <a class="btnForm" rel="change" href="#">cambiar</a>
    </form>
    <form method="POST" enctype="multipart/form-data">
        <input name="formCtrl" type="hidden" value="not">
        <input name="pid" type="hidden" value="user1">
        <a class="btnForm" rel="edit" href="#">editar</a>
        <a class="btnForm" rel="delete" href="#">eliminar</a>
        <a class="btnForm" rel="change" href="#">cambiar</a>
    </form>
</div>
</body>
</html>

El evento click responde a todos los formularios que se agreguen dinamicamente con sus respectivos controles.
Atento a la linea 12, es la encargada de modificar el valor del elemento con name="formCtrl"
El código esta bastante simple; coméntanos cualquier duda, cambios y finalmente como lo implentaste

MrH2 · #3 (**permalink**) 18/08/2012, 20:20

Cita:

Iniciado por gebremswar

Hola MrH2, que tal. Bienvenido al foro.

Gracias gebremswar

Te agradesco me hayas hecho notar los errores, agradesco y valoro las correcciones y te comento que el código me funciono perfecto, solo tuve que agregar una linea para enviar el formulario.

Por otra parte los DIV vacios los uso para reemplazar los textos que me propones en el código por imagenes y algunos efectos con CCS.

Una ves mas... Muchas Gracias.