使用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.

Answer 1

you should prevent default submit form action

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