Reputation: 939
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
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