9

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 way I want them to.

I have a very simple form, containing a textbox, label and a submit button. When the user enters something into the form, then clicks submit, I would like to use php and ajax (with jquery) to insert the result of the form into a mysql database.

Can someone please show me how this can be achieved? Just something very basic is all i'm after to get me started. Any help is appreciated.

Thank you

2 Answers2

20

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.

Simon H
  • 1,735
  • 12
  • 14
4

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"]));
mario
  • 144,265
  • 20
  • 237
  • 291
  • Are you serious? That's just as easy as inserting the normal way. Thanks! :-D –  Feb 28 '11 at 14:32
  • @Lucifier: Yes. jQuery transforms it into an ordinary POST request. That's why everybody likes it. – mario Feb 28 '11 at 14:33
  • @Lucifier i believe PDO support is >= php 5.1.0 make sure your server supports it. – KJYe.Name Feb 28 '11 at 14:41
  • @kjy112: It's available as PECL module since 5.0 and there is also a PDO emulation for PHP4 (and PHP5.0). See http://xpdo.org/ or upgradephp – mario Feb 28 '11 at 14:43
  • 1
    It's cool, I just used the mysql thingy I already had on another page ;) :) –  Mar 01 '11 at 22:42
  • Concerning the post-part of this example, is there a technical difference to a regular form submit? I can't see any difference. – user2757572 Nov 16 '13 at 09:06