The text is not displaying when I add it from "append" using jQuery

Question

$(window).load(function(){
  var value = $( '#event-id' ).text();
  $(window).ready(function(){
    $('#send-event').click(function(){
      // alert('clicked');
      $( ".events" ).append( '<li class="event-item">' + value + '</li>' );
    })
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Add Event
  </button>

  <div class="row">
    <div class="col-md-3">
      <ul class="events">
        <li class="event-item"></li>
      </ul>
    </div>
  </div>
</div>
<!-- Modal  -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <input type="text" name="event-input" id="event-id">
      </div>
      <div class="modal-footer">
        <button type="button" id="send-event" class="btn btn-success" data-dismiss="modal">Add Event</button>
      </div>
    </div>
  </div>
</div>

Here's the code which I was developed for append the text from the input which is in modal, the problem is the li tag is appending but not the text in it.

I really not able to understand what mistake I did, can any one explain what mistake am doing.

Here's the Fiddle link.

`$(window).ready` is pointless within a `$(window).load` callback (and not the way `ready` is documented to work) — T.J. Crowder, Jul 15 '16 at 15:18
whats the diff. fbtween `load` and `ready` , `window` , `document` ? @T.J.Crowder Thanks :) — Riot Zeast Captain, Jul 15 '16 at 15:25
http://api.jquery.com/load-event/, http://api.jquery.com/ready — T.J. Crowder, Jul 15 '16 at 15:33

Richard Hamilton · Accepted Answer · 2016-07-15T15:32:48.813

As mentioned in the other answer, you are working with an input element, so you should use val instead of text. However, that alone won't fix this because the variable is being defined outside of the function.

It should be inside the click function, so it's updated during every click event. To clear the input , simply set the value to n empty string.

$(window).load(function(){
  
  $(document).ready(function(){
    $('#send-event').click(function(){
       var value = $( '#event-id' ).val();
      $( ".events" ).append( '<li class="event-item">' + value + '</li>' );
      $("#event-id").val("");
    })
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Add Event
  </button>

  <div class="row">
    <div class="col-md-3">
      <ul class="events">
        <li class="event-item"></li>
      </ul>
    </div>
  </div>
</div>
<!-- Modal  -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <input type="text" name="event-input" id="event-id">
      </div>
      <div class="modal-footer">
        <button type="button" id="send-event" class="btn btn-success" data-dismiss="modal">Add Event</button>
      </div>
    </div>
  </div>
</div>

Thanks and thats worked, but I want to clear the `input` text after I appended, am not getting how to do it. Thanks @Richard Hamilton — Riot Zeast Captain, Jul 15 '16 at 15:28

score 2 · Answer 2 · edited Jul 15 '16 at 15:20

2

change

var value = $( '#event-id' ).text();

to

var value = $( '#event-id' ).val();

edited Jul 15 '16 at 15:20

Mohit Bhardwaj

9,650
3
37
64

answered Jul 15 '16 at 15:19

Stephan Sutter

400
2
7

1

While this is true, it won't fix the problem entirely, because the initial value of the text is empty. It needs to be updated on the click event – Richard Hamilton Jul 15 '16 at 15:23

score 1 · Answer 3 · answered Jul 15 '16 at 15:21

Because that $( '#event-id' ) will change between $('#send-event') clicks, you probably don't want to cache it's value — and it is its .val() you want, not the .text() — outside of the click handler. Otherwise, the $( '#event-id' ).val() will only ever be whatever it was when the page first loaded.

$(window).load(function(){
  
  $(window).ready(function(){
    $('#send-event').click(function(){
      var value = $( '#event-id' ).val();
      // alert('clicked');
      $( ".events" ).append( '<li class="event-item">' + value + '</li>' );
    })
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Add Event
  </button>

  <div class="row">
    <div class="col-md-3">
      <ul class="events">
        <li class="event-item"></li>
      </ul>
    </div>
  </div>
</div>
<!-- Modal  -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <input type="text" name="event-input" id="event-id">
      </div>
      <div class="modal-footer">
        <button type="button" id="send-event" class="btn btn-success" data-dismiss="modal">Add Event</button>
      </div>
    </div>
  </div>
</div>

`.val()` is specific to `` elements; it get/sets the `value` attribute of (usually) an `` element. `.text()` is used to get/set a text node _within_ an element… [this answer](http://stackoverflow.com/a/807908/5796134) goes a little deeper. — Ito Pizarro, Jul 15 '16 at 15:33

The text is not displaying when I add it from "append" using jQuery

3 Answers3