I cannot understand why my JQuery is not working. The data is updated fine to the database, but instead of getting a message in the span, I get to a new page where it is says "Insert Succesfull". Can anybody see what is wrong?
Please look away from the oldschool connection etc :-)
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/my_script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css\placing.css">
<title>Numbers</title>
</head>
<body>
<div class="topbar">
sf
</div>
<div class="talraekke">
<p>test</p>
</div>
<div class="content">
<p>Enter The Number</p>
<form id="myForm" action="userInfo.php" method="post">
<input type="value" name="numbervalue">
<button id="sub">Save</button>
</form>
<span id="result"></span>
</div>
PHP:
<?php
include('connection.php');
// Insert To Database
$strSQL = "INSERT INTO numbertable(numbers) VALUES('" . $_POST["numbervalue"] . "')";
if(mysql_query("INSERT INTO numbertable VALUES('numbers')"))
echo "Insert Succesfull";
else
echo "Failed";
// The SQL statement is executed
mysql_query($strSQL) or die (mysql_error());
// Close the database connection
mysql_close();
?>
JS:
$("#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('');
});
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css\placing.css">
<title>Numbers</title>
</head>
<body>
<div class="topbar">
sf
</div>
<div class="talraekke">
<p>test</p>
</div>
<div class="content">
<p>Enter The Number</p>
<form id="myForm" action="userInfo.php" method="post">
<input type="value" name="numbervalue">
<button id="sub">Save</button>
</form>
<span id="result"></span>
</div>
<script src="js/my_script.js" type="text/javascript"></script>
<script>
function clearInput() {
$("#myForm :input").each( function() {
$(this).val('');
});
}
$(document).ready(function(){
//you can put here the function that Philip wrote
$("#sub").click( function(e) { // note the 'e'
e.preventDefault(); // remove default action(submitting the form)
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
})
</script>
</body>
Try this:
$("#sub").click( function(e) { // note the 'e'
e.preventDefault(); // remove default action(submitting the form)
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});