Javascript PHP echo在提交时覆盖页面
我正在做一个页面，目的是记录借来的资源。在将新记录插入数据库之前，我希望确保字段不为空。当发现空字段时，我会通过警报框通知用户 我遇到的问题是，一旦显示了警报，“if empty”块从页面中删除后发生的所有事情。如何创建警报框而不发生这种情况 index.phpJavascript PHP echo在提交时覆盖页面,javascript,php,jquery,Javascript,Php,Jquery,我正在做一个页面，目的是记录借来的资源。在将新记录插入数据库之前，我希望确保字段不为空。当发现空字段时，我会通过警报框通知用户 我遇到的问题是，一旦显示了警报，“if empty”块从页面中删除后发生的所有事情。如何创建警报框而不发生这种情况 index.php <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="wid
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resource Tracker</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="pure-min.css">
<link rel="stylesheet" href="bootstrap-datepicker3.standalone.min.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="bootstrap-datepicker.js"></script>
</head>
<body>
<h1>Resource Tracker</h1>
<?php
// Form to insert new items
echo
"<form method='POST' action='index.php' class='pure-form'>
<fieldset>
<legend>Add new item</legend>
<input type='text' name='contact' placeholder='Contact'>
<input type='text' name='resource' placeholder='Resource Borrowed'>
<input type='text' name='returnDate' class='input-append date myDatepicker' id='example1' placeholder='Return Date'>
<button type='submit' name='insertButton' class='pure-button pure-button-primary'>Add</button>
</fieldset>
</form>";
if (isset($_POST['insertButton'])) {
$contact = trim($_POST["contact"]);
$resource = trim($_POST["resource"]);
$returnDate = trim($_POST["returnDate"]);
if(empty($contact)) {
echo "<script type='text/javascript'>alert('Contact infomation is not valid.');</script>";
return;
}
if (empty($resource)) {
echo "<script type='text/javascript'>alert('Resource infomation is not valid.');</script>";
return;
}
if (empty($returnDate)) {
echo "<script type='text/javascript'>alert('Return date infomation is not valid.');</script>";
return;
}
$current_date = date('F d, Y');
$sql = "insert into borrowed_assets values ('$contact', '$resource', '" . $current_date . "', '$returnDate')";
$servername = "********.com";
$username = "********";
$password = "********";
$dbname = "resource_tracker";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Insert into database
$result = $conn->query($sql);
mysqli_close($conn);
// Reload page to prevent duplicate submitions
header("Location: " . $_SERVER['REQUEST_URI']);
exit();
}
?>
<table class="pure-table">
<thead>
<tr>
<th width="23.75%">Contact</th>
<th width="23.75%">Resource Borrowed</th>
<th width="23.75%">Date Requested</th>
<th width="23.75%">Return Date</th>
<th width="5%">Action</th>
</tr>
</thead>
<tbody>
<?php
$servername = "********.com";
$username = "********";
$password = "********";
$dbname = "resource_tracker";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM borrowed_assets";
$result = $conn->query($sql);
mysqli_close($conn);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td id='contact'>" . $row["contact"] . "</td>";
echo "<td id='asset'>" . $row["asset"] . "</td>";
echo "<td id='request_date'>" . $row["request_date"] . "</td>";
echo "<td id='return_date'>" . $row["return_date"] . "</td>";
echo "<td><img src='glyphicons-17-bin.png' id='remove' align='center' style='display: block; height: 1.2em; margin-left: auto; margin-right: auto;'></td>";
echo "</tr>";
}
}
?>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$('#example1').datepicker({
format: "MM dd, yyyy"
});
});
</script>
<script type="text/javascript">
$('img[src$="glyphicons-17-bin.png"]').click(function(e){
var fields = [];
$(this).closest('tr').children().each(function () {
fields.push(this.innerHTML);
});
$(this).closest('tr').fadeOut();
fields.pop();
$.ajax({
type: "POST",
url: "delete.php",
data: { record: fields }
});
})
</script>
</body>
</html>
资源跟踪器
资源跟踪器
您在脚本的顶级上下文中调用return
，因此它可以有效地充当exit（）
调用。您在脚本的顶级上下文中调用return
，因此它可以有效地充当exit（）
调用。理解，但应该做些什么呢？我很想在这里使用GOTO。坦白说，这是一个愚蠢的设计。假设您有一个10个必填字段表单，而用户忘记了其中4个字段。您的设计强制执行4次完整的往返。“你忘了A”（重新加载）“你忘了B”（重新加载），诸如此类。正确的设计应该是“你忘了a，B，C，D”。将消息排成队列，一次输出所有错误，而不是强迫用户一次一个地解决问题，这是一件非常痛苦的事情。我同意并将改变这一点，但这仍然无助于解决根本问题。好吧，不要“返回”。如果您想同时输出页面的后面部分，则不能在任何错误检查阶段返回/退出。下一个代码块是执行插入的部分。我认为我应该做的是在每个if（空（…）块中设置标志。然后在if（validContac&&validResource…）或类似文件中进行插入。我们来看看进展如何。谢谢你的意见。明白了，但是应该怎么做呢？我很想在这里使用GOTO。坦白说，这是一个愚蠢的设计。假设您有一个10个必填字段表单，而用户忘记了其中4个字段。您的设计强制执行4次完整的往返。“你忘了A”（重新加载）“你忘了B”（重新加载），诸如此类。正确的设计应该是“你忘了a，B，C，D”。将消息排成队列，一次输出所有错误，而不是强迫用户一次一个地解决问题，这是一件非常痛苦的事情。我同意并将改变这一点，但这仍然无助于解决根本问题。好吧，不要“返回”。如果您想同时输出页面的后面部分，则不能在任何错误检查阶段返回/退出。下一个代码块是执行插入的部分。我认为我应该做的是在每个if（空（…）块中设置标志。然后在if（validContac&&validResource…）或类似文件中进行插入。我们来看看进展如何。谢谢你的意见。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resource Tracker</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="pure-min.css">
<link rel="stylesheet" href="bootstrap-datepicker3.standalone.min.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="bootstrap-datepicker.js"></script>
</head>
<body>
<h1>Resource Tracker</h1>
<form method='POST' action='index.php' class='pure-form'>
<fieldset>
<legend>Add new item</legend>
<input type='text' name='contact' placeholder='Contact'>
<input type='text' name='resource' placeholder='Resource Borrowed'>
<input type='text' name='returnDate' class='input-append date myDatepicker' id='example1' placeholder='Return Date'>
<button type='submit' name='insertButton' class='pure-button pure-button-primary'>Add</button>
</fieldset>
</form>
<table class="pure-table">
<thead>
<tr>
<th width="23.75%">Contact</th>
<th width="23.75%">Resource Borrowed</th>
<th width="23.75%">Date Requested</th>
<th width="23.75%">Return Date</th>
<th width="5%">Action</th>
</tr>
</thead>
<tbody>
<tr><td id='contact'>Bobby Tables</td><td id='asset'>server1234</td><td id='request_date'>August 05, 2015</td><td id='return_date'>September 04, 2015</td><td><img src='glyphicons-17-bin.png' id='remove' align='center' style='display: block; height: 1.2em; margin-left: auto; margin-right: auto;'></td></tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$('#example1').datepicker({
format: "MM dd, yyyy"
});
});
</script>
<script type="text/javascript">
$('img[src$="glyphicons-17-bin.png"]').click(function(e){
var fields = [];
$(this).closest('tr').children().each(function () {
fields.push(this.innerHTML);
});
$(this).closest('tr').fadeOut();
fields.pop();
// $.post('delete.php', 'record=' + )
$.ajax({
type: "POST",
url: "delete.php",
data: { record: fields }
});
console.log(fields);
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resource Tracker</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="pure-min.css">
<link rel="stylesheet" href="bootstrap-datepicker3.standalone.min.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="bootstrap-datepicker.js"></script>
</head>
<body>
<h1>Resource Tracker</h1>
<form method='POST' action='index.php' class='pure-form'>
<fieldset>
<legend>Add new item</legend>
<input type='text' name='contact' placeholder='Contact'>
<input type='text' name='resource' placeholder='Resource Borrowed'>
<input type='text' name='returnDate' class='input-append date myDatepicker' id='example1' placeholder='Return Date'>
<button type='submit' name='insertButton' class='pure-button pure-button-primary'>Add</button>
</fieldset>
</form><script type='text/javascript'>alert('Contact infomation is not valid.');</script>