CODEWITHSUNDEEP
javascripthtml
bookthief
bookthief

Reputation: 2451

adding user input to a list of text items on a html page

I have a textbox for user input with a submit button. I would like for the user to be able to put in some input, and have the input appear in a list underneath the input box, maybe into a table using some kind of javascript function. To me this seems like a fairly simple concept but I can't find any tutorials that will show me how to do it, can anyone recommend any or tell me what the best, most attractive looking approach to this would be?

EDIT- Here's what I've tried:

<html>
<head>

</head>
<body>



<script type="text/javascript">

document.getElementById("add").onClick = function() {

    var text = document.getElementById("idea").value;

    var li = "<li>" + text + </li>;

    document.getElementById("list").appendChild(li);
}

</script>

<input type='text' id = 'idea' />
<input type='button' value = 'add to list' id = 'add'>

<ul id= 'list'> 


  <li> <b>Topics</b></li> 

    </ul>



</body>
</html>

Upvotes: 2

Views: 69243

Answers (5)

Deva GAikwad
Deva GAikwad

Reputation: 76

<input type='text' id='idea'>
<input type="button" id="add" value="Add New">
<script>document.getElementById("add").onclick  = function() {

    var node = document.createElement("Li");
    var text = document.getElementById("idea").value; 
    var textnode=document.createTextNode(text);
    node.appendChild(textnode);
    document.getElementById("list").appendChild(node);
}
</script>
<ul id='list'></ul>

Upvotes: 0

Istvan Dembrovszky
Istvan Dembrovszky

Reputation: 99

I think it work but not changing li style: 

document.getElementById('add').onclick = function(){
  var text = document.getElementById('idea').value;     
  var node = document.createElement("li");    
  var textNode = document.createTextNode(text);    
  node.appendChild(textNode);     
  document.getElementById('list').appendChild(node);
};

Upvotes: -1

Santosh
Santosh

Reputation: 3807

Below is the basic JavaScript code that will do the job.

document.getElementById("add").onclick  = function() {

    var node = document.createElement("Li");
    var text = document.getElementById("user_input").value; 
    var textnode=document.createTextNode(text);
    node.appendChild(textnode);
    document.getElementById("list_item").appendChild(node);
}

HTML

<input type="button" id="add" value="Add New">
<ol id="list_item">

</ol>

Upvotes: 3

Bn Mk
Bn Mk

Reputation: 164

here is a basic jquery implementation:

(function($){
    $('#myform').submit(function(e){
        var val = $('#in').val();
        $('ul.list').append('<li>' + val + '</li>');
        e.preventDefault();
    });
})(jQuery);

http://jsfiddle.net/MW8HS/

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

I can give a quick run through of what you'll need. First, you'll want your basic text input with an ID:

<input type='text' id='idea' />

And obviously a button to add to the list:

<input type='button' value='add to list' id='add' />

And a list to be adding to:

<ul id='list'></ul>

Now for the fun JS, see the play-by-play in the comments

//Defining a listener for our button, specifically, an onclick handler
document.getElementById("add").onclick = function() {
    //First things first, we need our text:
    var text = document.getElementById("idea").value; //.value gets input values

    //Now construct a quick list element
    var li = "<li>" + text + "</li>";

    //Now use appendChild and add it to the list!
    document.getElementById("list").appendChild(li);
}

Upvotes: 5

Related Questions