CODEWITHSUNDEEP
javascriptphpajax
rhill45
rhill45

Reputation: 569

jquery ajax request not returning to page

My form uploads multiple text fields and a file to a php script to save the file and save the text fields to a sql db. that is working, my php script ends with 

             ('state'  => 200, "success" => true, "id" => $_POST['id'], "titlea" => $_POST['title'], "addressa" => $_POST['address'], "lot_sizea" => $_POST['lot_size'], "zoninga" => $_POST['zoning'], "build_sizea" => $_POST['build_size'], "sale_pricea" => $_POST['sale_price'], "lease_pricea" => $_POST['lease_price'], "commenta" => $_POST['comment'], "transactiona" => $_POST['transaction'], "ad_linka" => $ad_link, 
             );
  exit(json_encode($response));

which is returning a json encoded response. However the return is staying on the php page and not coming back to the page with the ajax request on it. Here is my ajax script:

$("document").ready(function() {
    $(".data-form").submit(function() {
        var formData = new FormData($('form')[0]);
        if (confirm("\t\t\tAre you ready to sumbmit this listing?\nYou can always edit the listing after going to the menu tab - edit listing.")) {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "add-list.php",
                data: formData,

                success: function(response) {
                    if (response.success) {
                        $("#modal1").modal('hide');
                        $("#add_frame").show();
                        $("#newbutt").show();
                        $(".atitle").html('<a href="' + response.ad_linka + '" target="_blank">' + response.titlea + '</a>');
                        $(".acomment").html(response.commenta);
                        $(".aaddress").html(response.addressa);
                        $(".asale-price").html(response.sale_pricea);
                        $(".alease-price").html(response.lease_pricea);
                        $(".alot-size").html(response.lot_sizea);
                        $(".abuilding-size").html(response.build_sizea);
                        $(".azoning").html(response.zoninga);
                    } else {
                        console.log("An error has ocurred: sentence: " + response.sentence + "error: " + response.error);
                    }
                },
                error: function() {
                    alert("An Error has ocurred contacting the server. Please contact your system administrator");
                }
            });
            return false;
        }
    });
});

How can I change this so I can get the page back and allow the success method to run?

Here is the beginning of my form:

<form class="avatar-form" enctype="multipart/form-data" method="POST">

Upvotes: 1

Views: 1188

Answers (1)

Kevin B
Kevin B

Reputation: 95028

Couple issues:

First, you need to ensure that you are selecting the correct form. $('form') will select all forms, and $('form')[0] will select the first one. You should instead target the correct form.

$('.data-form')[0]

Next, when sending FormData, you have to set processData and contentType to false so that jQuery will not attempt to process FormData. (this is done within $.ajax({...}))

contentType: false,
processData: false

Note: ajax file uploading will not work on IE < 10

It's also a good practice (at least while debugging) to use event.preventDefault instead of return false, and to do it at the top of the handler so that if any syntax errors occur, your form won't submit leaving you with no way of seeing the errors. See Preston S's answer for an example.

Upvotes: 2

Related Questions