Insert Data into database with HTML, PHP, AJAX

Question

I have a HTML form with action to a PHP file (insert.php). This PHP file is inserting my form values into the database (MySQL).

HTML

<form method="post" id="myForm" action="insert.php">
First Name:<input type="text" name="Fname" id="Fname" maxlength="12" size="12"/> <br/>
Mark1:<input type="text" name="Mark1" id="Mark1" maxlength="12" size="12"/> <br/>
<p><input type="submit" id="myButton" value="Submit" /></p>
</form>
<div id="someElement">Response is Here:</div>

the insert.php file is -->

<?php
$con=mysqli_connect("localhost","root","root","student");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$sql="INSERT INTO student_details (full_name, mark1) VALUES ('$_POST[Fname]', '$_POST[Mark1]')";

if (!mysqli_query($con,$sql))
  {
  die('Error: ' . mysqli_error($con));
  }
echo "1 record added";

mysqli_close($con);
?>

There is no problem in data insertion with the above scenario.

I tried the same to do with AJAX and I don't see any result

my Ajax code -->

<script type="text/javascript">

$(document).ready(function(){ 
    $("#myButton").click(function() { 
    alert("am in the function now");
        $.ajax({
        cache: false,
        type: 'POST',
        url: 'insert.php',
        data: $("#myForm").serialize(),
        success: function(d) {
            $("#someElement").html(d);
        }
        });
    }); 
});

</script>

Kindly help me out where I am missing the logic. I am guessing that I am missing something basic somewhere. It's been almost two days of time on this. Thanks in advance.

either split variables from a string `"...".$_POST[Fname]."..."` or use curly brackets around them `"...{$_POST[Fname]}..."` otherwise they wont evaluate — Waygood, Apr 30 '13 at 07:36
1. Use `var_dump($_POST)` to debug; 2. By stuffing everything into SQL query, you missed the point of using MySQLi. Use prepared statement and variable binding. — Passerby, Apr 30 '13 at 07:37
@Paw Cabelin: no I am not getting that "alert". I intentionally used that alert to see whether am entering that function. — Lohith Korupolu, Apr 30 '13 at 07:48
that means you havent had any connection with your script yet. pls recheck your inclusions like **paths, filenames, variables, ids** — Þaw, Apr 30 '13 at 07:57
@user1397891 please replace your `` to `` you shouldnt use **Submit** since you're using AJAX you may also want remove that `action=''` in your **form tag** — Þaw, Apr 30 '13 at 07:59
@PawCabelin: yes I did change type to button and removed the action in form. Connection with script.. I made sure everything's in place... not sure where the problem is... :( — Lohith Korupolu, Apr 30 '13 at 08:03
@PawCabelin : dude I got the problem place.... It's the problem with inheriting JQUERY... I used version 1.6.4 till now which gave me this nonsense stuff. I changed it to 1.9 and it's working like magic. — Lohith Korupolu, Apr 30 '13 at 08:07
still didnt get the alert? what browser are you using? better if you're using **chrome** you could use **inspect element** check the **Console** tab. usually it reports common errors — Þaw, Apr 30 '13 at 08:07

score 1 · Answer 1 · answered Apr 30 '13 at 07:38

1

you should prevent default submit form action

$("#myButton").click(function(e) {
e.preventDefault();
...

answered Apr 30 '13 at 07:38

Amir

4,089
4
16
28

fix the PHP too and you'll have a complete answer that can be accepted – Waygood Apr 30 '13 at 07:40
read the comments. `mysqli_prepare()` the SQL as it wont currently work with arrays in quotes – Waygood Apr 30 '13 at 08:28
@Waygood, it was not the problem, OP says `I used version 1.6.4 till now which gave me this nonsense stuff. I changed it to 1.9 and it's working like magic.` – Amir Apr 30 '13 at 08:36

score 1 · Answer 2 · answered Apr 30 '13 at 07:48

You should change

<input type="button" id="myButton" value="Submit" />
Also change <form method="post" id="myForm" action="">
You should also check using print_r() for checking $_POST array.
And try to echo $sql exit; your Query and run in PhpMyadmin for fixing values.
Most important you should use mysql_real_escape_string for sanitize data and security.

score 0 · Answer 3 · answered Apr 30 '13 at 07:40

0

If I may suggest, use PHP5 PDO for working with databases.

[1]: http://php.net/manual/en/book.pdo.php php.net pdo

answered Apr 30 '13 at 07:40

SuperManSL

1,306
2
12
17

2

It's not an answer. Should be comment. – Rikesh Apr 30 '13 at 07:41

score 0 · Answer 4 · edited May 23 '17 at 11:49

0

I guess you are missing quotes around index in $_POST array. Even though it worked in some cases, it may create problem.

Please have a look at these:

Is it okay to use array[key] in PHP?

http://fr2.php.net/manual/en/language.types.array.php#language.types.array.foo-bar

edited May 23 '17 at 11:49

Community

1
1

answered Apr 30 '13 at 07:48

Kalpesh Patel

2,772
2
25
52

score 0 · Answer 5 · answered Apr 30 '13 at 08:48

Your problem could be with your sql query. I don't know how did it work without ajax but your should put the index position of $_POST array in single quotes. such as $_POST['name']; Better approach would be, storing them in variables and use these variables instead.

Also change $("#button").click to $("#button").event("click", function(){.....}).

Insert Data into database with HTML, PHP, AJAX

5 Answers5