how to get input text value in jquery

Question

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

Mosh Feu · Accepted Answer · 2016-08-11 06:41:26Z

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

Mohammad Akbari · Accepted Answer · 2016-08-11 06:41:45Z

1

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

answered Aug 11, 2016 at 6:41

Mohammad Akbari

4,8146 gold badges52 silver badges80 bronze badges

Comments

nizzik · Accepted Answer · 2016-08-11 06:41:49Z

1

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

answered Aug 11, 2016 at 6:41

nizzik

8266 silver badges18 bronze badges

1 Comment

Jade Han Over a year ago

thank you @nizzik you solved my problem! thank you very much!

Collectives™ on Stack Overflow

how to get input text value in jquery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related