Blog Archive

jQuery Get input Text value example, and how to set textbox value

To get and set the value of a input Text element you can use the jQuery val() function. Here is how to use ...

To get the textbox value - $(object).val()
To set the value of the text box - $(object).val('some Value')


jquery get input text 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 ...


get all input elements in form jquery

<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