JavaScriptで追加されたフォーム入力フィールドを送信する

StackOverflow https://stackoverflow.com/questions/312605

  •  10-07-2019
  •  | 
  •  

質問

アンケートを作成するための単純なフォームを作成しているため、ユーザーがアンケートでさらにオプションを必要とする場合に備えて、追加の入力フィールドを追加できるようにします。

フォームに新しい入力フィールドを追加する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>
役に立ちましたか？

解決

あなたのコードはそのまま正常に動作します：

<?php
    print_r(
あなたのコードはそのまま正常に動作します：


<*>


「オプションを追加」を2回クリックすると、表示されます



 Array（[poll] =＆gt; Array（[question] =＆gt; [option1] =＆gt; [option2] =＆gt; [option3] =＆gt; [option4] =＆gt;））
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回クリックすると、表示されます

Array（[poll] =＆gt; Array（[question] =＆gt; [option1] =＆gt; [option2] =＆gt; [option3] =＆gt; [option4] =＆gt;））

他のヒント

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

壊れた：

table
  form

作業中：

form
  table

これは非常に重要なことを示しています。ブラウザーは正常にレンダリングされ、フォームは不正なhtmlで正常に動作する可能性がありますが、適切にフォーマットされたhtmlを持たないことにより、このような問題を解決できます。 mod_tidyの使用を開始する必要があるかもしれません。

ここで間違いを犯していないのですか？

新しいページにコードをコピーし、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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top