PHP MySQL Ajax Update record

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

将您的函数绑定到$(document).ready()函数中

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