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

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 に答える
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

問題は、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 に答える