varios forms mismo js

Maganius · #1 (**permalink**) 04/02/2012, 15:19

Wenas,,

Estoy tratando con jquery de tener un mismo js con varios forms pero se me complica...

Les muestro el codigo:

Código Javascript:

Ver original$(document).ready(function(){
      $('.envio').submit(function(evento){
          $("#cargando").css("display", "block");
              $.ajax({
                        type: "POST",
                        url: $(this).attr('action'),
                        data: $(this).serialize(),
                        success: function(datos){
                           $("#cargaMascota").html("Se guardaron los datos: " + datos);
                         $("#cargando").css("display", "none");
                        }
                });
              return false;
       });
    });
 
 
function newform() {
        var div = document.createElement("div");
        div.innerHTML = document.getElementById("mascota").innerHTML;
        document.getElementById("new_mascota").appendChild(div);
        }

Lo primero es un codigo jquery para hacer ajax.
El sgundo para crear otro formulario identico al que ya tengo dentro del div mascota.
y luego lo coloco dentro del div new_mascota.

el problema es como hacer funcionar el ajax con los otros formularios que se van generando con la funcion newform que se ejecuta desde un boton.

Alguien tendra alguna idea?

chicohot20 · #2 (**permalink**) 04/02/2012, 19:44

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
<title>Hola</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#new").click(function(){ newform() });
    $("#mascota form").submit(function(){
        alert($(this).serialize());
        return false;
    })
})
function newform() {
    var div = document.createElement("div");
    div.innerHTML = document.getElementById("mascota").innerHTML;
    document.getElementById("new_mascota").appendChild(div);
    $("form",div).submit(function(){
        alert($(this).serialize());
        return false;
    })
}
</script>
<style>
form{border: 1px solid #555; width: 300px; padding: 8px;}
#mascota{padding: 8px; background: #DDD;}
#new_mascota{padding: 8px; background: #AAA;}
h4{margin: 0px;}
</style>
</head> 
<body>
<button id="new">New Form</button>
<div id="mascota">
    <h4>Mascota</h4>
    <form action=""><input type="text" name="text"/><input type="submit" value="Enviar"/></form>
</div>
<div id="new_mascota">
    <h4>New Mascota</h4>
</div>
</div>
</body>
</html>

Maganius · #3 (**permalink**) 04/02/2012, 19:51

Muchas gracias chicohot20 sos un capo!!!!!!!

Me salvastes el formulario de tenerlo que hacer con 1 solo boton!!.

gracias

Maganius · #4 (**permalink**) 04/02/2012, 20:01

chicohot20

Mirando tu código y entendiendo lo que hicistes pude sacar algo mas sencillo lo pondre por si alguien le pasa lo mismo lo arregle así:

Código Javascript:

Ver original$('#envio')[I][B][COLOR="Red"].live("submit"[/COLOR][/B][/I],function(evento){
          $("#cargando").css("display", "block");
              $.ajax({
                        type: "POST",
                        url: $(this).attr('action'),
                        data: $(this).serialize(),
                        success: function(datos){
                         $("#cargaMascota").html(datos);
                         $("#cargando").css("display", "none");
                        }
                });
              alert($(this).serialize());
              return false;
       });

pinté en rojo lo que cambie. de esta forma cuando el DOM se actualize, "cuando agregue el siguiente formulario" con la función live de jquery funciona.

Maganius · #5 (**permalink**) 04/02/2012, 20:10

Tengo otra consulta sobre el mismo tema, de que manera podria desabilitar el boton enviar del formulario que envie?

chicohot20 · #6 (**permalink**) 05/02/2012, 19:08

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
<title>Hola</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("form").submit(function(){
        $("input[type=submit]",this).prop("disabled",true);
        return false;
    });
})
</script>
</head> 
<body>
<form action="">
<input type="submit" value="Enviar"/>
</form>
</div>
</div>
</body>
</html>