why jquery can't access html input

Question

I'm shocked, what is happening here, just simple thing what is missing here. Why html input variables can't access in jquery, I tried using id selector, name attribute. it is really weird.

$(document).ready(function(){
  var heading = $('#heading').val();
  var heading1 = $('#heading').text();
  var heading2 = $('input[name=heading]').val();
			$('#submit').click(function(){
      alert(heading);
      alert(heading1);
      alert(heading2);
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<form action="">
<table>
<tr>
<th>
Heading
</th>
<td>
<input type="text" name="heading" id="heading">
<input type="submit" id="submit" name="submit">
</td>
</tr>
</table>
</form>
</body>
</html>

where do you put your jquery code? top or bottom of html code? — Ali
– Ali, Commented Aug 4, 2018 at 4:06
This doesn't show what you desire because the code you wrote runs immediately after the page is loaded and there is no input value unless you provided default values. You need to alert it after the input is provided. — Bibek Shah
– Bibek Shah, Commented Aug 4, 2018 at 4:08

Jon Uleis · Accepted Answer · 2018-08-04 04:09:20Z

4

You need to get value inside click event,also text() will not get the input value

$(document).ready(function() {
  $('#submit').click(function() {
    var heading = $('#heading').val();
    var heading1 = $('#heading').text(); //this will not get the value
    var heading2 = $('input[name=heading]').val(); // this will be the same as the heading var
    alert(heading);
    alert(heading1);
    alert(heading2);
  })
})

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

<form action="">
  <table>
    <tr>
      <th>
        Heading
      </th>
      <td>
        <input type="text" name="heading" id="heading">
        <input type="submit" id="submit" name="submit">
      </td>
    </tr>
  </table>
</form>

edited Aug 4, 2018 at 4:09

Jon Uleis

18.9k3 gold badges36 silver badges45 bronze badges

answered Aug 4, 2018 at 4:05

flyingfox

13.5k4 gold badges30 silver badges43 bronze badges

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

1 Comment

Dipak Over a year ago

oh I missed, shame on me. Thanks

Collectives™ on Stack Overflow

why jquery can't access html input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related