我正在开发一个旨在记录借来资源的网页。在将新记录插入数据库之前，我想确保字段不为空。找到空字段后，我会通过警告框通知用户。
我遇到的问题是，一旦显示警报，就会从页面中删除“if empty”块之后发生的所有事情。如何在不发生这种情况的情况下创建警报框？
的index.php
<!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>
在空白插入之前生成的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>
<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>
答案 0 :(得分：0)
您在脚本的顶级上下文中调用了return，因此它可以有效地充当exit()来电。