Question

使用javascript添加额外字段后，不会通过php中的post方法发送额外的字段值。在添加基本5个字段的代码中，rest是用户可以在必要时添加的额外字段

代码如下：

  <script language="javascript">
  var i = 11;
  function changeIt()
  {

  my_div.innerHTML = my_div.innerHTML +"<tr><td> <input id='item"+i+"' name='item"+i+"' type='text' maxlength='255' value=''/></td><td><input id='kgorp"+i+"' name='kgorp"+i+"' type='text' maxlength='3' value=''/></td><br/></tr>";
  i++;
  }
  </script>
  <body>
     Please enther the grocery items
   <table>
  <tr>
  <th> Item name</th><th> kg/No of packet</th>
  </tr>
  <form  method="post" action="gl.php">
<tr> <td><input id="item1" name="item1" type="text" maxlength="255" value=""/></td><td><input id="kgorp1" name="kgorp1" type="text" maxlength="3" value=""/></td></tr>
<tr> <td><input id="item2" name="item2" type="text" maxlength="255" value=""/></td><td><input id="kgorp2" name="kgorp2" type="text" maxlength="3" value=""/></td></tr>
<tr> <td> <input id="item3" name="item3" type="text" maxlength="255" value=""/></td><td><input id="kgorp3" name="kgorp3" type="text" maxlength="3" value=""/></td></tr>
<tr> <td> <input id="item4" name="item4" type="text" maxlength="255" value=""/></td><td><input id="kgorp4" name="kgorp4" type="text" maxlength="3" value=""/></td></tr>
<tr> <td> <input id="item5" name="item5" type="text" maxlength="255" value=""/></td><td><input id="kgorp5" name="kgorp5" type="text" maxlength="3" value=""/></td></tr>
<tr id="my_div"></tr>
<tr> <td><input id="saveForm" type="submit" value="Submit List" /></td><td><input id="addtxt" type="button" name="addtxt" value="Add more items" onClick="changeIt()" /></td> </tr>
</form>
   </table>
   </body>

用于检索通过post方法发送的数据的php代码，

$i=1;
foreach ($_POST as $param_value) {
  if ( empty( $param_value ) ) { 

  } else {
    echo "<td>$param_value</td>";
    if ( ( $i % 2 ) == 0 ) {
      echo "</tr> <tr>";
    }//echo $i;
  }
  $i++;
}

Answer 1

问题在于如何在HTML DOM中放置和解析表单标记。将标签上的表单标记放在文档后面。

<body>
  Please enther the grocery items
  <form method="post" action="gl.php">

然后将javascript更改为：

function changeIt()
{
    var child = document.createElement('td');
    child.innerHTML = "<input id='item"+i+"' name='item"+i+"' type='text' maxlength='255' value=''/><input id='kgorp"+i+"' name='kgorp"+i+"' type='text' maxlength='3' value=''/>";
    document.getElementById("my_div").appendChild(child);
    i++;
}

执行print_r（$ _ POST）时应该得到的是：

Array ( [item1] => [kgorp1] => [item2] => [kgorp2] => [item3] => [kgorp3] => [item4] => [kgorp4] => [item5] => [kgorp5] => [item6] => [kgorp6] => [item7] => [kgorp7] => [item8] => [kgorp8] => [item9] => [kgorp9] => [item10] => [kgorp10] => [item11] => [kgorp11] => )

更好的解决方案是摆脱表格和tr / td标签，并使用表格的div / spans（它是一种更好的编码方式，老实说:) :)

Answer 2

for(i=0;i<=11;i++) {
    document.getElementById("my_div").innerHTML = document.getElementById("my_div").innerHTML +"<tr>
    <td> <input id='item"+i+"' name='item"+i+"' type='text' maxlength='255' value=''/></td>
    <td><input id='kgorp"+i+"' name='kgorp"+i+"' type='text' maxlength='3' value=''/></td>
    <br/>
    </tr>";
 }

Demo

Answer 3

我没有看到my_div变量的初始化位置。你可以在你的changeIt函数的开头做：

var my_div = document.getElementById('my_div')

然后是另一个问题：不要将这个变量命名为my_div，而它实际上是一个tr标签。

而且：在这个tr标签中，你的changeIt函数将包含包含另一个tr的HTML，因此你最终会得到错误的HTML。建议：不要使用表格，而是使用div或li标签作为此类列表。

Answer 4

不要在函数中使用它，只需按照以下方式将其内联到表单中，

document.write('<input type="hidden" name="whatever" value="'+i+'">');

并根据您的需要进行必要的调整。

要在post方法中发送的额外添加字段值

4 个答案: