Passing data between jQuery and PHP

PHP and HTML and CSS

Here is a basic example of passing form data to a PHP file via jQuery and then passing data back to jQuery from the PHP file.

1. Lets start by creating a basic form. You will notice I have noted out the normal submit input, because I prefer using hyperlinks for easier CSS styling, and since the hyperlink has to activate the javascript I have left the URL link empty.

<form id="form" name="form" method="post" action="">
    <input name="value" type="text" size="10" maxlength="10" />

    <!-- <input name="submit" type="submit" value="submit" /> -->

    <a href="" title="submit_button" class="submit" >Submit the form</a>
</form>

2. Next is the javascript which includes jQuery. The code is adding an event to detect when the submit hyperlink (with the title "submit_button") has been pressed.

<script type="text/javascript" src="js/jquery-latest.min.js"></script>

<script type="text/javascript">
    $(document).ready( function(){

        // Detect if hyperlink has been clicked //
        $("a[title=submit_button]").click( function(){

            // Pass the form values to the php file 
            $.post('pass_value.php', $("#form").serialize(), function(ret){

                // Detect if values have been passed back   
                if(ret!=""){
                // alert windows shows the returned value from php
                alert("Value passed back from the php file... " + ret);
                }

            });

        // Important stops the page refreshing
        return false;

        }); 
    });
</script>

3. Finally the external PHP script returns the posted value back to the jQuery function.

<?php
// Detect if the posted value is not empty
if (!empty($_POST['value']))
{
    echo $_POST['value'];
}
?>

Here is the html form page in full.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pass form value to php with jquery/ajax</title>

<script type="text/javascript" src="js/jquery-latest.min.js"></script>

<script type="text/javascript">
    $(document).ready( function(){

        // Detect if hyperlink has been clicked //
        $("a[title=submit_button]").click( function(){

            // Pass the form values to the php file 
            $.post('pass_value.php', $("#form").serialize(), function(ret){

                // Detect if values have been passed back   
                if(ret!=""){
                // alert windows shows the returned value from the php
                alert("Value passed back from the php file... " + ret);
                }

            });

        // Important stops the page refreshing
        return false;

        }); 
    });
</script>
</head>

<body>

<form id="form" name="form" method="post" action="">
    <input name="value" type="text" size="10" />

    <!-- <input name="submit" type="submit" value="submit" /> -->
 <br />
    <a href="" title="submit_button" class="submit" >Submit the form</a>
</form>

</body>
</html>