How To POST to a PHP file using jQuery

Question

well I have a button when Users Clicks it it got disable and fadeIn a Message Thanks We will take care of this soon but now What I want to do is when ever Users Clicks the button it will disable and then it will post to a php file (say: error.php) this error.php will be like this

<?php
if(isset($_POST['submit'])){
  $ip= $_SERVER['REMOTE_ADDR'];
  $page= $_SERVER['REQUEST_URI'];
// now update these to sql database ..... and if successfully posted return true 
}
else{
  return false;
}

now if jQuery gets True it will fadeIn a div with sucess message else it will fade in another div with error / sorry message

the html and JS looks like this

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
 $('#submit').attr('disabled',true);
  $("#div1").fadeIn(1000); //if success
  $("#div2").fadeIn(1000); //if error
  });
});
</script>
</head>
<body>
<div id="div1" style="display:none;">Success</div>
<div id="div2" style="display:none;">Error</div>
<button id="submit">report The Page</button>
</body>
</html>

please help thnx

[Submit a form using jQuery](http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery) — vusan, Jul 05 '13 at 18:55

score 0 · Answer 1 · answered Jul 05 '13 at 18:59

Just do an ajax post....like so...

$("#submit").click(function(){
$('#submit').attr('disabled',true);
 $.post("example.php", function() {      
    $("#div1").fadeIn(1000); 
  }).fail(function() { 
    $("#div2").fadeIn(1000);});

But i dont know where your form is, so i dont know what data youre posting.

jszobody · Answer 2 · 2013-07-05T19:06:04.187

To see how to post via jQuery take a look at http://api.jquery.com/jQuery.post/

In your case your javascript code will look something like:

$("#submit").click(function(){
    $('#submit').attr('disabled',true);

    $.post('error.php', function(data) {
        if(data.success) {
            $("#div1").fadeIn(1000);
        } else {
            $("#div2").fadeIn(1000);
        }
    });
});

Do you need to submit the contents of a form along with this post? If so, change the above javascript to be like:

 $.post('error.php', $("#myform").serialize(), function(data) {

This assumes that you have a <form id="myform"> that you want to submit to error.php.

It also assumes that your PHP script is returning a 'success' attribute using json, something like (modified from your code):

<?php
if(isset($_POST['submit'])){
    $ip= $_SERVER['REMOTE_ADDR'];
    $page= $_SERVER['REQUEST_URI'];
    // now update these to sql database
    echo json_encode(array("success" => 1));
}
else{
    echo json_encode(array("success" => 1));
}

no there is no form there is just a button for reporting the page the user clicks the button to report the page .... then it will just added to mySQL table so that i can check the page and remove it if there is something wrong there is just a button if user clicks the button it will just call a post to a php file and disable the button and fade in success or error message — sudo, Jul 06 '13 at 06:30
@SoumeshBanerjee makes sense. Did I answer your question then? I think the above code should get you going on making the post, receiving the response from the server, and fading in the correct message. — jszobody, Jul 06 '13 at 14:00

score 0 · Answer 3 · answered Jul 05 '13 at 19:00

With jQuery you can use the .post() function: http://api.jquery.com/jQuery.post/

This function uses the HTTP POST Request and has a "success" function. The easiest way to use it is propably:

$.post('php/error.php', function(data) {
   console.log(data); // In your case "data" should be either "true" or "false"
});

You can pass other parameters as well (see docs). To fadeIn the correct div just check for the "data" parameter of the success function.

Hope this answers your question

How To POST to a PHP file using jQuery

3 Answers3