Cant get input text value with jquery

Question

I want to get the text of the input text field on click of the go button. I have read a few tutorials on this, followed them step by step, but still failed to do so. Here is my code :

function go() {
  content.html($("#textfield").value);
}

<!DOCTYPE html>
<html>

<head></head>

<body>
  <div id="content">
    <input type="text" id="textfield">
    <button type="button" id="btn" onclick="go()">Go</button>
  </div>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>

</html>

May I ask what is wrong with it?

https://stackoverflow.com/questions/463506/how-do-i-get-the-value-of-a-textbox-using-jquery — luxdvie, Aug 29 '17 at 15:55
function go() { $("#content").html($("#textfield").val()); } — amit wadhwani, Aug 29 '17 at 15:59

score 4 · Accepted Answer · answered Aug 29 '17 at 15:57

you can use .val() to get value of input.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
<head></head>
<body>
  <div id="content">
  <input type="text" id="textfield">
  <button type="button" id="btn" onclick="go()">Go</button>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function go()
{
    console.log($("#textfield").val());
}
</script>
</body>
</html>

score 1 · Answer 2 · answered Aug 29 '17 at 15:58

Two things: even though content should be a global reference to <div id="content">, you should not rely on this mechanism. That DOM reference won't have jQuery's HTML method anyway; instead, you should look the DOM node up using $('#content') or something similar. Additionally, jQuery provides a val() method to get an input value, .value is the native DOM API:

$('#content').html($("#textfield").val())

Cant get input text value with jquery

2 Answers2