Cómo utilizar jQuery .ajax a la acción de mi forma

Question

he cambiado mi estilo de codificación para php y jQuery, pero mi registro

$("#reg_form_company").bind("submit", function() { 
    $.fancybox.showActivity(); 
    $.ajax({ 
      type  : "POST", 
      cache : false, 
      url  : $(this).attr('action'), 
      data  : $(this).serializeArray(), 
      success : function(data) { 
       $(".printArea").empty().append(data).css('visibility','visible'); 
      } 
    }); 
    return false; 
}); 

Entonces este es mi Formulario

<form id="reg_form_company" action="index.php?module=register&actionregister" method="post" > 
     <input>[...]</input> 
</form> 

Luego, después de hacer clic en el " Enviar "botón, no funciona, supongo que alguien me puede ayudar a resolver este problema, porque el $ .ajax podría confundir acerca de POST (para entradas) y el GET (para los parámetros del formulario de" acción ")

Te lo agradezco Para ayudarlo, también puede modificar el código jQuery completo si es necesario.

siento chicos para no incluir la #reg_form_company, y la FancyBox

Answer 1

Debe interceptar el tecleo/Envía una prueba para su forma y remitir el formulario como se muestra a continuación:

$("#myForm").submit(function(){ 
    var $form = $(this); 

    $.ajax({ 
    type  : "POST", 
    cache : false, 
    url  : $form.attr('action'), 
    data  : $form.serializeArray(), 
    success : function(data) { 
     $(".printArea").empty().append(data).css('visibility','visible'); 
    } 
    }); 
}) 

y añadir un ID a su formulario como:

<form id="myForm" action="index.php?module=register&actionregister" method="post" > 
     <input>[...]</input> 
</form> 

Answer 2

debe refere su formulario en lugar de $(this)

dar a su forma un identificador o una clase de ejemplo:

<form action="index.php?module=register&actionregister" method="post" id="MyForm"> 
     <input>[...]</input> 
</form> 

y en jQuery:

$.ajax({ 
     type  : "POST", 
     cache : false, 
     url  : $('#MyForm').attr('action'), 
     data  : $('#MyForm').serializeArray(), 
     success : function(data) { 
      $(".printArea").empty().append(data).css('visibility','visible'); 
     } 
}); 

Answer 3

Que tiene que hacer algo como esto: http://jsfiddle.net/xSJTs/2/

$('form').on('submit',function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     type  : "POST", 
     cache : false, 
     url  : $(this).attr('action'), 
     data  : $(this).serialize(), 
     success : function(data) { 
      $(".printArea").empty().append(data).css('visibility','visible'); 
     } 
    }); 

}); 

Usted tiene que usar serialize() en lugar de serializeArray(). serializeArray() crea un objeto JavaScript, serialize() crea una cadena de consulta.

Serialize: http://api.jquery.com/serialize/

SerializeArray: http://api.jquery.com/serializeArray/

Básicamente usted espera hasta que se envía el formulario y luego interrumpirlo (e.preventDefault();).

Answer 4

//This is still showing the cgi output of my script in the browser 
$('#myForm').submit(function()){ 
       $('#myForm').preventDefault(); 
     $.ajax({ 
      type  : "POST", 
      cache : false, 
      url  : $('#myForm').attr('action'), 
      data  : $('#myForm').serialize(), 
      success : function(data) { 
       $(".printArea").empty().append(data).css('visibility','visible'); 
      }; 

    <form id = "myForm" action="cgi-bin/matt/matt-test.cgi?module=register&actionregister" method ="post">