Inserting in to MySQL database using AJAX + PHP

Question

I am trying to insert data from form to database without refreshing page, my HTML page looks like this:

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

    <body>
        <form name="form1" method="post" action="">Enter Name
            <input type="text" name="t1" id="t1">
            </td>
            <br>Enter City
            <input type="text" name="t2" id="t2">
            </td>
            <br>
            <input type="button" name="button1" value="Insert to DB" onClick="aa()">
        </form>
        <div id="d1"></div>
        <script type="text/javascript">
            function aa() {
                var xmlhttp = new XMLhttpRequest();
                xmlhttp.open("GET", "insert.php?name=" + document.getElementById("t1").value + "&city" + document.getElementById("t2").value, false);
                xmlhttp.send(null);

                document.getElementById("d1").innerHTML = xmlhttp.responseText;;
            }
        </script>
    </body>
</html>

and my insert.php looks like:

<?php
    $name = $_GET["name"];
    $city = $_GET["city"];

    mysql_connect("localhost","root", "");
    mysql_select_db("dwh");
    mysql_query("insert into table1 values('$name','$city')");
    echo "Record inserted";
?>

In my opinion this should send PHP all data in "get" and php should just take it and insert it. Somehow it's not. Maybe i miss something, can you help me to find a problem?

browser console say:

(index):16 Uncaught ReferenceError: XMLhttpRequest is not defined(index):16 aa(index):9 onclick

Thank you a lot.

p.s. I understand my MYSQL connect is security risk, this was created just to test how to make it work.

The inclusion of jQuery here seems moot as you don't use it at all. — Rory McCrossan
– Rory McCrossan, Commented Jan 22, 2015 at 15:52
Please, please, stop using the mysql extension, it's depreacted, and has been for some time. Read the red warning on the man, and click the links. Learn to use (and love) PDO and/or mysqli (the i is for improved). Those are the replacement extensions — Elias Van Ootegem
– Elias Van Ootegem, Commented Jan 22, 2015 at 15:53
Fred, remove post didn't help :( , Elias yea i will definitly use PDO, this was made just for test (i also need to escape values) — Andurit
– Andurit, Commented Jan 22, 2015 at 15:54
Look at your browser's developer tools. Look at the JavaScript console. Does it report any errors? Look at the Net tab. Is the request being made? Does it get a response? Do they contain the data you expect? — Quentin
– Quentin, Commented Jan 22, 2015 at 15:56

Quentin · Accepted Answer · 2015-01-22 16:03:45Z

1

(index):16 Uncaught ReferenceError: XMLhttpRequest is not defined(index):16 aa(index):9 onclick

JavaScript is case sensitive. The function is XMLHttpRequest (with a capital H).

answered Jan 22, 2015 at 16:03

community wiki

Quentin

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

1 Comment

Funk Forty Niner Over a year ago

I'm wondering why on earth did they decide to make it case-sensitive lol it's kind of silly if you think of it. Variables I can understand, but functions?

Paul Lo · Accepted Answer · 2015-01-22 16:00:01Z

0

Try include the column names of tables, ex:

insert into table1 (column1, column2) values('$name','$city')

in addition, use another variable to check if your query execute successfully or not:

$result = mysql_query("insert into table1 (column1, column2) values('$name','$city')");
if (!$result) {
    die('Invalid query: ' . mysql_error());
}

answered Jan 22, 2015 at 16:00

Paul Lo

6,1466 gold badges33 silver badges37 bronze badges

3 Comments

Ivan Yonkov Over a year ago

the columns are not needed to be specified if you keep their order in values

Funk Forty Niner Over a year ago

That shouldn't really matter. It's good practice, but the data should automatically populate themselves.

Funk Forty Niner Over a year ago

You're welcome Paul. It is good practice though and I for one always use the columns to match. Cheers

Funk Forty Niner · Accepted Answer · 2015-01-22 16:02:47Z

0

You're missing an equal sign following the word "city" in &city and is required when you build the query string:

xmlhttp.open("GET", "insert.php?name=" + document.getElementById("t1").value + "&city" + document.getElementById("t2").value, false);

should be

xmlhttp.open("GET", "insert.php?name=" + document.getElementById("t1").value + "&city=" + document.getElementById("t2").value, false);

edited Jan 22, 2015 at 16:02

Funk Forty Niner

74.2k14 gold badges71 silver badges146 bronze badges

answered Jan 22, 2015 at 15:58

James Waddington

2,9252 gold badges17 silver badges24 bronze badges

1 Comment

Andurit Over a year ago

Thank you James, this was correct point ( I think already mentioned by Fred ), unfortunately don't fix my problem

Prerak Sola · Accepted Answer · 2015-01-22 16:08:12Z

0

There are two things that you need to fix:

In line var xmlhttp = new XMLhttpRequest(); it should be var xmlhttp = new XMLHttpRequest(); with a capital H.
You need to give id to <input> as you are appending the value by getElementById(). Currently there are no elements for the id that you have passed.

answered Jan 22, 2015 at 16:08

Prerak Sola

10.1k8 gold badges39 silver badges77 bronze badges

Collectives™ on Stack Overflow

Inserting in to MySQL database using AJAX + PHP

4 Answers 4

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related