您的位置: 首页  >  技术问答  >  如何使用AJAX通过一个提交按钮提交3个表单

如何使用AJAX通过一个提交按钮提交3个表单

分类: 技术问答 • 2022-07-14 18:29:54
问题描述：

我正在创建一个网上商店，我有三种形式(使用2个不同的php文件). 第一种形式-基于文本的用户填写标题，价格和价格；产品说明 第二种形式-上传新产品的图片 第三种形式-从数据库中选择一个类别(表)以将记录添加到给定的表中

I am creating an onlineshop and I have three forms( that use 2 different php files ). First form - text based for the user to fill in the Title, Price & Description of the product Second form- uploading an image for the new product Third form - choosing a category (table) from the database to add the record to the given table

我将如何使用AJAX做到这一点? php和AJAX中的新功能，请帮助我修改代码.

How will I do that using AJAX? new in php and AJAX please help me how to modify my code.

第一种形式

<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>

insert.php(用于第一种形式)

insert.php(used by 1st form)

<?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>

dropdown.php(用于第3种形式)

dropdown.php(used by 3rd form)

<?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);
?>

答

我建议对代码进行一些重组-而不是尝试从1张贴到三个单独的页面，或者尝试将步骤组合成一个页面，或者最终将它们分为3.

What I would suggest is some reorganization of your code - rather than trying to post to three separate pages from 1, perhaps try either combining the steps into one, or definitively separating them into 3.

例如:

(分成3个):

第一页，您填写了产品的基本信息，将其提交并插入到数据库中，然后进入第2步(通过包含特定产品ID"或类似内容的隐藏的POST字段)，您从数据库中选择一个类别.当您从那里提交时，它将被插入到数据库中，并进入第3步/第3步，在该页面上载图像.提交之后，您就完成了！

Page one, you fill out basic information of the product, which gets submitted and inserted into the database, then you are brought to page/step 2 (via hidden POST'd fields containing specific "product ID" or something), where you choose a category from the database. When you submit from there, it is inserted into the database, and you are brought to page/step 3, where you upload an image. After submitting this, you're done!

-优点:较小的单个页面，更易于对其中的任何一个进行调整.

-Advantages: Smaller individual pages, easier to make adjustments to any one of them.

-缺点:难以更改会影响全部3页的内容，并且如果用户的互联网速度较慢，则可能会花费较长的时间来创建单个产品.

-Disadvantages: Difficult to change something that affects all 3 pages, and if the user has slow internet, can lead to it taking a long time to create a single product.

(组合):

所有信息都在一个页面上输入-类别选择，基本产品信息和文件上传.提交该页面将一口气处理所有信息.

All information is entered on a single page - category selection, basic product info, and file upload. Submitting that page will process ALL the information in one fell swoop.

-优点:更容易进行大的更改，所有信息都可以立即加载/提交，因此您最终不会在数据库中得到部分不完整的数据.

-Advantages: Easier to make large changes, all info is loaded/submitted at once so you won't end up with partial of incomplete data in your databases.

-缺点:在一页上填写大量信息，可能会使查找大量更改代码变得一件困难的事情.

-Disadvantages: Lots of information to fill out on one page, may make finding a single thing to change difficult with a large amount of code.

相关推荐