Using jQuery to insert data into a MySQL table

Question

I'm trying to get this to work, but I am having issues. What am I missing here?

I'm trying to insert some data via jQuery to a local MySQL table. If I run save.php on its own, it inserts a blank row in the DB, so that works. Any ideas?

**index.php**

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css" />

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

        <script type="text/javascript">
            $(document).ready(function() {
                $('form#submit').submit(function () {
                    var nume = $('#nume').val();
                    $.ajax({
                        type: "POST",
                        url: "save.php",
                        data: "nume="+ nume,
                        success: function() {
                            $('#nume').val('');
                        }
                    });
                return false;
                });
            });
        </script>
    </head>

    <body>

        <form id="submit" method="post">
            <p>Nume: <input id="nume" name="nume"  type="text"></p>
            <p><input id="submitButton" type="button" value="Submit"></p>
        </form>

    </body>
</html>


**save.php**

<?php
    mysql_connect('localhost', 'root', 'root') or die(mysql_error());
    mysql_select_db("test") or die(mysql_error());

    $nume = htmlspecialchars(trim($_POST['nume']));

    $add = "INSERT INTO ajax_test (nume) VALUES ('$nume')";
    mysql_query($add) or die(mysql_error());
?>

I'd recommend changing your editor's prefs to use a 4-space indent. — BalusC
– BalusC, Commented Nov 18, 2009 at 23:07
I know this is just test code, but make sure in your finished code you escape $nume with mysql_real_escape_string() or you will have a SQL injection vulnerability. — mcrumley
– mcrumley, Commented Nov 18, 2009 at 23:25

Scott Saunders · Accepted Answer · 2009-11-18 22:52:15Z

4

Are you sure the form is submitting? Your button is not an input type="submit" - it's just a button. It won't submit the form on its own.

edited Nov 18, 2009 at 22:52

answered Nov 18, 2009 at 22:30

Scott Saunders

30.5k14 gold badges60 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Norbert Over a year ago

I changed it back it to type="submit", and now the page reloads, but it shouldn't.

Scott Saunders Over a year ago

Try adding a space in $('form #submit')

andyface Over a year ago

if you use preventDefault(); you should be able to stop it reloading. use like this: $('form#submit').submit(function (e) { e.preventDefault(); [rest of your code] });

Scott Saunders Over a year ago

Returning false from the submit function should prevent the page reload as well (the form is submitting to the same page since no action is set in the form tag). But it seems that the submit function is not being set on the form because the jQuery selector is not correct. It needs to be $('form #submit')

powtac · Accepted Answer · 2009-11-18 22:44:13Z

1

If the solution of Scott Saunders does not work try this:

instead of

url: "save.php",

try:

url: "save.php?nume=testvalue",

If that also does not work, check if your PHP script reads the input value out of $_GET['nume'] or $_POST instead of $_REQUEST['nume']

edited Nov 18, 2009 at 22:44

answered Nov 18, 2009 at 22:36

powtac

41.1k28 gold badges120 silver badges173 bronze badges

2 Comments

powtac Over a year ago

Change $_POST['nume'] in your save.php into $_REQUEST['nume'] and call save.php?nume=testvalue in your browser then check if this value appears in the DB.

Norbert Over a year ago

I don't know what I did, but now it seems to be working. And the save.php is still set to $_POST.

andyface · Accepted Answer · 2009-11-18 23:05:47Z

1

couple of things you could do to help with troubleshooting.

Stick an alert alert("submit"); in after the $('form#submit').submit(function () { to see if the form is submitting. Also stick one in the success alert("success"); to see if you're getting a callback. This will show you at what stage it's failing and help you liit your search.

You can also use the firebug plugin for firefox to see what's being sent via ajax, if it's working, to see if you've got any values wrong. Think you need to tick Show XMLHttpRequests in Console

answered Nov 18, 2009 at 23:05

andyface

9461 gold badge9 silver badges26 bronze badges

Collectives™ on Stack Overflow

Using jQuery to insert data into a MySQL table

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related