Javascript 将通知放入PHP表单而不是页面
我是web开发新手，我尝试创建一个迷你PHP站点。我想用两个按钮制作一个表单，当用户单击“提交”时，应用程序将输入的文本放入MySQL数据库。这很好用 问题：当我单击“提交”时，它会显示一个带有插入结果的页面（如“添加成功”）。我想以通知的形式显示消息，或者仅在表单下方显示消息 这是当前的表格： ![]( 这就是目前发生的情况： ！[]( 这就是我希望发生的事情： ！[]( 以下是整个页面的代码：Javascript 将通知放入PHP表单而不是页面,javascript,php,jquery,html,forms,Javascript,Php,Jquery,Html,Forms,我是web开发新手，我尝试创建一个迷你PHP站点。我想用两个按钮制作一个表单，当用户单击“提交”时，应用程序将输入的文本放入MySQL数据库。这很好用 问题：当我单击“提交”时，它会显示一个带有插入结果的页面（如“添加成功”）。我想以通知的形式显示消息，或者仅在表单下方显示消息 这是当前的表格： ![]( 这就是目前发生的情况： ！[]( 这就是我希望发生的事情： ！[]( 以下是整个页面的代码： <html> <head> <style t
<html>
<head>
<style type="text/css">
html, body, h1, form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}
body {
background: url(image/test.jpg);
color: #111111;
font-family: Helvetica;
padding: 150px;
font-size: 12px
}
input:not([type=checkbox]), textarea {
width: 300px;
padding: 3px;
border: 2px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 1px;
}
form {
width: 400px;
margin: 0 auto 0 auto;
}
form fieldset {
padding: 26px;
border: 1px solid #b4b4b4;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
form legend {
padding: 5px 20px 5px 20px;
color: #030303;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #b4b4b4;
}
form ol {
list-style: none;
margin-bottom: 20px;
border: 1px solid #b4b4b4;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 10px;
}
form ol, form legend, form fieldset {
background-image: -moz-linear-gradient(top, #f7f7f7, #e5e5e5); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e5e5e5),color-stop(1, #f7f7f7)); /* Saf4+, Chrome */
}
form ol.buttons {
overflow: auto;
}
form ol li label {
float: left;
width: 160px;
font-weight: bold;
}
label.info {
position: absolute;
color: #000;
top:0px;
left: 50px;
line-height: 15px;
width: 200px;
}
form ol.buttons li {
float: left;
width: 150px;
}
input[type=submit] {
width: 120px;
color: #f3f3f3;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-image: -moz-linear-gradient(top, #0cb114, #07580b); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #07580b),color-stop(1, #0cb114)); /* Saf4+, Chrome */
-webkit-box-shadow: #4b4b4b 0px 2px 5px;
-moz-box-shadow: #4e4e4e 0px 2px 5px;
box-shadow: #e3e3e3 0px 2px 5px;
border: none;
}
input[type=reset] {
width: 80px;
color: #f3f3f3;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-image: -moz-linear-gradient(top, #d01111, #7e0c0c); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7e0c0c),color-stop(1, #d01111)); /* Saf4+, Chrome */
-webkit-box-shadow: #4b4b4b 0px 2px 5px;
-moz-box-shadow: #4e4e4e 0px 2px 5px;
box-shadow: #e3e3e3 0px 2px 5px;
border: none;
}
</style>
<title>Add New Channel</title>
</head>
<body>
<?php
if (isset($_POST['add'])) {
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if (!$conn) {
die('Could not connect: ' . mysql_error());
}
if (!get_magic_quotes_gpc()) {
$channel_name = addslashes($_POST['channel_name']);
$channel_url = addslashes($_POST['channel_url']);
} else {
$channel_name = $_POST['channel_name'];
$channel_url = $_POST['channel_url'];
}
$sql = "INSERT INTO channel " .
"(channel_name,channel_url) " .
"VALUES('$channel_name','$channel_url')";
mysql_select_db('test');
$retval = mysql_query($sql, $conn);
if (!$retval) {
die('Could not enter data: ' . mysql_error());
}
echo "Entered data successfully\n";
mysql_close($conn);
} else {
?>
<form method="post" action="<?php $_PHP_SELF ?>">
<fieldset>
<legend>Add Channel</legend>
<ol>
<li><label for="field1">Channel Name</label></li>
<li><input type="text" id="channel_name" name="channel_name" required/></li>
</ol>
<ol>
<li><label for="field2">Channel URL</label></li>
<li><input type="text" id="channel_url" name="channel_url" required/></li>
</ol>
<ol class="buttons">
<li><input name="add" type="submit" class="button" id="add" value="Add Channel" /> </li>
<li><input type="reset" class="button" value="Reset" /></li>
</ol>
</fieldset>
</form>
<?php
}
?>
</body>
</html>
html、正文、h1、表单、字段集、图例、ol、li{
保证金：0；
填充：0；
}
身体{
背景：url（image/test.jpg）；
颜色：#111111；
字体系列：Helvetica；
填充：150px；
字号：12px
}
输入：not（[type=checkbox]），textarea{
宽度：300px；
填充：3倍；
边框：2个实心#ccc；
-moz边界半径：5px；
-webkit边界半径：1px；
}
形式{
宽度：400px；
边距：0自动0自动；
}
表单字段集{
填充：26px；
边框：1px实心#b4；
-moz边界半径：10px；
-webkit边界半径：10px；
}
表格图例{
填充：5px20px 5px20px；
颜色：#030303；
-moz边界半径：6px；
-webkit边界半径：6px；
边框：1px实心#b4；
}
表格ol{
列表样式：无；
边缘底部：20px；
边框：1px实心#b4；
-moz边界半径：10px；
-webkit边界半径：10px；
填充：10px；
}
表格ol、表格图例、表格字段集{
背景图像：-moz线性渐变（顶部，#f7f7f7，#E5E5）；/*FF3.6*/
背景图像：-webkit渐变（线性、左下、左上、颜色停止（0，#E5E5）、颜色停止（1，#f7f7f7））；/*Saf4+，铬*/
}
表格ol按钮{
溢出：自动；
}
表格OLLI标签{
浮动：左；
宽度：160px；
字体大小：粗体；
}
label.info{
位置：绝对位置；
颜色：#000；
顶部：0px；
左：50px；
线高：15px；
宽度：200px；
}
李先生表格{
浮动：左；
宽度：150px；
}
输入[类型=提交]{
宽度：120px；
颜色：#F3；
-moz边界半径：6px；
-webkit边界半径：6px；
背景图像：-moz线性渐变（顶部，#0cb114，#07580b）；/*FF3.6*/
背景图像：-webkit渐变（线性、左下、左上、色挡（0，#07580b）、色挡（1，#0cb114））；/*Saf4+、铬*/
-网络工具包盒阴影：#4b4b 0px 2px 5px；
-莫兹盒阴影：4e4e4e0px 2px 5px；
盒影：#E3 0px 2px 5px；
边界：无；
}
输入[类型=重置]{
宽度：80px；
颜色：#F3；
-moz边界半径：6px；
-webkit边界半径：6px；
背景图像：-moz线性渐变（顶部，#d01111，#7e0c0c）；/*FF3.6*/
背景图像：-webkit渐变（线性、左下、左上、颜色停止（0，#7e0c0c）、颜色停止（1，#d01111））；/*Saf4+，铬*/
-网络工具包盒阴影：#4b4b 0px 2px 5px；
-莫兹盒阴影：4e4e4e0px 2px 5px；
盒影：#E3 0px 2px 5px；
边界：无；
}
添加新频道
您需要使用jquery/ajax提交表单。只需简单的搜索即可到达所需的位置。有几个选项可以实现这一点：
不要让表单为帖子指向不同的url，而是指向相同的页面。让单个页面同时处理GET和POST，只需在视图中添加“已成功输入的数据”
通过AJAX使用POST，并侦听处理保存到数据库的脚本的成功响应。成功后，使用Javascript将通知附加到表单底部
只需在该位置添加一个普通div，当AJAX返回success时，将文本添加到该div。如果您想具体帮助我们，则需要显示更多代码。在不带条件的情况下显示表单。删除if-else并在表单显示后但关闭前移动数据库逻辑
<form action="" method="POST">
<fieldset>
--display the form as usual in here--
</fieldset>
<?php
if(isset($_POST['add'])) {
//add contents to database
echo 'Entered data successfuly';
}
?>
</form>
--在此处像往常一样显示表单--
非常感谢您的解释，我只是按照您的解释做了，但是，将php代码放在表单之外或必须放在表单之外是不同的吗？实际上，您可以将代码放在任何地方。如果表单中的isset条件为真，您只需离开显示“Entered data successfully”（输入数据成功）的php部分。这取决于您，但我发现最好不要这样做o将所有内容放在一个地方（如果数据库出现问题，您也可以在此处显示错误消息）。请记住，您必须在您希望的位置（关闭表单标记之前）回显输出。