CODEWITHSUNDEEP
phpjavascriptmysqlajax
BoxyGILLETT
BoxyGILLETT

Reputation: 25

using ajax to process a form

I have here a page in which I am trying to update a users email now the div refreshes on submit like it is ment to but it is not updating the database and I ain't for the life of me know why.

My layout is one page click a menu link and it loads the page into the content div (below does) now I am wanting to post a form and it reload in that div and update the mysql database but for some reason it don't want to update the database.

Anyone got any suggestions into why it's not updating the database? have i made a small error somewhere in the php or is it due to my page set up on loading this way?

Thanks in advance. :)

<?php
session_start();
include_once("./src/connect.php");
include_once("./src/functions.php");

//Update email
if (isset($_POST['update'])){
$email = makesafe($_POST['email']);

$result = mysql_query("UPDATE Accounts SET email='$email' WHERE `id`= '{$fetchAccount['id']}'") 
or die(mysql_error());

echo "<font color='lime'>Updated.</font>";

}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<link rel="stylesheet" href="./static/css/LoggedIn/Index.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function($) {

$("#Submit").click(function() {

var url = "Profile.php"; // the script where you handle the form input.

$.ajax({
   type: "POST",
   url: url,
   data: $("#myForm").serialize(), // serializes the form's elements.
   success: function(html){ $("#right").html(html); }
 });

return false; // avoid to execute the actual submit of the form.
});
 });
</script>
</head>

<body>

<div id="right">

<form method="post" action="Profile.php" id="myForm">
 E-mail: <input type="text" value="<?=$fetchAccount['email']?>" name="email"><br>
<input type="submit" value="Edit" name="update" id="Submit">
 </form>

</div>

</body>
</html>

Upvotes: 0

Views: 129

Answers (1)

Lawrence Cherone
Lawrence Cherone

Reputation: 46602

Heres some changes, read code comments, though the main thing wrong with your code is ajax will get the whole page not just echo "<font color='lime'>Updated.</font>"; part.

<?php
session_start();
include_once("./src/connect.php");
include_once("./src/functions.php");

//Update email only if request is from ajax request
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'){
    //check its POST, and email is real, then do update or exit a error message back
    if($_SERVER['REQUEST_METHOD']=='POST' && !empty($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){

        header('Content-Type: text/html');
        //check its an email
        if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
            exit('<span style="color:red;">Invalid email.</span>');
        }

        //Do update
        mysql_query("UPDATE Accounts
                     SET email='".mysql_real_escape_string($_POST['email'])."' 
                     WHERE id= ".mysql_real_escape_string($fetchAccount['id'])) or die('<span style="color:red;">Error updating email. '.mysql_error().'</span>');


        exit('<span style="color:lime;">Updated.</span>');
    }
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<link rel="stylesheet" href="./static/css/LoggedIn/Index.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/></script>
<script type="text/javascript">
$(function(){
    $("#Submit").click(function(e) {
        $.ajax({
            type: "POST",
            url: "Profile.php",
            data: $("#myForm").serialize(), // serializes the form's elements.
            success: function(html){ $("#right").html(html); }
        });
        e.preventDefault();
    });
});
</script>
</head>

<body>

<div id="right">
    <form method="post" action="Profile.php" id="myForm">
        E-mail: <input type="text" value="<?=htmlspecialchars($fetchAccount['email'])?>" name="email"/><br/>
        <input type="submit" value="Edit" name="update" id="Submit"/>
    </form>
</div>

</body>
</html>

Hope it helps

Upvotes: 1

Related Questions