CODEWITHSUNDEEP
javascriptjqueryajaxformsuser-interface
Jimmy
Jimmy

Reputation: 12487

Jquery adding items to a list without reloading page

I'm pretty stuck on how this should be achieved, mostly down to my lack of javascript knowledge. This is the code I'm looking at:

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

What I'm trying to do is have it so a user can type add a "responsibility" in the responsibility field, then click add and have it appear in a list above it. The user can do this for up to 10 responsibilities.

The result would look something like this:

**Responsibility List:**

 - Added responsibility 1
 - Added responsibilty 2

*responsibility field - add button*

Can anyone explain how this should be done, it seems like it would have to involve ajax. I would really appreciate some more information or even an example.

Thank you.

EDIT: Here is a little bit more clarification. I want this data to be sent to the server as a list of items. I have seen examples of this being implemented, and here is a screenshot:enter image description here

The user types in something in the text box, then clicks "add" and then it appears in a list above it. This information is what is submitted to the server.

Upvotes: 0

Views: 1909

Answers (4)

Markipe
Markipe

Reputation: 606

Maybe this one can help also, this limits only 10 list

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('');  
});

Try it here http://jsfiddle.net/markipe/ZTuDJ/14/

Upvotes: 1

AntouanK
AntouanK

Reputation: 4978

Something like that maybe?

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

Upvotes: 1

Johnny Ha
Johnny Ha

Reputation: 633

It depends on if you want to post data to the server or not. If only in the client side you can do like this.

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

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

Upvotes: 0

bronskiy
bronskiy

Reputation: 1

Add id for textarea fields 

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

You need Jquery. Use this js code

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/

Upvotes: 0

Related Questions