How to submit a form via Ajax using PHP - php

Question

I'm a complete Ajax newbie.
My non-ajax form currently looks like this:
<form id='myform' action=".htmlspecialchars($_SERVER["PHP_SELF"])." method='post''/>
<input type='hidden' name='id' value='$id' />
<td>
<input style='height:18px' type='date' name='date' value='$date' required/>
</td>
<td>
<select name='status' form='myform' required/>
<option>$status</option>
<option value='status_one'>status_one</option>
</select>
</td>
<td>
<input form='myform' type='text' name='memo' value='$memo'/>
</td>
<td>
<input form='myform' type='submit' value='Save' />
</form>
</td>
As the data is posted to the same page, the following code retrieves it upon submission:
if ($_SERVER["REQUEST_METHOD"] == "POST") {
//do stuff
}
This works fine, except that I want to be able to submit without refreshing the page, so the form info is submitted in the background. I know Ajax is the way to go here and I read lots about it, but I'm having trouble getting it to work. I'm unsure if the Ajax script is supposed to replace the retrieve part or it works in conjunction.
Much appreciated.

Answer 1

Use jQuery $.post
<script>
$(function(){
$("#submit").click(function()
{
var form = $("#myform").serialize();
$.post('url.php', form, function(data){
alert(data);
});
});
});
</script>
Note: You need to ID the submit button properly.

Answer 2

AJAX replaces the functionality of the submit button with other code that you have in javascript. #getvivekv's solution will work fine for you on that side.
The PHP server side will be easier to do if you separate it into a different script (or else put your ajax handling at the very top and exit; afterwards.)
You will fine life a lot less frustrating if you read through a good tutorial or another one before banging your head too hard against a new type of technology.
If you are doing AJAX for the first time I would actually recommend doing it in plain vanilla javascript so you know how to do it - then when you've got that figured out then see how it works in jquery.

Answer 3

Here's a quick example of how you could do this with keeping it all in one file using Ajax:
First, in the top of your page, add the logic that handles your form data:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// output for example
echo $_POST['id'] . "<br>";
echo $_POST['date'] . "<br>";
echo $_POST['status'] . "<br>";
echo $_POST['memo'] . "<br>";
//do stuff
}
?>
Following that you can add your ajax script:
<!-- remove jQuery if already included -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#myform').submit(function() {
$.ajax({
type:'POST',
url:'<?php echo $_SERVER["PHP_SELF"]; ?>',
data: $(this).serialize(),
success: function(data) {
$('#ajax-result').html(data);
}
});
return false;
});
});
</script>
The return false; will prevent the default form submission.
The .serialize() method creates a text string in standard
URL-encoded notation containing your form data.
The .html() method in the success: callback will return the
data to the specified element once processed by your script.
Then, add your form below that:
<?php if (empty($_POST)): ?>
<form id='myform' action="<?php echo $_SERVER["PHP_SELF"]; ?>" method='post'/>
<input type='hidden' name='id' value='$id' />
<td>
<input style='height:18px' type='date' name='date' value='$date' required/>
</td>
<td>
<select name='status' form='myform' required/>
<option>Option 1</option>
<option>Option 2</option>
</select>
</td>
<td>
<input form='myform' type='text' name='memo' value='$memo'/>
</td>
<td>
<input form='myform' name="submit" type='submit' value='Save' />
</form>
</td>
<?php endif; ?>
<!-- This is the div in which your data will be returned. -->
<div id="ajax-result"></div>
Just a note that there are various ways that this I would definitely encourage you to check out the tutorials mentioned here.