Getting jquery and php work together with forms?

Question

So i have a simple 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

Welcome to stackoverflow, could you please try to explain your question a little better, post some code samples maybe? I'm having a hard time understanding your actual problem. — Alex Bailey, Mar 20 '11 at 23:27
Hey Alex, i clarified my question a bit more. Im asking kind of a general question in which clicking the submit button on a form refreshes the page and prevents my javascript animation from implementing. — Ben, Mar 20 '11 at 23:34

score 1 · Answer 1 · answered Mar 20 '11 at 23:37

1

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.

answered Mar 20 '11 at 23:37

SimplyZ

898
2
9
22

score 1 · Answer 2 · answered Mar 21 '11 at 00:17

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,

Getting jquery and php work together with forms?

2 Answers2

Content of index.php

Content of search.php

Linked