formulario dinamico jquery

[fedecini]

hola,

consegui un formulario en la web, con el sistema dinamico, es decir que si queres agregar otro campo click en un boton "+" y se agrega otro input, el tema es cuando tengo dos form en la misma pagina, cuando agrego en el de abajo se suma al de arriba, imagino que es porque esta mal el insert after,

aca dejo el codigo aver si me pueden ayudar.

HTML, con los dos formualrios,

lo que hace es meter un div adentro de un form, que tiene dos input adentro, y los clona los limpia y le cambia el boton "+" a "-" por si quiero borrarlo,

Código:

<div id="stylized" class="myform" style="margin:20px auto;">
<form id="form" name="form" method="post" action="create">
<h1>Compra de material</h1>
<p>Si es necesario a&ntilde;ade el material a comprar</p>
<div id="div_1" class="ingredient">
<label>Add Ingredient <span class="small">A&ntilde;ade los materiales</span>
</label>
    <input  type="text"  name="ingredients[]"  style="width:200px;" /> 
	<input class="bt_plus" id="1" type="button" value="+" /><div class="error_form"></div>
</div>
<button name="submit" type="submit" value="addingredient" class="boton">Save</button>
<div class="spacer"></div>
</form><br />

<form id="form" name="form" method="post" action="create">
<div id="div_1 class="tableware">
<label>Add Ingredient <span class="small">A&ntilde;ade los materiales</span>
</label>
    <input  type="text"  name="tableware[]"  style="width:200px;" /> 
	<input class="bt_plus" id="1" type="button" value="+" /><div class="error_form"></div>
</div>
<button name="submit" type="submit" value="addtableware" class="boton">Save</button>
<div class="spacer"></div>
</form>

</div>

Jquery

[CODE]$(document).ready(function(){
//ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
$(".bt_plus").each(function(){
$(this).bind("click",addField);
});
});


function addField(){
// ID del elemento div quitandole la palabra "div_" de delante. Pasi asi poder aumentar el número. Esta parte no es necesaria pero yo la utilizaba ya que cada campo de mi formulario tenia un autosuggest , así que dejo como seria por si a alguien le hace falta.

var clickID = parseInt($(this).parent('div').attr('id').replace( 'div_',''));
var claSs = $(this).parent('div').attr('class');

// Genero el nuevo numero id
var newID = (clickID+1);

// Creo un clon del elemento div que contiene los campos de texto
$newClone = $('#div_'+clickID).clone(true);

//Le asigno el nuevo numero id
$newClone.attr("id",'div_'+newID);

//Asigno nuevo id al primer campo input dentro del div y le borro cualquier valor que tenga asi no copia lo ultimo que hayas escrito.(igual que antes no es necesario tener un id)
$newClone.children("input").eq(0).attr("id",'ingre dients'+newID).val('');

//Asigno nuevo id al boton
$newClone.children("input").eq(1).attr("id",newID)

//Inserto el div clonado y modificado despues del div original
$newClone.insertAfter($('#div_'+clickID));

//Cambio el signo "+" por el signo "-" y le quito el evento addfield
$("#"+clickID).val('-').unbind("click",addField);

//Ahora le asigno el evento delRow para que borre la fial en caso de hacer click
$("#"+clickID).bind("click",delRow);

}

function delRow() {
// Funcion que destruye el elemento actual una vez echo el click
$(this).parent('div').remove();

}[CODE]

tenia pensado que reconozca por id y por class tambien, asi agrega bien pero no se como hacerlo

si me pueden dar una mano!


Saludos! y Gracias!

[caricatos]

Tema movido desde AJAX

[fedecini]

bue y la respuesta :D

porque movido?, jquery no es ajax?

[Dany_s]

jquery es un framework javascript

el problema es que trabaja con ID y los repite, no sirve trabajar con ID en cosas dinámicas

usa el buscador del foro ya hay muchas post sobre eso


lee un poco la doc de jquery, buscá tutoriales, no sirve que alguien te haga algo si no sabés siquiera lo básico