Getting jquery and php work together with forms?
So i have a s开发者_运维问答imple question, but i cant find the answer to it.
I have a form in which a user types something into the textfield and clicks the submit button with the value "Add". There will be list to the right and every time the user clicks add, there will be element added to the list on the right with a fade in animation.
I'm using php to make it so that every time the user clicks add, it queries the databse and finds what the user is looking for. And if it isnt in the database, then insert it into the database.
I'm using javascript/jquery to have the fade in animation when the user clicks "Add".
I know how to do these things individually, but when i click the Add button (the submit button), the entire page refreshes, php works fine, but there was no animation.
I try using preventDefault() on jquery, and the animation works fine, but the php code didnt register? How would i make it so that the php and javascript dont cut each other off? Does this have anything to do with ajax? Thanks
You need to use the jquery Ajax functions. These are especially made so that you can call php scripts without page refresh.
Click Here for the official documentation on Ajax post functions, and how to use them.
Here is an example that I came up with. Hopefully that can be helpful to you.
Content of index.php
This is where your form is and where added items will be displayed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
jQuery(function($) {
// Declare DOM elements for quick access
var itemsList = $('#items-list'),
searchInput = $('#search-input');
// click event handler for the 'Add' button
$('#add-btn').click(function(e) {
// Prevent the form from being sent
e.preventDefault();
var searchValue = searchInput.val();
// Send the AJAX request with the search parameter
$.post('search.php', {
search: searchValue
},
function(data, textStatus) {
// data is returned as a json object
if (data.found) {
// Create a new hidden element into the list
// and make it fade in
$('<p class="item">'+searchValue+'</p>').hide()
.appendTo(itemsList)
.fadeIn();
}
}, 'json'
});
});
});
//-->
</script>
</head>
<body>
<form action="index.php" method="post" id="search-form">
<div>
<input type="text" name="search" id="search-input">
<input type="submit" id="add-btn" value="Add">
<div id="items-list"></div>
</div>
</form>
</body>
</html>
Content of search.php
<?php
// AJAX Request?
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
// Prepare the reponse
$response = array('found' => FALSE);
// Check that the search parameter was provided
$search = filter_input(INPUT_POST, 'search', FILTER_SANITIZE_STRING);
if (!empty($search)) {
// Note: We'll assume a connection to a MySQL database
// with the following constant already declared
$mysqli = new mysqli(DB_HOSTNAME, DB_USERNAME, DB_PASSWORD, DB_NAME);
// Make sure that the connection was successful
if (!$mysqli->connect_error) {
$query = "SELECT id, keyword FROM search_table WHERE keyword = ?";
// Check if the search keyword already exists
$stmt = $mysqli->prepare($query);
$stmt->bind_param('s', $search);
$stmt->execute();
// Create a new entry if not found
if (0 == $stmt->num_rows()) {
$query = "INSERT INTO search_table(keyword) VALUES(?)";
$stmt = $mysqli->prepare($query);
$stmt->bind_param('s', $search);
$response['found'] = $stmt->execute();
}
else {
$response['found'] = TRUE;
}
}
}
echo json_encode($response);
}
This is not tested so let me know if you encounter any issues.
Cheers,
加载中,请稍侯......
精彩评论