jquery - 单击按钮在文本框中添加多个值

Question

<tr>
        <td><font face="Arial">Answers</font></td>
        <td>
        <div id="answers" >
            <input type="text" name="T2" size="20" id="answer" class="selector">
        </div>
        <input type="button" value="+" name="B3" id="btnAnswer" onclick="addAnswers()">
        (click on this button will create another field so you can type content
        for the other answer, this can be done using jquery)<br>

        <input type="checkbox" name="c" value="1">Allow this answer to be free text

        </td>
    </tr>      

函数 addAnswers(){

$('#answers').append('<p class="\selector\">' + $('#answer').val() + '</p>'); } 

现在我想获取答案的这些值以将其发送到服务器..答案的数量可能是 1 到 n...

Answer 1

我必须使用 jquery 添加另一个答案...有人可以帮忙吗？

签出：document.createElement在普通的 javascript 中：https ://developer.mozilla.org/en-US/docs/DOM/document.createElement

并且$(target).append(element)：http ://api.jquery.com/append/

Answer 2

根据您上面的代码，请检查：

html

<tr>
<td><font face="Arial">Answers</font></td>
<td><input name="T2" size="20" type="text" id="answer">
<input value="+" name="B3" type="button" id="btnAnswer">
(click on this button will create another field so you can type content
for the other answer, this can be done using jquery)<br>
<input name="c" value="1" type="checkbox">Allow this answer to be free text

jQuery

  $(function(){
    $('#btnAnswer').on('click', function(){
      $('#answers').append('<p>' + $('#answer').val() + '</p>');
    });
  });

jsFiddle在这里，请检查。

- 编辑 -

很好提醒，onclick它不再需要了，考虑到jQuery正在做“肮脏”的工作。

Answer 3

使用查询，获取您的 td 的第一个输入，并清除其数据。然后，您可以使用 $.append 将其添加到标记中您想要的位置。

您还需要为每个输入名称创建一个数字增量（例如名称是 t1、t2、t3 等），以便可以通过服务器端有效地解析它们。

修订

这是 HTML 标记，稍作修改：

<table>
<tr>
        <td><font face="Arial">Answers</font></td>
        <td>
        <div id="answers" >
            <input type="text" name="T1" size="20" class="answer selector">
        </div>
        <input type="button" value="+" name="B3" id="btnAnswer">
        (click on this button will create another field so you can type content
        for the other answer, this can be done using jquery)<br>
        </td>
    </tr>  
</table>

使用 javascript：

$('#btnAnswer').click(function(){
    var new_input = $('input.answer:first').clone();     
    new_input.attr('name', new_input.attr('name').substr(0, new_input.attr('name').length-1) + ($('#answers').children('input').length + 1));
    $('#answers').append(new_input);
});

javascript 克隆第一个输入并增加其名称。

在服务器端，您需要递增发布的变量并单独检查它们是否已设置；如果未设置，则退出循环。

jsfiddle在这里。