Hello, thanks for reading my thread. I'm still new to web development so I appreciate your help in advance. Here is the issue I am having:
In my project, I have a index.php page with a sidebar menu and a div id called “content”.The user can select different menu items and perform searches from the database and make updates to their account. I’m using ajax to load all of the menu items and all of the forms into the div id "content" on the index page. The Forms all load into the target div as they are suppose to with ajax.
However, on the mysettings page I have two forms and two different buttons, one called save and the other called update. When a user wants to edit their account information and makes changes to their account they clicks on either button and the form processes the information and updates or inserts data into the database correctly but the problem is that after that the form or page does not display the form back in the div id "content" like how it was loaded originally in the index.php page. The problem is that it reloads or refreshes the form page without the index.php page being involved. That is does not get reloaded or updated inside the index.php page content div again.
What I would like do is have all of my forms process whatever is submitted on the page and display the results back inside the same content div on the index.php page again. I know I am missing something because all of my forms are doing the same thing. I am hoping someone can help me out. I would be very grateful for example code that I can learn from since I am still relatively new to web development. I am posting some sample code below. Many thanks in advance!
Here is my basic sample code: index.php
<?php include('dbconfig.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="twoColFixLt.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.sidebar1 a').click(function() {
var $a = $(this);
var url = $a.attr('href');
var linkText = $a.html();
var target = $a.attr('target');
$.ajax({
context: $('#'+target),
error: function(XMLHttpRequest, textStatus, errorThrown){
this.html('AJAX error<br>' + linkText + '<br>' + url);
},
success: function(data, textStatus, XMLHttpRequest) {
this.html(data);
},
timeout: 5000,
type: 'GET',
url: url
});
return false;
});
$('form[name="MyForm"]').live('submit', function() {
var form = $(this);
var url = form.attr('action');
var target = form.attr('target');
var data = form.serialize();
$.ajax({
context: $('#'+target),
data: data,
error: function(XMLHttpRequest, textStatus, errorThrown){
this.html('AJAX error<br>Form submitted: ' + form.attr('name') + '<br>' + url);
},
success: function(data, textStatus, XMLHttpRequest) {
this.html(data);
},
timeout: 5000,
type: 'POST',
url: url
});
alert("Post form submitted");
return false;
});
});
$('form[name="form1"]').live('submit', function() {
var form = $(this);
var url = form.attr('action');
var target = form.attr('target');
var data = form.serialize();
$.ajax({
context: $('#'+target),
data: data,
error: function(XMLHttpRequest, textStatus, errorThrown){
this.html('AJAX error<br>Form submitted: ' + form.attr('name') + '<br>' + url);
},
success: function(data, textStatus, XMLHttpRequest) {
this.html(data);
},
timeout: 5000,
type: 'GET',
url: url
});
alert("GET form submitted");
return false;
});
</script>
<script language="JavaScript" type="text/javascript" src="js/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate();
$("#pform").validate();
});
</script>
</head>
<body>
<div class="container">
<div class="sidebar1">
<ul class="nav">
<li><a href="mysettings.php" target="content">My Settings</a></li>
</ul>
<p> </p>
<!-- end .sidebar1 --></div>
<div id="content" style="border:red solid 1px;">
<h1>Div "content"</h1>
</div>
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
Here is the mysettings.php page:
<?php if (!isset($_SESSION)) {
session_start();}
?>
<?php
/********************** MYSETTINGS.PHP**************************
This updates user settings and password
************************************************************/
$_SESSION[user_id] = "3"; //Set variable for Testing only!
$id = $_SESSION[user_id]; // Enabled to verify Session user_id is there.
echo "SESSION user_id is:". $id ." <br />";
include 'dbc.php';
//page_protect();
$err = array();
$msg = array();
if($_POST['doUpdate'] == 'Update')
{
$rs_pwd = mysql_query("select UserPassword from users where UserID='$_SESSION[user_id]'");
list($old) = mysql_fetch_row($rs_pwd);
$old_salt = substr($old,0,9);
//check for old password in md5 format
if($old === PwdHash($_POST['pwd_old'],$old_salt))
{
$newsha1 = PwdHash($_POST['pwd_new']);
mysql_query("update users set UserPassword='$newsha1' where UserID='$_SESSION[user_id]'");
$msg[] = "Your new password is updated";
//header("Location: mysettings.php?msg=Your new password is updated");
} else
{
$err[] = "Your old password is invalid";
//header("Location: mysettings.php?msg=Your old password is invalid");
}
}
if($_POST['doSave'] == 'Save')
{
// Filter POST data for harmful code (sanitize)
foreach($_POST as $key => $value) {
$data[$key] = filter($value);
}
mysql_query("UPDATE users SET
`UserName` = '$data[name]',
`UserAddress` = '$data[address]',
`UserPhone` = '$data[tel]',
`UserFax` = '$data[fax]',
`UserCountry` = '$data[country]',
`UserWebsite` = '$data[web]'
WHERE UserID='$_SESSION[user_id]'
") or die(mysql_error());
//header("Location: mysettings.php?msg=Profile Sucessfully saved");
$msg[] = "Profile Sucessfully saved";
}
$rs_settings = mysql_query("select * from users where UserID='$_SESSION[user_id]'");
?>
<html>
<head>
<title>My Account Settings</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate();
$("#pform").validate();
});
</script>
<link href="styles-login.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="5" class="main">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="160" valign="top"><?php
/*********************** MYACCOUNT MENU ****************************
This code shows my account menu only to logged in users.
Copy this code till END and place it in a new html or php where
you want to show myaccount options. This is only visible to logged in users
*******************************************************************/
if (isset($_SESSION['user_id'])) {?>
<?php }
/*******************************END**************************/
?>
<?php
if (checkAdmin()) {
/*******************************END**************************/
?>
<?php } ?>
<td width="732" valign="top">
<h3 class="titlehdr">My Account - Settings</h3>
<p>
<?php
if(!empty($err)) {
echo "<div class=\"msg\">";
foreach ($err as $e) {
echo "* Error - $e <br>";
}
echo "</div>";
}
if(!empty($msg)) {
echo "<div class=\"msg\">" . $msg[0] . "</div>";
}
?>
</p>
<p>Here you can make changes to your profile. Please note that you will
not be able to change your email which has been already registered.</p>
<?php while ($row_settings = mysql_fetch_array($rs_settings)) {?>
<form action="mysettings.php" method="post" name="myform" id="myform">
<table width="90%" border="0" align="center" cellpadding="3" cellspacing="3" class="forms">
<tr>
<td colspan="2"> Your Name / Company Name<br> <input name="name" type="text" id="name" class="required" value="<?php echo $row_settings['UserName']; ?>" size="50">
<span class="example">Your name or company name</span></td>
</tr>
<tr>
<td colspan="2">Address <span class="example">(full address with ZIP)</span><br>
<textarea name="address" cols="40" rows="4" class="required" id="address"><?php echo $row_settings['UserAddress']; ?></textarea>
</td>
</tr>
<tr>
<td>Country</td>
<td><input name="country" type="text" id="country" value="<?php echo $row_settings['UserCountry']; ?>" ></td>
</tr>
<tr>
<td width="27%">Phone</td>
<td width="73%"><input name="tel" type="text" id="tel" class="required" value="<?php echo $row_settings['UserPhone']; ?>"></td>
</tr>
<tr>
<td>Fax</td>
<td><input name="fax" type="text" id="fax" value="<?php echo $row_settings['UserFax']; ?>"></td>
</tr>
<tr>
<td>Website</td>
<td><input name="web" type="text" id="web" class="optional defaultInvalid url" value="<?php echo $row_settings['UserWebsite']; ?>">
<span class="example">Example: http://www.domain.com</span></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>User Name</td>
<td><input name="user_name" type="text" id="web2" value="<?php echo $row_settings['UserName']; ?>" disabled></td>
</tr>
<tr>
<td>Email</td>
<td><input name="user_email" type="text" id="web3" value="<?php echo $row_settings['UserEmail']; ?>" disabled></td>
</tr>
</table>
<p align="center">
<input name="doSave" type="submit" id="doSave" value="Save">
</p>
</form>
<?php } ?>
<h3 class="titlehdr">Change Password</h3>
<p>If you want to change your password, please input your old and new password
to make changes.</p>
<form name="pform" id="pform" method="post" action="">
<table width="80%" border="0" align="center" cellpadding="3" cellspacing="3" class="forms">
<tr>
<td width="31%">Old Password</td>
<td width="69%"><input name="pwd_old" type="password" class="required password" id="pwd_old"></td>
</tr>
<tr>
<td>New Password</td>
<td><input name="pwd_new" type="password" id="pwd_new" class="required password" ></td>
</tr>
</table>
<p align="center">
<input name="doUpdate" type="submit" id="doUpdate" value="Update">
</p>
<p> </p>
</form>
<p> </p>
<p> </p>
<p align="right"> </p></td>
<td width="196" valign="top"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
</body>
</html>Thank you very much to anyone who can help with this issue! If you don't mind please post sample code.
