CODEWITHSUNDEEP
javascriptjqueryhtml
Jade Han
Jade Han

Reputation: 1285

how to get input text value in jquery

I want get input text value when I insert a value in input text

and when i click ADD IN BOOK LIST button jquery will append in booklist ul tag

html code

<form action="" method="POST">
    {% csrf_token %}
    <p>POST TITLE</p>
    <input type="text" name="title" placeholder="Insert title" required>

    <p>INSERT BOOK NAME</p>
    //user will input value this text box
    <input type="text" name="bookname" placeholder="book name">

    <input type='button' name="addlist" value="ADD IN BOOK LIST">

    <ul class="booklist">
    </ul>

    <input type="submit" id='button'>//create post button

</form>

I decide to using val() method and i testing using alert()

js code

(function(){
  //get  ADD IN BOOK LIST button
  //get bookname tagname
  var addlist_button = $('input[name=addlist]');
  var book_name = $('input[name=bookname]').val();

  addlist_button.on('click', function(event){
    if((book_name == "")||(book_name == null)){
      alert('fail');
    }
    else{
    alert(book_name);
    }
  });
})();

but jquery can't get text value

the val()method is only get value=""in tag inline.. but it is useless value

I want get client's valuable text please somebody help me

Upvotes: 3

Views: 11524

Answers (3)

nizzik
nizzik

Reputation: 826

This is because you have defined book_name before the event was triggered and at that time it was equal to "". 

(function(){
  //get  ADD IN BOOK LIST button
  //get bookname tagname
  var addlist_button = $('input[name=addlist]');


  addlist_button.on('click', function(event){
    var book_name = $('input[name=bookname]').val();

    if((book_name == "")||(book_name == null)){
      alert('fail');
    }
    else{
    alert(book_name);
    }
  });
})();

Upvotes: 1

Mohammad Akbari
Mohammad Akbari

Reputation: 4766

Get input value in click event as following:

(function(){
  //get  ADD IN BOOK LIST button
  //get bookname tagname
  var addlist_button = $('input[name=addlist]');


  addlist_button.on('click', function(event){
    var book_name = $('input[name=bookname]').val();

    if((book_name == "")||(book_name == null)){
      alert('fail');
    }
    else{
    alert(book_name);
    }
  });
})();

Upvotes: 1

Mosh Feu
Mosh Feu

Reputation: 29249

The problem is that you check the value of the input on page load but not when the user clicks on the button.

So the solution is to check it when user clicks on the button.

(function(){
  //get  ADD IN BOOK LIST button
  //get bookname tagname

var addlist_button = $('input[name=addlist]');
  addlist_button.on('click', function(event){
    
    var book_name = $('input[name=bookname]').val();
    if((book_name == "")||(book_name == null)){
      alert('fail');
    }
    else{
      alert(book_name);
    }
  });
})();
<form action="" method="POST">
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <p>POST TITLE</p>
    <input type="text" name="title" placeholder="Insert title" required>

    <p>INSERT BOOK NAME</p>
    //user will input value this text box
    <input type="text" name="bookname" placeholder="book name">

    <input type='button' name="addlist" value="ADD IN BOOK LIST">

    <ul class="booklist">
    </ul>

    <input type="submit" id='button'>//create post button

</form>

http://jsbin.com/niheqo/edit?html,js

Upvotes: 4

Related Questions