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.