CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Mr. Sam
Mr. Sam

Reputation: 405

Submit form for php without refreshing page

I've search for many solution but without success.

I have a html form;

<form id="objectsForm" method="POST">
      <input type="submit" name="objectsButton" id="objectsButton">
</form>

This is used for a menu button.

I'm using jquery to prevent the site from refreshing;

$('#objectsForm').on('submit', function (e) {

    e.preventDefault();

    $.ajax({
        type: 'post',
        url: '/php/objects.php',
        data: $('#objectsForm').serialize(),
        success: function () {
            alert('success');
        }
    });

});

In my php file I try to echo text to the body of my site;

<?php
if (isset($_POST["objectsButton"])){
     echo '<div id="success"><p>objects</p></div>';
} else {
echo '<div id="fail"><p>nope</p></div>';
}
?>

I know the path to my php file is correct, but it doesn't show anything? Not even the "fail div". Does anyone has a solution for me?

Thanks in advance!

Upvotes: 1

Views: 2309

Answers (3)

kRiZ
kRiZ

Reputation: 2316

PHP scripts run on the server, that means any echo you do won't appear at the user's end.

Instead of echoing the html just echo a json encoded success/ failure flag e.g. 0 or 1.

You'll be able to get that value in your success function and use jQuery to place divs on the web page.

PHP:

<?php
    if (isset($_POST["objectsButton"])){
         echo json_encode(1); // for success
    } else {
        echo json_encode(0); // for failure
    }
?>

jQuery:

var formData = $('#objectsForm').serializeArray();
formData.push({name:this.name, value:this.value });

$.ajax({
    type: 'post',
    url: '/php/objects.php',
    dataType: 'json',
    data: formData,
    success: function (response) {
        if (response == 1) {
            alert('success');
        } else {
            alert('fail');
        }
    }
});

EDIT:

To include the button, try using the following (just before the $.ajax block, see above):

formData.push({name:this.name, value:this.value });

Also, have the value attribute for your button:

<input type="submit" name="objectsButton" value="objectsButton" id="objectsButton">

Upvotes: 1

Everton Z. P.
Everton Z. P.

Reputation: 371

Based in your php source.. 

$.ajax({
    type: 'post',
    dataType: "html", // Receive html content
    url: '/php/objects.php',
    data: $('#objectsForm').serialize(),
    success: function (result) {
        $('#divResult').html(result);
    }
});

Upvotes: 1

Touch Cat Digital Inc.
Touch Cat Digital Inc.

Reputation: 143

The success function takes two parameters. The first parameter is what is returned from the php file. Try changing it to:

success: function (xhr){ alert(xhr);}

Upvotes: 2

Related Questions