Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

jquery

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

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

Then this is my Form

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

Then after clicking the "Submit" button, it doesn't work, I assume that somebody can help me to solve this problem, coz the $.ajax might confuse about POST(for inputs) and the GET(for the parameters of the "action" form)

I appreciate for your help, you can also modify the entire jQuery code if it's required.

Sorry guys for not including the #reg_form_company, and the fancybox

like image 988
NosiaD Avatar asked Apr 06 '12 09:04

NosiaD


People also ask

How would you make an AJAX call to submit a form?

Answer: Use the jQuery $. post() Method You can simply use the $. post() method in combination with the serialize() method to submit a form using AJAX in jQuery. The serialize() method creates a URL encoded text string by serializing form values for submission. Only "successful controls" are serialized to the string.

What is ajaxForm in jQuery?

ajaxForm({ // dataType identifies the expected content type of the server response. dataType: 'json', // success identifies the function to invoke when the server response. // has been received.

How does .post work in jQuery?

jQuery $.post() Method The $.post() method requests data from the server using an HTTP POST request. Syntax: $.post(URL,data,callback); The required URL parameter specifies the URL you wish to request.


1 Answers

File input working ajax

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    : (data) => console.log('Data returned from server => ', data),
        contentType: false,
        processData: false
    })
})
like image 55
TOPKAT Avatar answered Sep 28 '22 12:09

TOPKAT