Php 在表格的中间添加一个额外的嵌套表单的最佳方法

我有一个web应用程序，主要由一个包含信息的大表单组成。表单分为多个选项卡，以使用户更易于阅读：

<form>
<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
  </ul>
  <div id="tab1">A big table with a lot of input rows</div>
  <div id="tab2">A big table with a lot of input rows</div>
</div>
</form>

包含大量输入行的大表
包含大量输入行的大表

表单被动态扩展（额外的行被添加到表中）。 表单每10秒序列化一次，并与服务器同步

现在，我想在其中一个选项卡上添加一个交互式表单：当用户在字段中输入名称时，该信息将发送到服务器，并返回与该名称关联的id。此id用作某些动态添加的表单字段的标识符

此类页面的快速草图如下所示：

<form action="bigform.php">
<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
  </ul>
  <div id="tab1">A big table with a lot of input rows</div>
  <div id="tab2">
    <div class="associatedinfo">
    <p>Information for Joe</p>
    <ul>
      <li><input name="associated[26][]" /></li>
      <li><input name="associated[26][]" /></li>
    </ul>
    </div>

    <div class="associatedinfo">
    <p>Information for Jill</p>
    <ul>
      <li><input name="associated[12][]" /></li>
      <li><input name="associated[12][]" /></li>
    </ul>
    </div>
    <div id="newperson">
      <form action="newform.php">
        <p>Add another person:</p> 
        <input name="extra" /><input type="submit" value="Add" />
      </form>
    </div>
  </div>
</div>
</form>

包含大量输入行的大表
给乔的信息





给吉尔的信息





添加另一个人：

上述方法无效：HTML中不允许嵌套表单。但是，我确实需要在该选项卡上显示表单：它是该页面功能的一部分。我还需要一个单独表单的行为：当用户在表单字段中点击return时，按下“Add”submit按钮，并在部分表单上触发提交操作

---

解决此问题的最佳方法是什么？

您可以使用ajax或在第一个表单之外创建另一个表单，并使用绝对DIV层对其进行定位

使用javascript很容易读取层位置。首先，您将创建一个具有预定义高度的占位符，然后可以在占位符上方显示表单

<form>

...
  <div style='height: 300px;' class='placeholder'> ... </div>
</form>

<form>...<form>

...
... 
...

---

显示第二个表单，其中.placeholder是

您可以做的一件事是不将“Add”输入元素的类型设置为“submit”，而是将其设置为“button”，并添加一个用于注册单击处理程序的

id

属性：

<!-- ... -->
    <div id="newperson">
      <p>Add another person:</p> 
      <input id="extra_input" name="extra" /><input id="add_button" type="button" value="Add" />
    </div>
<!-- ... -->

// This is jQuery code, but all JS frameworks that I have seen have a similar feature to register a click handler on a DOM element referenced by ID.
$("#add_button").click(function (event) {
    addAnotherPerson();
    $("#extra_input").val(""); // reset the value
});

您还需要在“额外”文本输入中添加按键处理程序，以便在用户按下Enter键时执行相同的操作：

$("#extra_input").keydown(function (event) {
    if (event.keyCode == 0xa || event.keyCode == 0xd) {
        addAnotherPerson();
        $("#extra_input").val(""); // reset the value
    }
});

确保将属性

autocomplete=“off”

添加到“额外”文本输入中

addAnotherPerson

函数可以发送一个异步POST请求，其中包含“extra”文本框中的值，如果合适，随后会更新DOM

编辑：如果您还想支持禁用Javascript的用户，那么通过向每个提交按钮添加

名称

属性，每个按钮都有一个唯一的

名称

属性值，您的服务器端应用程序将能够告诉用户单击了哪个按钮

以以下代码为例：

---

为什么不在一个php代码中嵌套表单对象并处理所有操作

# have this form appended to the DOM via ajax/js when a link is clicked
<div id="newperson">
  <p>Add another person:</p> 
  <input type="text" name="associated[new][]" />
</div>

---

您可以将添加表单移动到父表单之外，并使用CSS隐藏它，然后，正如另一张海报所说的，用一个具有正确id的按钮替换添加表单的提交按钮，最后，在输入上钩住onkeypress和onclick按钮以模拟实际添加表单的提交

<form action="bigform.php">

    ....

    <div id="newperson">
      <p>Add another person:</p> 
      <input name="extra" /><button value="Add"/>
    </div>
  </div>
</div>
</form>
<div style='display:none;'>
    <form action="newform.php" id='add_person_form'>
      <input id='add_person_name' />
      <input type="submit" id='add_person_submit' />
    </form>
</div>

<script>
$('#newperson input').keyup(function(e) {
    if(e.keyCode == 13) submitNewPersonForm();
});
$('#newperson button').click(function(e) {
    submitNewPersonForm();
});

function submitNewPersonForm() {
    // copy the content from the placeholder form
    $('#add_person_name').val($("#newperson input").val());
    // submit this form
    $("#add_person_form").submit();
}
</script>

....
添加另一个人：

$（“#newperson输入”）.keyup（函数（e）{
如果（e.keyCode==13）提交newpersonform（）；
});
$（“#newperson按钮”）。单击（函数（e）{
submitNewPersonForm（）；
});
函数submitNewPersonForm（）{
//从占位符表单复制内容
$（'#add#person_name'）.val（$（“#newperson input”）.val（））；
//提交此表格
$（“#添加个人表格”）.submit（）；
}

据我所知，这应该可以在保留原有功能的同时满足您的所有需求

---

注意：在

#add#person\u表单

上并不真正需要提交按钮，我只是把它放在那里，这样你就可以很容易地看到我将你的表单“移动”到了哪里。

像下面这样的东西应该可以做到这一点

如果禁用了JavaScript，则需要检测用户是否按了“添加”

submitButton

：

$_POST["submitButton"] == "Add"


    <!-- other stuff goes here -->

    <div id="newperson">
        <p>Add another person:</p> 
        <input name="extra" id="extra" /><input name="submitButton" id="addPerson" type="submit" value="Add" />
    </div>
  </div>
</div>
</form>
<script>
    var extra = $("#extra"),
        addPerson = $("#addPerson").click(function(e){
        // val would be the new person's name, e.g., "David"
        var val = extra.val();
        // you will want to give the user some AJAXy feedback here.

        $.post(this.form.action, {"extra": val}, function(response){
            // rest the extra div.
            extra.val("");

            /* 'response' could look like:                             */
            // <div class="associatedinfo">
            //      <p>Information for David</p>
            //      <ul>
            //        <li><input name="associated[13][]" /></li>
            //        <li><input name="associated[13][]" /></li>
            //      </ul>
            //   </div>
            $(response).insertBefore("#newperson");

            // or 'response' could be json data, or whatever. I have a feeling
            // you know enough about jQuery to handle the response-data.  :-)

        });
        // prevent it from bubbling up.
        e.preventDefault();
    });

    extra.keydown(function(e){
        // submit the new person's name via ajax if enter is pressed.
        if(e.keyCode === 13){
            addPerson.click();
            e.preventDefault();
        }
    });
</script>

$\u POST[“提交按钮”]=“添加”
添加另一个人：

var额外=$（“#额外”），
addPerson=$（“#addPerson”）。单击（函数（e）{
//val将是新人的名字，例如“David”
var val=extra.val（）；
//您将希望在此处向用户提供一些AJAXy反馈。
$.post（this.form.action，{“extra”：val}，函数（response）{
//剩下的部分。
额外增值（“”）；
/*“响应”可能类似于：*/
// 
//大卫的信息

//

//

//

//
//   
$（回复）。在（#newperson）之前插入；
//或者“response”可以是json数据，或者别的什么
//您对jQuery的了解足以处理响应数据。：-）
});
//防止它冒泡。
e、 预防默认值（）；
});
额外按键功能（e）{
//如果按enter键，则通过ajax提交新人的姓名。
如果（如keyCode===13）{
addPerson.click（）；
e、 预防默认值（）；
}
});

HTML应该是语义的，并且应该首先考虑它，也就是说，它应该有一个清晰的结构和含义，而不需要理解javascript在上面是什么。就像

应该只包含

元素一样，

应该只有一个目的。使用javascript通过检索动态数据来增强表单是可以的，但是如果使用了额外的HTTP POST（修改服务器上数据的类型），那么这将是错误的

# have this form appended to the DOM via ajax/js when a link is clicked
<div id="newperson">
  <p>Add another person:</p> 
  <input type="text" name="associated[new][]" />
</div>

foreach($_POST['associated'] as $obj) {
  if($obj == "new")
    // create a new record
  else
    // do your other processing
}

<form action="bigform.php">

    ....

    <div id="newperson">
      <p>Add another person:</p> 
      <input name="extra" /><button value="Add"/>
    </div>
  </div>
</div>
</form>
<div style='display:none;'>
    <form action="newform.php" id='add_person_form'>
      <input id='add_person_name' />
      <input type="submit" id='add_person_submit' />
    </form>
</div>

<script>
$('#newperson input').keyup(function(e) {
    if(e.keyCode == 13) submitNewPersonForm();
});
$('#newperson button').click(function(e) {
    submitNewPersonForm();
});

function submitNewPersonForm() {
    // copy the content from the placeholder form
    $('#add_person_name').val($("#newperson input").val());
    // submit this form
    $("#add_person_form").submit();
}
</script>

$_POST["submitButton"] == "Add"


    <!-- other stuff goes here -->

    <div id="newperson">
        <p>Add another person:</p> 
        <input name="extra" id="extra" /><input name="submitButton" id="addPerson" type="submit" value="Add" />
    </div>
  </div>
</div>
</form>
<script>
    var extra = $("#extra"),
        addPerson = $("#addPerson").click(function(e){
        // val would be the new person's name, e.g., "David"
        var val = extra.val();
        // you will want to give the user some AJAXy feedback here.

        $.post(this.form.action, {"extra": val}, function(response){
            // rest the extra div.
            extra.val("");

            /* 'response' could look like:                             */
            // <div class="associatedinfo">
            //      <p>Information for David</p>
            //      <ul>
            //        <li><input name="associated[13][]" /></li>
            //        <li><input name="associated[13][]" /></li>
            //      </ul>
            //   </div>
            $(response).insertBefore("#newperson");

            // or 'response' could be json data, or whatever. I have a feeling
            // you know enough about jQuery to handle the response-data.  :-)

        });
        // prevent it from bubbling up.
        e.preventDefault();
    });

    extra.keydown(function(e){
        // submit the new person's name via ajax if enter is pressed.
        if(e.keyCode === 13){
            addPerson.click();
            e.preventDefault();
        }
    });
</script>

<form id="bigform" action="bigform.php">
    <!-- Tabs here -->
</form>
<form id="newperson" action="newform.php">
   <input name="extra">
   <button type="submit" value="Add">
   <!-- Note also the use of <button> instead of <input> -->
</form>

<form id="bigform" action="bigform.php">
    <!-- Tabs here -->
    <fieldset id="newpersonProxy">
        <input id="extra">
        <button type="button" value="Add">
    </fieldset>
</form>