I am developing simple program in html which inserts the data into MySQL DB using php script. But every time I press Save button it redirects me to php page. I have created Javascript file but its not working for me. Please help
HTML FILE (index.html)
<html>
<head>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/my_script.js" type="text/javascript"></script>
</head>
<body>
<form id="myForm" action="demo_insert.php" method="post">
Name : <input type="text" name="name"><br />
Email : <input type="text" name="email"><br />
Domain : <input type="text" name="domain"><br />
Role : <input type="text" name="role"><br />
<button id="sub">Save</button>
</form>
<span id="result"></span>
</body>
</html>
php file
<?php
$conn = mysql_connect('localhost', 'root', '');
$db = mysql_select_db('test');
$name=$_POST['name'];
$domain=$_POST['domain'];
$email=$_POST['email'];
$role=$_POST['role'];
$sql = "INSERT INTO user20015 VALUES ('$name', '$domain', '$email', '$role')";
if(mysql_query($sql))
echo "Successfully Inserted";
else
echo "Insertion Failed";
?>
my_script.js File
$("#sub").click( function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
$("#myForm").submit( function() {
return false;
});
function clearInput() {
$("#myForm :input").each( function() {
$(this).val('');
});
}
Replace
$("#myForm :input").serializeArray(),
with
$("#myForm").serializeArray(),
As this method "Encode a set of form elements as an array of names and values."
$("#myForm").submit( function(e) {
/* prevent default form submission */
e.preventDefault();
var form = $(this);
$.post(form.attr("action"), form.serializeArray(), function(info){
$("#result").html(info);
/* reset form fields to defaults */
form.reset();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myForm" action="demo_insert.php" method="post">
Name : <input type="text" name="name"><br />
Email : <input type="text" name="email"><br />
Domain : <input type="text" name="domain"><br />
Role : <input type="text" name="role"><br />
<button type="submit" id="sub">Save</button>
</form>
<span id="result"></span></div>
I guess it's because $("#myForm").attr("action") returns a relative URL. Please try with $("#myForm").prop("action"). And do never include two jQuery libs. Remove the old one. Could cause other problems.
//edit: You need a document ready function in your js file. Replace the content with this:
$( document ).ready(function() {
$("#sub").click( function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
$("#myForm").submit( function() {
return false;
});
});
function clearInput() {
$("#myForm :input").each( function() {
$(this).val('');
});
}
First of all...
$name=$_POST['name'];
$domain=$_POST['domain'];
$email=$_POST['email'];
$role=$_POST['role'];
$sql = "INSERT INTO user20015 VALUES ('$name', '$domain', '$email', '$role')";
if(mysql_query($sql))
SQL injection detected. Please remove this, using PDO for example, in order to bind parameters and avoiding one of the biggest mistake ever.
For your issue, try to bind events on the document.
$(document).on('submit', '#myForm', function() { return false; });
That's a better practice, and avoid some "bind on not loaded html" issues, that may be yours here.
You may do as well for the click event:
$(document).on('click', '#sub', function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
TRy this:
$(function(){//dom has loaded
$("button#sub").click( function(e) {
e.preventDefault(); /// prevent the default click event
$.post( $("#myForm").attr("action"),
$("#myForm").serializeArray(),
function(info){ $("#result").html(info);
clearInput();//clear the data AFTER the ajax was triggered
});
});
function clearInput() {
$("#myForm input").each( function() {
$(this).val('');
});
}
});