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


Keep data in 3 HTML forms while data is submit

我有3个HTML表单(这是强制性的,因为我的目的有3个单独的表单)

每个表单由以下内容组成:

  1. 企业名称文本(输入)-表格1
  2. 主要类别(下拉菜单)-表格2
  3. 二级类别(下拉菜单)-表格3

当"主分类"发生变化时,"从分类"也会发生变化。

正在工作的是业务名称文本。每当我更改Primary或secondary类别时,输入文件中的值就会丢失。

表单2和表单3"使用如下javascript提交"-

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

echo '<select name="secondary_category" size = "7" onChange="document.getElementById(''CatForm2'').submit();"> ';

企业名称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>';

每当更改Primary或secondary类别时,输入文件中的值就会丢失。我希望将值保留在business_name输入框中。

这里的代码未经测试,可能需要进行大量调整才能适用于您的应用程序。但它应该足以表明我建议的方向:我看到有几个选项:

A)创建一个表单。然后使用javascript更改表单标签

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

取决于您要提交到哪个页面。如果在PHP脚本中,您引用的表单名称如$_POST["name"],那么提交的附加值将被忽略。然后,您可以使用表单字段中的值,如<input type="text" name="name" value="<?php echo $_POST["name"]; ?>" />,将值写回字段。

B)使用业务名称框上的一些事件将用户输入到业务名称字段中的任何内容复制到其他表单中的隐藏字段中。

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

javascript函数

<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中,可以将隐藏字段的值设置为$_SESSION['business_name']

C)使用AJAX提交表单并使用返回值填充另一个表单。

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

这将需要为您想要提交的每个表单完成。最后一条路线是评论中建议的。这也是MVC类型系统通常使用的路径。通过AJAX提交表单,然后处理返回的数据是一个常见的任务。