我最初根据我网站上的声音选项是打开还是关闭来加载div。
<?php
if (isset($_SESSION['user']) && ($_SESSION['sound']==1))
echo "
<div id = 'soundToggle'>
<form id = 'soundOffForm'>
<p> Sound is currently on. </p>
<center><input type = 'submit' value ='Turn Off Sound' /></center>
</form>
</div>
";
else if (isset($_SESSION['user']) && ($_SESSION['sound']==0))
echo "
<div id = 'soundToggle'>
<form id = 'soundOnForm'>
<p> Sound is currently off. </p>
<center><input type = 'submit' value = 'Turn On Sound' /></center>
</form>
</div>
";
?>
当我刷新页面时，这总是有效。
但是，当我在soundToggle div中提交当前表单时，我正在尝试使用jQuery重新加载带有div的soundToggle div，该div可以打开或关闭声音（通过表单提交）。
的index.php：
<?php session_start();
#session_regenerate_id(true);
include ("dbconfig.php");
if(!isset($_SESSION['introd']))
{
header("Location: intro.php");
}
?>
<html>
<head>
<title>My Webpage</title>
<link rel = "stylesheet" type = "text/css" href = "site.css" />
<link rel="shortcut icon" href="index.php?img=favicon" type="image/ico" />
<script>
function validatingForm(){
var x;
var y;
var e;
var p;
x = document.getElementById('nameCheck').value;
y = document.getElementById('password').value;
e = document.getElementById('errorMsg');
p = document.getElementById('errorPass');
if(x !="" && y !=""){
return true;
}
else if(x =="" && y == ""){
e.innerHTML='<font color="red">(required) Name:</font>';
p.innerHTML='<font color="red">(required) Password:</font>';
return false;
}
else if(x =="" && y!=""){
e.innerHTML='<font color="red">(required) Name:</font>';
p.innerHTML='<font color="blue">Password:</font>';
return false;
}
else if(y =="" && x!=""){
p.innerHTML='<font color="red">(required) Password:</font>';
e.innerHTML='<font color="blue">Name:</font>';
return false;
}
}
function validatingSignUpForm(){
var x;
var y;
var e;
var p;
x = document.getElementById('newonameCheck').value;
y = document.getElementById('newopassword').value;
e = document.getElementById('newoerrorMsg');
p = document.getElementById('newoerrorPass');
if(x !="" && y !=""){
return true;
}
else if(x =="" && y == ""){
e.innerHTML='<font color="red">(required) Name:</font>';
p.innerHTML='<font color="red">(required) Password:</font>';
return false;
}
else if(x =="" && y!=""){
e.innerHTML='<font color="red">(required) Name:</font>';
p.innerHTML='<font color="blue">Password:</font>';
return false;
}
else if(y =="" && x!=""){
p.innerHTML='<font color="red">(required) Password:</font>';
e.innerHTML='<font color="blue">Name:</font>';
return false;
}
}
function addValidate(){
var x;
var y;
var z;
var e;
var p;
var r;
x = document.getElementById('nameCheck').value;
y = document.getElementById('password').value;
z = document.getElementById('role').value;
e = document.getElementById('errorMsg');
p = document.getElementById('errorPass');
r = document.getElementById('errorRole');
if(x !="" && y !="" && z !="empty"){
return true;
}
else if(x =="" && y == "" & z == "empty"){
e.innerHTML='<font color="red">(required) Name:</font>';
p.innerHTML='<font color="red">(required) Password:</font>';
r.innerHTML='<font color="red">(required) Role:</font>';
return false;
}
else if(x !="" && y == "" & z == "empty"){
e.innerHTML='<font color="blue">Name:</font>';
p.innerHTML='<font color="red">(required) Password:</font>';
r.innerHTML='<font color="red">(required) Role:</font>';
return false;
}
else if(x =="" && y!="" && z == "empty"){
e.innerHTML='<font color="red">(required) Name:</font>';
p.innerHTML='<font color="blue">Password:</font>';
r.innerHTML='<font color="red">(required) Role:</font>';
return false;
}
else if(x =="" && y == "" && z != "empty"){
e.innerHTML='<font color="red">(required) Name:</font>';
p.innerHTML='<font color="red">(required) Password:</font>';
r.innerHTML='<font color="blue">Role:</font>';
return false;
}
else if(x =="" && y!="" && z != "empty"){
e.innerHTML='<font color="red">(required) Name:</font>';
p.innerHTML='<font color="blue">Password:</font>';
r.innerHTML='<font color="blue">Role:</font>';
return false;
}
else if(y =="" && x!="" && z != "empty"){
p.innerHTML='<font color="red">(required) Password:</font>';
e.innerHTML='<font color="blue">Name:</font>';
r.innerHTML='<font color="blue">Role:</font>';
return false;
}
}
</script>
</head>
<body>
<?php include("header.php"); ?>
<?php
if (isset($_SESSION['user']))
/* user is logged in */
echo "<p class ='welcome' id='greeting'> Hi, ". $_SESSION['user'] . "! Welcome to the site!</p>";
else
/* user is NOT logged in*/
echo "<p class ='welcome' id='greeting'> Please Login:</p>
<form action='welcome.php' method='post'>
<center><b id = 'errorMsg'>Name:</b>
<input type='text' id='nameCheck' name = 'username' /></center>
<br />
<center><b id='errorPass'>Password:</b> <input type='password' id ='password' name = 'password'/></center>
<br /><br />
<center><input type='submit' value='Log In' onClick='return validatingForm()'/></center>
</form>
<p class ='welcome' id='greeting'> OR Sign Up:</p>
<form action='sign_up.php' method='post'>
<center><b id = 'newoerrorMsg'>Name:</b>
<input type='text' id='newonameCheck' name = 'addusername' /></center>
<br />
<center><b id='newoerrorPass'>Password:</b> <input type='password' id ='newopassword' name = 'addpassword'/></center>
<br /><br />
<center><input type='submit' value='Sign Up' onClick='return validatingSignUpForm()'/></center>
</form>
";
?>
<?php
if (isset($_SESSION['user']) && $_SESSION['role'] == 'admin') {
/*query user db */
$user_rs = $db_con->query("SELECT * FROM users");
/* Assume there is a recordset and create the table */
echo "<center>
<h1> User List:</h1>
<table border='1'>
<tr>
<td><b>User ID</b></td>
<td><b>Username</b></td>
<td><b>Password</b></td>
<td><b>Options</b></td>
</tr>";
/* loop through recordset - new row for each user */
while( $record = $user_rs->fetch_object() ){
echo "
<tr>
<td>" . $record->id . "</td>
<td>" . $record->username . "</td>
<td>" . $record->password . "</td>
<td><a href='remove_user.php?id=" . $record->id . "'>Delete</a></td>
</tr>";
}
/* Close the table */
echo "
</table>
</center>
<br />";
}
else if (isset($_SESSION['user']) && $_SESSION['role'] == 'user') {
/*query user db */
$user_rs = $db_con->query("SELECT * FROM users WHERE username = '" . $_SESSION['user'] . "'");
/* Assume there is a recordset and create the table */
echo "<center>
<h1> Your Profile:</h1>
<table border='1'>
<tr>
<td><b>User ID</b></td>
<td><b>Username</b></td>
<td><b>Password</b></td>
</tr>";
/* take one row for user only */
$record = $user_rs->fetch_object();
echo "
<tr>
<td>" . $record->id . "</td>
<td>" . $record->username . "</td>
<td>" . $record->password . "</td>
</tr>";
/* Close the table */
echo "
</table>
</center>
<br />";
}
#else {
#do nothing
# }
?>
<?php
if (isset($_SESSION['user']) && $_SESSION['role']=="admin")
echo "<p class ='welcome' id='greeting'> Add User:</p>
<form action='add_user.php' method='post' onSubmit='return addValidate();' style = 'border: 2px grey solid; padding: 5px'>
<b id='errorMsg'>Name:</b>
<input type='text' id='nameCheck' name='addusername'/>
<br /><br />
<b id='errorPass'>Password:</b> <input type='password' id='password' name='addpassword'/>
<br /><br />
<b id='errorRole'>Role:</b> <select name='addrole' id='role' >
<option value='empty'>Select Role</option>
<option value='admin'>Admin</option>
<option value='user'>Ordinary User</option></select>
<br /><br />
<input type='submit' value='Add'/>
</form>";
?>
<?php
if (isset($_SESSION['user']) && ($_SESSION['sound']==1))
echo "
<div id = 'soundToggle'>
<form id = 'soundOffForm'>
<p> Sound is currently on. </p>
<center><input type = 'submit' value ='Turn Off Sound' /></center>
</form>
</div>
";
else if (isset($_SESSION['user']) && ($_SESSION['sound']==0))
echo "
<div id = 'soundToggle'>
<form id = 'soundOnForm'>
<p> Sound is currently off. </p>
<center><input type = 'submit' value = 'Turn On Sound' /></center>
</form>
</div>
";
?>
<?php if (isset($_SESSION['user']))
echo "<center><a href='logout.php'>Logout</a></center>";?>
<p class = "content"> This is a page that is a scrap work in progress. </p>
<?php include("footer.php"); ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
$("#soundOffForm").on('submit', function(event){
/*var r = new XMLHttpRequest();
r.open("POST", "sessionsetter.php", true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
console.log(r.responseText);
};
r.send("a=1&b=2&c=3");*/
event.preventDefault();
$.ajax({
type: "POST",
url: "sessionsetter.php",
data: {
sound : '0',
},
success: function(data) {
//alert("Sound toggled successfully: " + data);
$('#soundToggle').load(location.href + " #soundOnForm");
},
error: function(data) {
alert("Error in processing request: " + data);
}
});
});
$("#soundOnForm").on('submit', function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "sessionsetter.php",
data: {
sound : '1',
},
success: function(data) {
//alert("Sound toggled successfully: " + data);
$('#soundToggle').load(location.href + " #soundOffForm");
},
error: function(data) {
alert("Error in processing request: " + data);
}
});
});
});
</script>
</body>
</html>
这似乎是我第一次使用div中相应的提交表单打开或关闭声音。但是，第二次执行此操作时，整个文档会刷新。某种程度上event.preventDefault()没有发生。我不得不承认，我还是一个jQuery新手。有人可以向我解释一下我需要做些什么才能将div重新附加到我的jQuery脚本中的相应事件中？
答案 0 :(得分：0)
当您替换12
34
的内容时，新表单不再附加旧处理程序。它只是#soundToggle，并且希望像表单一样提交和替换页面。
您希望使用事件委派来捕获任何现有或未来表单与form的提交：
id答案 1 :(得分：0)
保罗确实帮助缩小了问题范围。我终于明白了。
你仍然需要使用$（＆＃34; #selected＆＃34;）。submit（）来实际触发表单提交。所以问题是，当选择器发生变化时我们如何定位它？
当然，JQuery允许多个选择器。因此，如果您要使用不同ID的div替换具有此ID的div，请使用$（＆＃34; body＃selected＆＃34;）。这将允许DOM不断检查孩子，以便触发提交。
这是一个奇怪的。希望它可以帮助那些人。