To get the textbox value - $(object).val()
To set the value of the text box - $(object).val('some Value')
 |
<html>
<head>
<title>jQuery get input Text value example</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myInputText').keyup(function() {
$('#myOutputText').val($(this).val());
$('#myDIVTag').html('<b>' + $(this).val() + '</b>');
});
});
</script>
</head>
<body>
<div id="myExample">
<form id="myForm" action="">
<fieldset>
<legend>jQuery Get and Set input Text value</legend>
<p>
<label for="myInputText">
Type something here:
</label><br />
<input
id="myInputText" type="text" name="inputBox" />
</p>
<p>
<label for="myOutputText">
See Result in this Text Box:
</label><br />
<input
id="myOutputText" type="text" name="outputBox"
readonly="readonly" />
</p>
<p>
See Result in this DIV section:
</p>
<div id="myDIVTag"></div>
</fieldset>
</form>
</div>
</body>
</html>
How to loop thru all input elements in a HTML form using jQuery
You can use the $(':input') selector to get all Input elements including input Text boxes. Now to just get input Textbox use the $('input:text') selector. Here is an example ...
 |
<html>
<head>
<title>jQuery get all input Values example</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myButton1').click(function() {
$("#myResults").html("");
$(':input').each(function(index){
console.log($(this));
$("#myResults")
.append("<b>Input Type:</b> "
+ $(this).attr('type') + " ");
$("#myResults")
.append("<b>Value:</b> "
+ $(this).attr('value') + "<br/>");
});
});
$('#myButton2').click(function() {
$("#myResults").html("");
$('input:text').each(function(index){
console.log($(this));
$("#myResults")
.append("<b>Input Type:</b> "
+ $(this).attr('type') + " ");
$("#myResults")
.append("<b>Value:</b> "
+ $(this).attr('value') + "<br/>");
});
});
});
</script>
</head>
<body>
<div id="myExample">
<form id="myForm" action="">
<fieldset>
<legend>jQuery Get values for all input types</legend>
<p>
<label for="myInputText1">
My first input text is here:
</label><br />
<input
id="myInputText1" type="text" name="inputBox" />
</p>
<p>
<label for="myInputText2">
My second input text is here:
</label><br />
<input
id="myInputText1" type="text" name="inputBox" />
</p>
<p>
<label for="myInputText3">
My hidden input is here:
</label><br />
<input
id="myInputText1" type="hidden"
name="inputBox" value="My Hidden Data"/>
</p>
<input id="myButton1" type="button"
value="Click here to see all input Types" />
<input id="myButton2" type="button"
value="Click here to see only input Type=Text" />
</fieldset>
<fieldset>
<legend>See Result in this Section:</legend>
<div id="myResults"></div>
</fieldset>
</form>
</div>
</body>
</html>
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.