[英]Submit embedded form without reloading page
I have an embedded form on the admin page which when submitted does not perform any error checking or input data into the database, and reloads the admin page. 我在管理页面上有一个嵌入式表单,该表单在提交时不会执行任何错误检查或将数据输入数据库,然后重新加载管理页面。
This happens with both add_data.php and add_user.php when loaded through the admin page, but do work on their own page. 通过管理页面加载时,add_data.php和add_user.php都会发生这种情况,但可以在自己的页面上运行。
How can the form be submitted without reloading the page? 如何在不重新加载页面的情况下提交表单?
Admin page: 管理员页面:
<?php
require('../phpinclude/init.php');
include_once('../template/head.php');
?>
<script>
$(document).ready(function(){
$(".load_content").click(function(e){
e.preventDefault();
$("#content").load($(this).attr('href'));
});
});
</script>
<nav>
<ul>
<li><a class="load_content" href="../data/index.php">Data</a></li>
<li><a class="load_content" href="../template/add_data.php">Add Data</a></li>
<li><a class="load_content" href="../template/add_user.php">Add User</a></li>
<li><a class="load_content" href="../template/list_users.php">List User</a></li>
<li><a href="../template/logout.php">Logout</a></li>
</ul>
</nav>
<div id="content">
<!-- Content gets loaded here -->
<h2>Welcome!</h2>
</div>
Add Data Page: 添加数据页:
<?php
require('../phpinclude/init.php');
$name = $link = $name_msg = $link_msg = $submit_msg ='';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
include_once("../phpinclude/db_connect.php");
if (empty($_POST["new_name"])) {
$name_msg = "Name is required";
} else if (preg_match("#[^a-z._\-0-9]#i",$_POST["new_name"])) {
$name_msg = "Only letters, numbers . _ - allowed";
} else {
$name = sanitise($_POST["new_name"]);
$checkName = $dbh->prepare("SELECT id FROM db_data WHERE name='$name' LIMIT 1");
$checkName->execute(array($name));
if ($checkName->rowcount()) {
$name_msg = 'This name is already in use';
}
}
if (empty($_POST["new_link"])) {
$link_msg = "Link is required";
} else {
$link = sanitise($_POST["new_link"]);
$checkLink = $dbh->prepare("SELECT id FROM db_data WHERE link='$link' LIMIT 1");
$checkLink->execute(array($link));
if ($checkLink->rowcount()) {
$link_msg = 'This link address is already in use';
}
}
if($name == "" || $link == "") {
echo 'The form is missing information';
} else if ($checkName->rowcount()) {
echo 'That name is already in use';
} else if ($checkLink->rowcount()) {
echo 'that link is already in use';
} else {
$sql = "INSERT INTO db_data (name, link)
VALUES (:name, :link)";
$query = $dbh->prepare($sql);
$query->bindParam(':name', $name, PDO::PARAM_STR);
$query->bindParam(':link', $link, PDO::PARAM_STR);
$query->execute();
echo 'form SUBMITTED';
exit();
}
}
?>
<h1>Add new Data</h1>
<div>
<form action="" method="POST" role="form">
<!-- NAME -->
<label for="new_name">DATA Name</label>
<input type="text" id="new_name" name="new_name" value="<?php echo $name;?>">
<span style="color:red;"><?php echo $name_msg;?></span>
<br>
<!-- LINK -->
<label for="new_link">Link</label>
<input type="text" id="new_link" name="new_link" value="<?php echo $link;?>">
<span style="color:red;"><?php echo $link_msg;?></span>
<br>
<!-- SUBMIT -->
<input type="submit" name="Submit" value="Submit">
<span style="color:red;"><?php echo $submit_msg;?></span>
</form>
</div>
add_user.php is very similar to add_data.php, only with more parameters to be submitted. add_user.php与add_data.php非常相似,只是要提交更多参数。
You need to use javascript: 您需要使用javascript:
$('form').submit(function(){
//prevent the html form from submitting
e.preventDefault();
$.ajax({
type: 'post',
url : $(this).att('action');
data : $(this).serialize(),
//set the response as the submit message
success: function (response) {
$('#submit-msg').html(response);
}
});
});
Add an action to the form, in this case the php file itself: 向表单添加操作,在这种情况下为php文件本身:
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="POST" role="form">
Also change your html like so: 同样更改您的html,如下所示:
<span id="submit-msg" style="color:red;"></span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.