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

Question

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>

Also here's some related thread: [stackoverflow.com/questions/4214948/… there any method/way in javascript to add a child node to list element dynamically?), [stackoverflow.com/questions/17183713/… li element in ul using jquery) — megawac
– megawac, Commented Nov 11, 2013 at 14:04
You need to create node text. with createTextNode and create an element as well — Santosh
– Santosh, Commented Jan 4, 2017 at 11:10

tymeJV · Accepted Answer · 2013-11-11 14:07:34Z

5

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

answered Nov 11, 2013 at 14:07

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

bookthief Over a year ago

Thanks @tymeJV, that looks as though it'll do exactly what I need. Forgive the extreme newbie question, but how exactly do I use the javascript? Do I encase it in <script tags within the html?

tymeJV Over a year ago

Yep, you're going to want to do some intro JavaScript tutorials, this will explain how to implement this.

bookthief Over a year ago

Ok so I've been looking at tutorials and making attempts, but I cant seem to get it working- will you have a look at the edit above and see if you can point me in the right direction?

tymeJV Over a year ago

Dont capitalize the "C" in onClick, it should be onclick -- Also, put your script after your HTML. So you'll have <body>content...<script></script></body>

bookthief Over a year ago

It still doesn't work, any other ideas as to what I might be doing wrong?

|

Santosh · Accepted Answer · 2017-01-04 11:00:14Z

3

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>

answered Jan 4, 2017 at 11:00

Santosh

3,8875 gold badges47 silver badges90 bronze badges

1 Comment

user2225804 Over a year ago

Upvoted because unlike the accepted answer, this does work, except that you need to add <input type='text' id='user_input' /> so the user can input text. Drop the Javascript inside <script></script> tags, and you're good to go.

Bn Mk · Accepted Answer · 2013-11-12 13:16:58Z

1

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/

edited Nov 12, 2013 at 13:16

answered Nov 11, 2013 at 14:16

Bn Mk

1641 silver badge13 bronze badges

3 Comments

tymeJV Over a year ago

No need to use a .find on an element with an ID.

bookthief Over a year ago

Is Jquery implemented the same way as javascript- ie between two script tags?

Bn Mk Over a year ago

you need to include the jQuery library - easiest from a CDN like so <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> in the head of your html, then you can access the jQuery $ object within your normal javascript. e.g include the library and then put the above code within script tags in the body of the page and it should work - check the fiddle for html markup

Deva GAikwad · Accepted Answer · 2019-12-14 07:02:14Z

0

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

answered Dec 14, 2019 at 7:02

Deva GAikwad

761 silver badge9 bronze badges

2 Comments

Deva GAikwad Over a year ago

just u need to call list after script

pensum Over a year ago

When giving an answer, you should at least explain why your code is solving OP's issue. This will help him understand and others that might have the same question too.

Community · Accepted Answer · 2018-12-24 07:27:39Z

-1

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

edited Dec 24, 2018 at 7:27

CommunityBot

11 silver badge

answered Mar 22, 2017 at 11:42

Istvan Dembrovszky

991 silver badge1 bronze badge

Collectives™ on Stack Overflow

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

5 Answers 5

6 Comments

1 Comment

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related