Adding text from textbox to ul list in

Question

Recently i started working on a project, in this i have to add the text entered by user in a text box into a ul list in bootstrap. This script is in my head section

<script type="text/javascript">
        function addNames(){
            $( document ).ready(function() {
                $("#sendButton").click(function(){
                    var val = $('#textbox').val();
                    $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
                });
            });
        }
    </script>

This is in my body tag

<input type="text" id="textbox"></input>
<button type="button" class="btn btn-lg btn-success" id="sendButton" onclick=addNames()>add</button>
<ul class="list-group" id="ulList"></ul>

The problem i am facing is that i have to click the add button twice to get any output on the screen(ONLY THE FIRST TIME, then the script works properly on one click) but the output is not a desired output.

i get multiple entries of the text in the textbox, even on a single click. please help.
-thanx

Because click is firing two times. Don't mix JS and jQuery. Remove your function and it will work fine. — Kalpesh Singh, Mar 19 '16 at 08:19
It will not fire only for 2 times, it will grow, 1,2,3,4.... N number of clicks. — Rajaprabhu Aravindasamy, Mar 19 '16 at 08:21
@RajaprabhuAravindasamy, how to fix the problem you mentioned of ? — Bhagyesh Chaudhari, Mar 19 '16 at 08:28
@BhagyeshChaudhari [`Priya Jain`](http://stackoverflow.com/a/36099516/1209018)'s answer can help you. — Rajaprabhu Aravindasamy, Mar 19 '16 at 08:30

score 1 · Accepted Answer · answered Mar 19 '16 at 08:22

1

Alternative way (modify your function like this):

function addNames(){
    var val = $('#textbox').val();
    $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
}

onclick=addNames() attribute will just call that function

answered Mar 19 '16 at 08:22

Gene R

3,684
2
17
27

score 0 · Answer 2 · edited May 23 '17 at 12:13

Remove the addNames function it is wrapped in. Also, remove the reference to the addNames function in the html.

You should also be aware, for many reasons outlined here, that you should avoid using onclick in your html.

<input type="text" id="textbox"></input>
<button type="button" class="btn btn-lg btn-success" id="sendButton">add</button>
<ul class="list-group" id="ulList"></ul>

  $( document ).ready(function() {
    $("#sendButton").click(function(){
     var val = $('#textbox').val();
     $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
     });
  });

score 0 · Answer 3 · answered Mar 19 '16 at 08:21

You have used both jquery and javascript in your code. It can be simple done by:

<script type="text/javascript">
            $( document ).ready(function() {
                $("#sendButton").click(function(){
                    var val = $('#textbox').val();
                    $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
                });
            });
    </script> 

<input type="text" id="textbox"></input>
<button type="button" class="btn btn-lg btn-success" id="sendButton">add</button>
<ul class="list-group" id="ulList"></ul>

score 0 · Answer 4 · answered Mar 19 '16 at 08:21

Check this out

 <script type="text/javascript">
         $( document ).ready(function() {
                $("#sendButton").click(function(){
                    var val = $('#textbox').val();
                    $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
                });
            });
    </script>

score 0 · Answer 5 · answered Mar 19 '16 at 08:22

The Problem: On click on button, you were firing on function, that fires one more click event. That's why multiple entries.

The Solution: Remove that function and use only jQuery.

The Advise: Try to avoid mixing jQuery and JS.

 $( document ).ready(function() {
                $("#sendButton").click(function(){
                    var val = $('#textbox').val();
                    $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
                });
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textbox">
<button type="button" class="btn btn-lg btn-success" id="sendButton" onclick=addNames()>add</button>
<ul class="list-group" id="ulList"></ul>

score 0 · Answer 6 · answered Mar 19 '16 at 08:25

The issue here is that the first time the user clicks, you are registering an additional callback on click. Instead, you can do all your work on the existing callback you created: addNames.

Here is currently what is happening.

The user clicks on #sendButton
The function addNames is called.
addNames is going to register a click event on #sendButton (This is useless, since the addNames function is already the function that is called onclick! It is also unnecessary to use $(document).ready since by this time the DOM is guaranteed to already be ready.).
The element is not added because that function has not been triggered yet (Remember, all you did in the previous step was register the event).
The next time the user clicks, addNames will be called and so will your registered callback.

Here's the code that would work for you:

function addNames(){
  var val = $('#textbox').val();
  $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
}

Adding text from textbox to ul list in

6 Answers6