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($_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>

옵션 추가를 두 번 클릭하면 얻을 수 있습니다

Array ([poll] => array ([Question] => [옵션 1] => [옵션 2] => [옵션 3] => [옵션 4] =>)))

다른 팁

방금 비슷한 문제가있는 사이트를 디버깅했습니다. 나에게는 "잘못된"순서로 내 테이블과 태그를 양식하는 것이 문제를 일으킨다는 것이 밝혀졌습니다.

고장난:

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