PHP MySQL Ajax Update record - php

Question

I'm doing a simple ajax update record.
Here's my code
index.php:
<script type="text/javascript">
$("#submit_button").click( function() {
$.post( $("#updateprofile").attr("action"),
$("#updateprofile :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
$("#updateprofile").submit( function() {
return false;
});
function clearInput() {
$("#updateprofile :input").each( function() {
$(this).val('');
});
}
</script>
<form class="form" id="updateprofile" action="edit-profile.php" method="POST">
<!-- form-horizontal -->
<div class="control-group">
<label class="control-label" for="inputName">Name</label>
<div class="controls">
<input type="text" class="input-block-level" name="fname"
value="<?php echo $fname; ?>">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="text" class="input-block-level"
value="<?php echo $password; ?>" name="password" >
<input type="hidden" name="id"
value="<?php echo $user; ?>" >
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-custom" type="submit" id="submit_button">Update</button>
<button class="btn btn-custom" type="reset" >Cancel</button>
</div>
</div>
</form>
<span id="result"></span>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
edit-profile.php:
<?php
include('../../db.php');
if( isset($_POST['id']) || isset($_POST['fname']) || isset($_POST['password']) ){
$id = $_POST['id'];
$fname = $_POST['fname'];
$password = $_POST['password'];
$update = $conn->prepare("UPDATE tblusers
SET fname = :fname,
password = :password
WHERE user_id = :id");
$update->execute(array(':fname' => $fname,
':password' => $password,
':id' => $id));
echo 'Successfully updated record!';
} else {
echo 'Required field/s is missing';
}
?>
But I'm not getting the update without refreshing the page or going to other page. Any ideas? Help is much appreciated. Thanks.

Answer 1

Try this, You have missed add ready handler and Added e.preventDefault(); When you trigger the submit button, it uses the default form action page
$(function(){
console.log("Jquery Loaded!!"); // alert("jquery loaded!");
$("#submit_button").click( function(e) {
e.preventDefault();
$.post( $("#updateprofile").attr("action"),
$("#updateprofile :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
});
Use Lateset version of jquery library.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 2

Bind your functions in $(document).ready() function

Answer 3

Your form is being submitted because your $("#submit_button") if of type submit, which means that when your ajax executes (it executes ok) but your form is also submitted.
To stop form from being submitted, you can add
<form onSubmit="return false;">
To your HTML. Or you can also use:
<form onSubmit="return func();">
If func() returns false, form will not be submitted.

Answer 4

First add you script file for including jQuery in starting and put the functions as stated below
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit_button").click( function() {
$.post( $("#updateprofile").attr("action"), $("#updateprofile :input").serializeArray(),function(info){
$("#result").html(info);
});
clearInput();
});
$("#updateprofile").submit( function() {
return false;
});
});
function clearInput() {
$("#updateprofile :input").each( function() {
$(this).val('');
});
}
</script>
and you are sorted