2008-11-23 2 views
11

Я делаю простую форму для создания опросов, поэтому я хочу, чтобы добавить дополнительные поля ввода, если пользователь хочет больше вариантов в опросе.Отправить поля ввода формы, добавленные с помощью javascript

Я создал 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

Ваш код прекрасно работает как:

<?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 ([опрос] => Array ([вопрос] => [опция1] => [опция2] => [опция3] => [опция4] =>))

0

Вы всегда можете сериализовать форму самостоятельно с помощью яваскрипта функции, а затем представить, что (с помощью AJAX или запрос GET или что-то).
http://malsup.com/jquery/form/comp/

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 
12

Я только что отладил мой сайт, аналогичный вопрос. Для меня выяснилось, что проблема с таблицей и тегами формы в «неправильном» порядке вызвала проблему.

Сломанный:

 
table 
    form 

Рабочая:

 
form 
    table 

Это указывает на то, что-то очень важное. Браузер может выглядеть отлично, и форма может работать нормально, с искаженным html, но вы все равно можете сломать вещи, например, не имея должным образом отформатированный html. Может быть, я должен начать использовать mod_tidy!

+0

Я не понимал, что это может иметь такой эффект, это сработало для меня. Большое спасибо: D – jwbensley 2011-09-05 10:02:18

Смежные вопросы