1

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

代码如下：

  <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++;
}
4

4 回答 4

0

问题在于如何在 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 标签并使用 divs/spans 来处理表单（它是一种更好的编码方式，老实说:)）

于 2013-02-27T10:43:38.007 回答
0 
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>";
 }

演示

于 2013-02-27T10:45:16.003 回答
0

我看不到 my_div 变量的初始化位置。您可以在 changeIt 函数的开头执行以下操作：

var my_div = document.getElementById('my_div')

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

更进一步：在这个 tr 标记中，你的 changeIt 函数将包含包含另一个 tr 的 HTML，所以你最终会得到错误的 HTML。一个建议：不要使用表格，而是使用 div 或 li 标签来进行此类列表。

于 2013-02-27T10:47:27.210 回答
0

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

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

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

于 2013-02-27T10:47:59.217 回答