使用jquery从一个div中运行一个表单（插入/更新/删除） [英] Run a form (insert/update/delete) from within a div using jquery
问题描述
这是前一个问题的后续：iframe与div + jquery。我在main.php的div中加载一个form（form1.php）。我希望能够在div中运行表单，而无需刷新main.php来填充数据库。
这里是main.php：
< html>
< head>
< script type =text / javascriptsrc =javascript / update-div.js>< / script>
< script src =http://code.jquery.com/jquery-latest.js>< / script>
< script>
$（document）.ready（function（）{
$（＃submit_btn）。click（function（e）{
e.preventDefault（）;
$。 post（'form1.php'，$（＃form1）。serialize（），function（result）{
$（＃fc）。html（result）;}）;
} ）;
< / scrip>
< / head>
< body leftmargin =0pxtopmargin =0pxmarginheight =0pxmarginwidth =0pxbgcolor = #FFFFFF>
< a href =javascript：ajaxpage（'form1.php'，'fc'）> form1< / a>
< br>
< ; div id =fc>< / div>
< / body>
< / html>
< / code>
，这是form1.php的代码
<？php
$ link = mysql_connect（'localhost'，'login'，'pwd'）;
if（！$ link）{die（'Not connected：'。mysql_error（））;}
$ db_selected = mysql_select_db（'db_name'）;
$ name = strtoupper（$ _ POST ['name']）;
$ birth = strtoupper（$ _ P OST ['birth']）;
$ act = $ _POST ['act'];
if（$ act ==save）{
$ query =INSERT INTO`mnl_people`（`name`，`birth`）VALUES（'$ name'，'$ birth'） ;
mysql_query（$ query）;
$ idalbum = mysql_insert_id（）;
}
if（！empty（$ name））{
$ html =< p>您的名字：< b" $ name。< / b><< ; / p>中;
$ html。=< p>您的出生地：< b>。$ birth。< / b>< / p>;
echo（$ html）;
}
else {？>
< form name =form1enctype ='multipart / form-data'>
名称< input type ='text'name ='name'value =>< br>
< br />
< br />
出生地：< input type =textname =birth>< br />
< input type ='submit'name ='act'class ='submit'value ='save'id =submit_btn/>
< / form>
<？php
}
？>
不幸的是，在提交点击时，main.php刷新并显示以下url：mnl / main.php ？名称= Johnb和放大器;出生=美国和放大器; ACT =保存。此外，尽管将新字段添加到表'mnl_people'，但字段 name 和出生：即似乎$ name和$ birth是空的。有人能让我知道我做错了什么吗？我绝对错过了一些东西。谢谢。
解决方案您没有将表单的方法声明为 POST 所以它使用 GET 方法，但是您尝试获取 POST 值。
在表单标记中添加属性 method =POST或使用 $ _ GET ['field_name'] 来检索它。
This is a followup of a previous question: "iframe versus div + jquery". I load a form (form1.php) in a div of main.php. I want to be able to run the form within the div without refreshing main.php to populate a db.
Here is main.php:
<html>
<head>
<script type="text/javascript" src="javascript/update-div.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#submit_btn").click(function(e) {
e.preventDefault();
$.post('form1.php', $("#form1").serialize(), function(result) {
$("#fc").html(result); });
});
</scrip>
</head>
<body leftmargin="0px" topmargin="0px" marginheight="0px" marginwidth="0px" bgcolor="#FFFFFF">
<a href="javascript:ajaxpage('form1.php','fc')">form1</a>
<br>
<div id="fc"></div>
</body>
</html>
and this is the code for form1.php
<?php
$link = mysql_connect('localhost', 'login', 'pwd');
if (!$link) {die('Not connected : ' . mysql_error());}
$db_selected = mysql_select_db('db_name');
$name = strtoupper($_POST['name']);
$birth = strtoupper($_POST['birth']);
$act = $_POST['act'];
if($act == "save"){
$query="INSERT INTO `mnl_people` ( `name` , `birth`) VALUES ('$name', '$birth')";
mysql_query($query);
$idalbum=mysql_insert_id();
}
if(!empty($name)){
$html = "<p>Your name: <b>".$name."</b></p>";
$html .= "<p>Your birthplace: <b>".$birth."</b></p>";
echo("$html");
}
else{ ?>
<form name="form1" enctype='multipart/form-data'>
Name <input type='text' name='name' value=""><br>
<br/>
<br/>
Birthplace : <input type="text" name="birth"><br/>
<input type='submit' name='act' class='submit' value='save' id="submit_btn"/>
</form>
<?php
}
?>
Unfortunately, on submit click, main.php refreshes and show the following url: mnl/main.php?name=Johnb&birth=us&act=save. Also, eventhough a new field is added to the table 'mnl_people', there is no values for the field name and birth: i.e it seems that $name and $birth are empty. Could someone le me know what I am doing wrong. I am definitely missing something here. Thanks.
解决方案 You did not declare the method of your form as POST so it uses the GET method, but you try to get the POST values.
Either add an attribute method="POST" to your form tag or use $_GET['field_name'] to retrieve it.
这篇关于使用jquery从一个div中运行一个表单（插入/更新/删除）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
