CODEWITHSUNDEEP
jqueryhtml
Dipak
Dipak

Reputation: 939

why jquery can't access html input

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>

Upvotes: 0

Views: 50

Answers (1)

flyingfox
flyingfox

Reputation: 13506

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>

Upvotes: 4

Related Questions