Submit form input fields added with javascript

I'm making a simple form to create polls, therefore I want the possibility to add additional input fields in case the user wants more options in the poll.

I've made Javascript code that adds a new input field to the form, but the dynamically added input fields are not posted when the form is submitted (I use a standard submit button).

Is there some way to get the dynamically added fields posted/recognized as a part of the form?

<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>

标签： javascript form-submit

4条回答

叛逆

2楼-- · 2019-01-19 12:37

Your code works fine as is:

<?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>

click Add Option twice and you get

Array ( [poll] => Array ( [question] => [option1] => [option2] => [option3] => [option4] => ) )

0人赞添加讨论(0) 举报

Viruses.

3楼-- · 2019-01-19 12:43

I just debugged my site where I was having a similar issue. For me it turned out that having my table and form tags in the "wrong" order caused the issue.

Broken:

table
  form

Working:

form
  table

This points out something pretty important. The browser may render fine, and the form may work fine, with malformed html, but you can still break things, like this, by having not having properly formatted html. Maybe I should start using mod_tidy!

0人赞添加讨论(0) 举报

看我几分像从前

4楼-- · 2019-01-19 12:45

Are you sure you are not making any mistake here ?

I copied your code in a new page and added the following to the code behind of an ASP.NET page (it should work on any framework):

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 />");
        }
    }
}

I added additional fields and entered test values, the output clearly shows all dynamic input fields posted back to the server.

Here is the output:

poll[question]  test1
poll[option1]  test2
poll[option2]  test3
poll[option3]  test4
poll[option4]  test5
poll[option5]  test6
poll[option6]  test7

0人赞添加讨论(0) 举报

ら.Afraid

5楼-- · 2019-01-19 12:47

You can always serialize the form yourself using a javascript function and then submit that (using AJAX or a get request or something).
http://malsup.com/jquery/form/comp/

0人赞添加讨论(0) 举报

Submit form input fields added with javascript

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间