AJAX Request Failed in form send data using php ajax

Question

I need to send form data using ajax.

HTML:

<div class="" id="ajax-msg1"></div>
<form id="ajaxform" action="load.php">
   <input type="hidden" name="csrf_token" id="my_token" value="<?php echo $token; ?>" />
   <button type="submit" name="submit" id="ajax-1">Send</button>
</form>

JS:

$(document).ready(function() {
    $("#ajax-1").click(function() {
        $("#ajax-msg1").html("<img src='loading.gif'/>");
        var formData = $("#ajaxform").serializeArray();
        var URL = $("#ajaxform").attr("action");
        $.ajax({
            url: URL,
            type: "POST",
            data: formData,
            success: function(data, textStatus, jqXHR) {
                $("#ajax-msg1").html('<pre><code class="prettyprint">' + data + '</code></pre>');
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $("#ajax-msg1").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</code></pre>');
            }
        });
    });
});

But in action i see this error:

AJAX Request Failed

and not work form. how do fix this error?!

you should specify the data type that the response will send back — guradio
– guradio, Commented Sep 18, 2015 at 7:00
At where you see the errors? You're using submit type for button, and never return false will lead normal behavior submit. — Norlihazmey Ghazali
– Norlihazmey Ghazali, Commented Sep 18, 2015 at 7:15
Am I wrong, or are you submitting a form with only a hidden field 'crsf_token', that originally comes from the server, only to POST it again to the server via Ajax? — jeoj
– jeoj, Commented Sep 18, 2015 at 7:20

swidmann · Accepted Answer · 2015-09-18 07:26:09Z

1

Like "Norlihazmey Ghazali" said

change:

$(document).ready(function() {
    $("#ajax-1").click(function() {

to:

$(document).ready(function() {
    $("#ajax-1").click(function( e ) {
        e.preventDefault();// avoid submitting the form here

answered Sep 18, 2015 at 7:26

swidmann

2,8021 gold badge21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pzeszko Over a year ago

Or he could easily use regular <input type="button"/> instead of submit one.

Collectives™ on Stack Overflow

AJAX Request Failed in form send data using php ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related