How to use jQuery .ajax to my form's action

Question

I changed my coding style for php and jQuery, but my Registration

$(\"#reg_form_company\").bind(\"submit\", function() {
    $.fancybox.showActivity();
    $.aj         


        

Answer 1

You must intercept the click/submit event for your form and refer the form as shown bellow:

 $("#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');
     }
    });
 })

And add an id to your form like:

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

Answer 2

Ajax that works for file inputs

Hi,
the other answers has not worked for me since I needed to pass files inputs and thoses cannot be "serialized".

The good way is to pass it via FormData and disable processData:

$('form').on('submit',function(e){
    e.preventDefault();

    var formData = new FormData(this);

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

});

Hope it helped ;)

Answer 3

you must refere your form instead of $(this)

give your form an id or class ex :

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

and in JQuery :

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

Answer 4

You need to do something like this: 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');
        }
    });

});

You have to use serialize() instead of serializeArray(). serializeArray() creates a JavaScript-object, serialize() creates a query-string.

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

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

Basically you wait until the form is submitted and then you interrupt it (e.preventDefault();).

Answer 5

    //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">