Getting value of input field in jquery

Question

My HTML:

var searchInput = $("#searchField").val()
$("#searchButton").on("click", function() {
  alert(searchInput)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Search.." id="searchField">
<button type="submit" id="searchButton">Submit</button>

With this code, after I click the "Submit" button, I only get an empty alert.

Pogrindis · Accepted Answer · 2018-04-12 15:19:39Z

3

You are defining the searchInput before any value is set..

Try this:

$("#searchButton").on("click", function() {
    var searchInput = $("#searchField").val()
    alert(searchInput)               
})

https://jsfiddle.net/xpvt214o/110276/

answered Apr 12, 2018 at 15:19

Pogrindis

8,3365 gold badges34 silver badges44 bronze badges

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

Comments

Marinos An · Accepted Answer · 2018-04-12 15:19:32Z

0

You need to fetch the value inside the click handler:

$("#searchButton").on("click", function() {
       alert($("#searchField").val())               
})

answered Apr 12, 2018 at 15:19

Marinos An

11.3k7 gold badges78 silver badges113 bronze badges

Comments

Sid_Heart · Accepted Answer · 2018-04-12 15:20:14Z

0

Bring var searchInput = $("#searchField").val() calculation inside the onclick event.

answered Apr 12, 2018 at 15:20

Sid_Heart

295 bronze badges

Collectives™ on Stack Overflow

Getting value of input field in jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related