I have seen many tutorials, but they\'re so confusing, and to do what I want to do, I just don\'t get how to use existing stuff from those tutorials and make them work they
The jQuery part is often quite simple. It just redirects the ordinary form action= over a Javascript handler. $.post
is easy to use and you just need .serialize()
to package up the existing form values into a string:
<form id="example">
<input name="textbox" ...>
<input type=submit name="submitbuttonname" value="submit"
onClick="$.post('save.php', $('form#example').serialize())">
And on PHP side you simply receive the content via $_POST
and save it to the database (using the old mysql_ functions would also be possible, just more cumbersome):
$db = new PDO("mysql:...");
if ($_POST["submitbuttonname"]) {
$q = $db->prepare("INSERT INTO save (textbox, label) VALUES (?, ?)";
$q->execute(array($_POST["textbox"], $_POST["label"]));
Hi here is just a quick example of how one might do it:
The HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Quick JQuery Ajax Request</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- include the jquery lib -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var ajaxSubmit = function(formEl) {
// fetch where we want to submit the form to
var url = $(formEl).attr('action');
// fetch the data for the form
var data = $(formEl).serializeArray();
// setup the ajax request
$.ajax({
url: url,
data: data,
dataType: 'json',
success: function() {
if(rsp.success) {
alert('form has been posted successfully');
}
}
});
// return false so the form does not actually
// submit to the page
return false;
}
</script>
</head>
<body>
<form method="post" action="process.php"
onSubmit="return ajaxSubmit(this);">
Value: <input type="text" name="my_value" />
<input type="submit" name="form_submit" value="Go" />
</form>
</body>
</html>
The process.php script:
<?php
function post($key) {
if (isset($_POST[$key]))
return $_POST[$key];
return false;
}
// setup the database connect
$cxn = mysql_connect('localhost', 'username_goes_here', 'password_goes_here');
if (!$cxn)
exit;
mysql_select_db('your_database_name', $cxn);
// check if we can get hold of the form field
if (!post('my_value'))
exit;
// let make sure we escape the data
$val = mysql_real_escape_string(post('my_value'), $cxn);
// lets setup our insert query
$sql = sprintf("INSERT INTO %s (column_name_goes_here) VALUES '%s';",
'table_name_goes_here',
$val
);
// lets run our query
$result = mysql_query($sql, $cxn);
// setup our response "object"
$resp = new stdClass();
$resp->success = false;
if($result) {
$resp->success = true;
}
print json_encode($resp);
?>
Please note that none of this has been tested. I hope it helps you thou.