11

投票を作成するための簡単なフォームを作成しているので、ユーザーが投票でより多くのオプションを必要とする場合に備えて、入力フィールドを追加できるようにしたいと思います。

フォームに新しい入力フィールドを追加するJavascriptコードを作成しましたが、フォームが送信されたときに動的に追加された入力フィールドが投稿されません（標準の送信ボタンを使用します）。

動的に追加されたフィールドをフォームの一部として投稿/認識させる方法はありますか？

<form id="myForm" method="post">  
  <input type="submit">
  <input type="text" name="poll[question]">  
  <input type="text" name="poll[option1]">  
  <input type="text" name="poll[option2]">  
</form>  
<a href="javascript:addOption();">Add option</a>  

<script>  
  var optionNumber = 3; //The first option to be added is number 3  
  function addOption() {  
    var theForm = document.getElementById("myForm");  
    var newOption = document.createElement("input");  
    newOption.name = "poll[option"+optionNumber+"]";  // poll[optionX]
    newOption.type = "text";
    theForm.appendChild(newOption);  
    optionNumber++;
  }  
</script>
4

4 に答える 4

13

同様の問題が発生していたサイトをデバッグしました。私にとっては、テーブルとフォームのタグが「間違った」順序であることが問題の原因であることが判明しました。

壊れた：

テーブル
  形

働く：

形
  テーブル

これはかなり重要なことを指摘しています。不正な形式の html を使用しても、ブラウザーは正常にレンダリングされ、フォームは正常に機能する可能性がありますが、適切にフォーマットされた html を使用しないと、このような問題が発生する可能性があります。たぶん、mod_tidy を使い始める必要があります。

于 2009-01-10T04:45:20.277 に答える
4

あなたのコードはそのままで問題なく動作します:

<?php
    print_r($_REQUEST)
?>
<html>
<body>

<form id="myForm" method="post"> 
    <input type="submit">
    <input type="text" name="poll[question]"> 
    <input type="text" name="poll[option1]"> 
    <input type="text" name="poll[option2]"> 
</form> 
<a href="javascript:addOption();">Add option</a> 

<script> 
    var optionNumber = 3; //The first option to be added is number 3 
    function addOption() { 
        var theForm = document.getElementById("myForm"); 
        var newOption = document.createElement("input"); 
        newOption.name = "poll[option"+optionNumber+"]"; // poll[optionX]
        newOption.type = "text";
        theForm.appendChild(newOption); 
        optionNumber++;
    } 
</script>
</body>
</html>

[オプションを追加] を 2 回クリックすると、

配列 ( [投票] => 配列 ( [質問] => [オプション1] => [オプション2] => [オプション3] => [オプション4] => ) )

于 2008-11-23T15:54:16.603 に答える
2

ここで間違いを犯していませんか？

あなたのコードを新しいページにコピーし、ASP.NET ページのコード ビハインドに以下を追加しました (どのフレームワークでも動作するはずです)。

protected void Page_Load(object sender, EventArgs e)
{
    foreach (string p in this.Request.Params.Keys) {
        if (p.StartsWith("poll")) {
            Response.Write(p + "&nbsp;&nbsp;" + this.Request.Params[p] + "<br />");
        }
    }
}

フィールドを追加し、テスト値を入力したところ、サーバーにポストされたすべての動的入力フィールドが出力に明確に表示されました。

出力は次のとおりです。

poll[question]  test1
poll[option1]  test2
poll[option2]  test3
poll[option3]  test4
poll[option4]  test5
poll[option5]  test6
poll[option6]  test7
于 2008-11-23T15:31:33.543 に答える
0

JavaScript関数を使用していつでも自分でフォームをシリアル化し、それを送信できます（AJAXまたはgetリクエストなどを使用して）。
http://malsup.com/jquery/form/comp/

于 2008-11-23T15:28:50.007 に答える