Javascript 如何使用AJAX通过一个提交按钮提交3个表单
我正在创建一个在线商店,我有三个表单(使用两个不同的php文件)。 第一种形式-基于文本,供用户填写产品的标题、价格和说明 第二种形式-上传新产品的图像 第三种形式-从数据库中选择一个类别(表),将记录添加到给定的表中 我将如何使用AJAX做到这一点? php和AJAX的新功能请帮助我修改代码 中一Javascript 如何使用AJAX通过一个提交按钮提交3个表单,javascript,php,jquery,ajax,forms,Javascript,Php,Jquery,Ajax,Forms,我正在创建一个在线商店,我有三个表单(使用两个不同的php文件)。 第一种形式-基于文本,供用户填写产品的标题、价格和说明 第二种形式-上传新产品的图像 第三种形式-从数据库中选择一个类别(表),将记录添加到给定的表中 我将如何使用AJAX做到这一点? php和AJAX的新功能请帮助我修改代码 中一 <form action="insert.php" method="post" name="form1" enctype="multipart/form-data"> <div&g
<form action="insert.php" method="post" name="form1" enctype="multipart/form-data">
<div>
<label for="title">Title: </label><input type="text" name="title"/>
</div>
<div>
<label for="description">Desc: </label><input type="text" name="description"/>
</div>
<div>
<label for="price">Price: </label><input type="text" name="price" />
</div>
<input type="hidden" name="submit" value="Submit">
</form>
标题:
描述:
价格:
php(由第1个表单使用)
jQuery为此提供了一个很好的功能。(.post) 使用.val读取表单数据
我建议您对代码进行一些重组,而不是尝试从1中发布到三个单独的页面,或者尝试将这些步骤合并为一个步骤,或者将它们最终拆分为3个步骤 例如: (分成三部分): 第一页,填写产品的基本信息,然后提交并插入数据库,然后进入第二页/第二步(通过包含特定“产品ID”或其他内容的隐藏帖子字段),从数据库中选择类别。当您从那里提交时,它会插入数据库,然后进入第3页/第3步,在那里您可以上传图像。提交此文件后,您就完成了 -优点:单个页面更小,更容易对其中任何一个页面进行调整 -缺点:很难更改影响所有3个页面的内容,如果用户的互联网速度较慢,可能会导致创建单个产品需要很长时间
(合并): 所有信息都在一个页面上输入-类别选择、基本产品信息和文件上载。提交该页面将一次性处理所有信息 -优点:更容易进行大的更改,所有信息一次加载/提交,因此您不会在数据库中出现部分不完整的数据
-缺点:在一页上填写大量信息,可能会使查找单个要更改的内容变得困难,需要大量代码。我对下面的合并方法感兴趣,这是主要思想。你能帮我这么做吗,因为我是新手。你基本上想做的是收集所有你知道你需要的表单元素(文本输入、复选框、单选按钮等),并将它们放在一个页面上。在处理这些提交的PHP页面上,只需查看您的输入列表,并确保您处理每个输入。那么,我是否应该将所有不同的PHP文件放在一个表单中,然后创建一个使用该PHP文件的表单?它会工作还是会混淆一切?一个表单使用一个php文件提交是正确的。我会重新编写一点PHP,而不仅仅是将其复制/粘贴到单个文档中,只是要确保它是正确的。
<?php
$con=mysqli_connect('localhost','root', '',"onlineshop");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="INSERT INTO mens (title, description, price)
VALUES
('$_POST[title]','$_POST[description]','$_POST[price]')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
echo "1 record added";
mysqli_close($con);
?>
<script type="text/javascript" src="../cms/scripts/jquery.min.js"></script>
<script type="text/javascript" src="../cms/scripts/jquery.form.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$('#photoimg').live('change', function(){
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading"/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
</script>
<style>
body
{
font-family:arial;
}
.preview
{
width:160px;
border:solid 2px #dedede;
padding:10px;
}
#preview
{
color:#cc0000;
font-size:10px
}
</style>
<body bgcolor="#ffdd55">
<font face=Arial size=3 color="#880088">
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php' >
<small>Upload your image <input type="file" name="photoimg" id="photoimg" /></small>
</form>
<div id='preview'>
</div>
<?php
include_once 'dropdown.php';
?>
<small>Choose category:</small>
<br>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<select name="Tables" id="ddTables" name="form3">
<?php
echo $tables;
?>
</select>
<input type="hidden" id="tableSubmit" value="Submit"/>
</form>
</div>
<!-- Submit 3 forms together-->
<script>
$('#form1_submit_button').click(function(){
$('#form1 #imageform #form3').submit();
});
</script>
<?php
$dbname = 'onlineshop';
if (!mysql_connect('localhost', 'root', '')) {
echo 'Could not connect to mysql';
exit;
}
$sql = "SHOW TABLES FROM $dbname";
$result = mysql_query($sql);
if (!$result) {
echo "No tables exist! \n";
echo 'MySQL Error: ' . mysql_error();
exit;
}
$tables = '';
while ($row = mysql_fetch_row($result)) {
$tables .="<option value='$row[0]'>$row[0]</option>";
}
mysql_free_result($result);
?>