Jquery在不重新加载页面的情况下将项添加到列表中

Question

我很沮丧应该如何实现这一点，主要是因为我缺乏javascript知识。 这是我正在看的代码：

http://jsfiddle.net/spadez/VrGau/

我正在尝试做的是让用户可以在责任字段中键入添加“责任”，然后单击添加并将其显示在其上方的列表中。 用户最多可以执行10项职责。

结果看起来像这样：

**Responsibility List:**

 - Added responsibility 1
 - Added responsibilty 2

*responsibility field - add button*

任何人都可以解释如何做到这一点，似乎它必须涉及ajax。 我真的很感激一些信息，甚至是一个例子。

谢谢。

编辑：这里有一点澄清。 我希望将这些数据作为项目列表发送到服务器。 我已经看到了这个实现的例子，这是一个截图：

用户在文本框中键入内容，然后单击“添加”，然后它将显示在其上方的列表中。 此信息是提交给服务器的信息。

Answer 1

也许这样的事情？

http://jsfiddle.net/VrGau/10/

var $responsibilityInput = $('#responsibilityInput'),
    $responsibilityList = $('#responsibilityList'),
    $inputButton = $('#send'),
    rCounter = 0;

var addResponsibility = function () {
    if(rCounter < 10){
        var newVal = $responsibilityList.val()+$responsibilityInput.val();
        $responsibilityList.val(newVal+'\n');
        $responsibilityInput.val('');
    }
}

$inputButton.click(addResponsibility);

Answer 2

也许这个也可以帮助，这仅限于10个列表

var eachline='';
$("#send").click(function(){
   var lines = $('#Responsibilities').val().split('\n');
   var lines2 = $('#Overview').val().split('\n');
   if(lines2.length>10)return false;
   for(var i = 0;i < lines.length;i++){
      if(lines[i]!='' && i+lines2.length<11){
       eachline += '- Added ' + lines[i] + '\n';
      }    
   }
   $('#Overview').text(eachline);
   $('#Responsibilities').val('');  
});   

在这里试试http://jsfiddle.net/markipe/ZTuDJ/14/

Answer 3

为textarea字段添加id

<textarea rows="4" cols="50" placeholder="Responsibilities"  id="resplist"></textarea>Add responsibility<br />
<textarea rows="4" cols="50" placeholder="How to apply" id="inputresp"></textarea>

你需要Jquery。 使用此js代码

var i=0;
$("#send").click(addresp);
function addresp()
{
    if (i<10)
    {
        $("#resplist").val($("#resplist").val()+$("#inputresp").val()+'\n');
        $("#inputresp").val("");
        i++;
    }
}

http://jsfiddle.net/br0nsk1y/bDE9W/

Answer 4

这取决于您是否要将数据发布到服务器。 如果只在客户端，你可以这样做。

$("#send").on("click", function(event){
    if($("#list li").size() < 10){
        $("#list").append("<li>" + $("#responsibilities").val() + "</li>");
    }
});

http://jsfiddle.net/VrGau/7/