Ver Mensaje Individual
  #2 (permalink)  
Antiguo 05/04/2012, 08:54
Avatar de charly_vc
charly_vc
 
Fecha de Ingreso: enero-2012
Ubicación: GDL
Mensajes: 31
Antigüedad: 12 años, 11 meses
Puntos: 1
Respuesta: Multiples Submit Form jQuery

Cita:
Iniciado por charly_vc Ver Mensaje
Que tal compañeros!!

Tengo una duda sobre el envio de formularios con jquery, ¿Como le puedo hacer para que cuando le de submit en un formulario se envie el correcto y no otro formulario que tengo en una misma pagina?. Por ejemplo, primero dinámicamente cargo un formulario en mi pagina donde tengo declarado el

Código Javascript:
Ver original
  1. .
  2. .
  3. var opciones= {
  4.                                success: mostrarRespuesta
  5. };
  6.        
  7.         $j_3('#formFactura').ajaxForm(opciones);
  8. .
  9. .

Hasta ahí todo marcha bien, pero en este mismo formulario, mando llamar a una ventana modal que yo cree, donde cargo otro archivo php algo asi




En el .php del segundo formulario tengo declarado

Código Javascript:
Ver original
  1. .
  2. .
  3. var opciones= {
  4.                                success: mostrarRespuesta
  5. };
  6.        
  7.         $j_3('#formCliente').ajaxForm(opciones);
  8. .
  9. .

El problema es que si le doy submit al formCliente (el segundo formulario de la ventana modal. fig2) se envia el formFactura(el primer formulario. fig. 1)

Algo que hice para enviar el correcto, fue hacer un delegate de la siguiente forma:

Código Javascript:
Ver original
  1. $j_6(this).delegate('#estiloSubmit',"submit", function(event) {
  2.         event.preventDefault();
  3.  
  4.         $j_6.ajax({
  5.             type: 'POST',
  6.             url: $j_6('#formCliente').attr('action'),
  7.             data: $j_6('#formCliente').serialize(),
  8.             success: function(data) {                  
  9.                     $j_6('#resultCliente').html(data);
  10.                     $j_6('#loading').hide();
  11.             }
  12.         })
  13.  
  14.     });

Lo cual si funciona, peeero. el problema con esto es que yo uso como validador de formulario, el plugin "Vanadium" (No se si algunos lo conoscan) el cual, al hacer el submit, se pierde la validación de campos, como que el vanadium no alcanza a interceptar el submit de esta manera.

¿Aguien tendrá, alguna otra idea de como hacerlo? Se los agradecere mucho si me hechan una mano.
Por el momento ya lo he solucionado y la forma fue que en el formulario que esta en una ventana modal deje la llamada del submit de la siguiente forma:

Código Javascript:
Ver original
  1. $j_6(document).ready(function() {
  2.     $j_6('#loading').hide();
  3.     $j_6().ajaxStart(function() {
  4.         $j_6('#loading').show();
  5.         $j_6('#resultCliente').hide();
  6.     }).ajaxStop(function() {
  7.         $j_6('#resultCliente').fadeIn('slow');
  8.         $j_6('#loading').hide();
  9.     });
  10. $j_6('#estiloSubmit').click(function() {
  11.         $j_6.ajax({
  12.             type: 'POST',
  13.             url: $j_6('#formCliente').attr('action'),
  14.             data: $j_6('#formCliente').serialize(),
  15.             beforeSend: function(){
  16.                 var flag = $j_6().validaForm();
  17.                 return flag;
  18.             },
  19.             success: function(data) {
  20.                     $j_6('#resultCliente').html(data);
  21.                     $j_6('#loading').hide();
  22.             }
  23.         })
  24.  
  25.     });
  26.  
  27. $j_6.fn.validaForm = function(){
  28.         var arr = ["nombre","rfc"];
  29.         var ban=true;
  30.         for(var i = 0; i < arr.length; i++)
  31.         {  
  32.             if(document.getElementById(arr[i]).value == ""){
  33.                 $j_6("#"+arr[i]+"_span").html('<Label FOR="name" style="background-color: #FFFFB3; width: 20px; height: 25px; float: left"><img title="Este campo es requerido" src="Imagenes/Attention.png" width="18" height="18"></Label>');
  34.                 ban=false;
  35.             }
  36.         }
  37.         return ban;
  38.     }
  39. });
  40.  
  41. function validaQuita(){
  42.         var arr = ["nombre","rfc"];
  43.         for(var i = 0; i < arr.length; i++)
  44.         {  
  45.             if(document.getElementById(arr[i]).value != ""){
  46.                 $j_6("#"+arr[i]+"_span").html('');
  47.             }
  48.         }
  49. }
  50.  
  51. function validaPon(id){
  52.     if(document.getElementById(id).value == ""){
  53.         $j_6("#"+id+"_span").html('<Label FOR="name" style="background-color: #FFFFB3; width: 20px; height: 25px; float: left"><img title="Este campo es requerido" src="Imagenes/Attention.png" width="18" height="18"></Label>');
  54.     }
  55. }

Código HTML:
Ver original
  1. .
  2. .
  3. <input type="text" size="23" onBlur="toUpper(this); validaQuita(); validaPon(this.id);" name="nombre" id="nombre" class=":required Logers" value="<?=$nombre?>" /><span id="nombre_span"></span>
  4. .
  5. .
  6. <input type="text" size="23" onBlur="toUpper(this); validaQuita(); validaPon(this.id);" name="rfc" id="rfc" class=":required Logers" value="<?=$rfc?>" /><span id="rfc_span"></span>
  7. .
  8. .
  9. <input type="button" id="estiloSubmit" value="GUARDAR"/>

Si se dan cuenta hice uso de "beforeSend" donde mando llamar una funcion que tuve que hacer para validar el formulario, es decir, ya no use el plugin "Vanadium", fue el único recurso que encontré, de cualquier manera si alguien tiene la solución para seguir usando el "Vanadium" se los agradecere.