Javascript 提交数据时将数据保存在3个HTML表单中

我有3个HTML表单（我必须有3个单独的表单）

每个表格包括以下内容：

企业名称文本（输入）-表格1

主要类别（下拉菜单）-表格2

二级分类（下拉菜单）-表格3

随着主要类别的更改，次要类别也将更改。这个很好用

注释的作用是企业名称文本。更改主要或次要类别时，输入文件中的值将丢失

表格2和3“使用javascript提交，如下所示”——

echo '<select name="primary_category" size = "7" onChange="document.getElementById(\'CatForm1\').submit();"> ';

echo'；

及

echo'；

企业名称html表单如下所示：

echo '<form method="post" id="CatForm0">';

?>
<input id="business_name" name="business_name" tabindex="auto" value="
<?php if(isset($_POST['business_name'])) { echo ($_SESSION['business_name']); }?>" type="text" />

<?php 
echo '</form>';

echo'；
?>
这里的代码未经测试，可能需要进行大量修改才能适用于您的应用程序。但这应该足以说明我建议的方向：
在我看来，有两种选择：

A）创建一个表单。然后使用javascript更改表单标记的
action
属性

document.getElementById("CatForm0").action = "newpage.php";

取决于您要提交到的页面。如果在PHP脚本中引用的表单名称类似于
$\u POST[“name”]
，那么提交时附带的额外值将被忽略。然后，您可以使用表单字段中的值，如
您可能需要通过AJAX提交，而不是使用
submit（）
。在大多数（所有？）浏览器中，
submit
会触发页面刷新。
document.getElementById("CatForm0").action = "newpage.php";

<?php
echo '<form method="post" id="CatForm0">';
?>
<input id="business_name" name="business_name" tabindex="auto" value="
<?php if(isset($_POST['business_name'])) { echo ($_SESSION['business_name']); }?>" type="text"
onblur="CopyValues()" onkeyup="CopyValues()" onclick="CopyValues()" />

<?php 
echo '</form>';
?>

<form id="pri_cat">
    <input type="hidden" id="bus_name_1" name="bus_name_1" value="" />
</form>
<form id="second_cat">
    <input type="hidden" id="bus_name_2" name="bus_name_2" value="" />
</form>

<script type="text/javascript">
    function CopyValues() {
        var val = document.getElementById("business_name").value;
        document.getElementById("bus_name_1").value = val;
        document.getElementById("bus_name_2").value = val;
    }
</script> 

<?php
echo '<form method="post" id="CatForm0">';
?>
<input id="business_name" name="business_name" tabindex="auto" value="
<?php if(isset($_POST['business_name'])) { echo ($_SESSION['business_name']); }?>" type="text" />
<?php 
echo '</form>';
?>

<form id="CatForm1" action="thispage.php" method="post">
    <?php
    echo '<select id="primary_category" name="primary_category" size = "7" onchange="SubmitCat1();"> ';
    ?>
</form>

<form id="CatForm2" action="thispage.php" method="post">
    <?php
    echo '<select id="secondary_category" name="secondary_category" size = "7" onchange="SubmitCat2();"> ';
    ?>
</form>

<script type="text/javascript">
    function SubmitCat1() {
        var val = document.getElementById("primary_category").value;
        var xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

        xmlhttp.open("POST","thispage.php",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                //If you are returning JSON data from the post...
                var json = JSON.parse(xmlhttp.responseText);
                //then do something with the data

                //If you're returning HTML from the post, you can wrap the second form in 
                // a <div> and set the HTML
                var div = document.getElementById("form2_div").innerHtml = xmlhttp.responseText;
            }
        };
        xmlhttp.send("primary_category="+escape(val));
    }
</script>