Tuesday, February 28, 2012

How to get/set textbox value with jquery?

jquery version 1.7.1

This article show you how to get and set textbox value.
Your can use val() and attr() to do this work.

val()

To get the textbox value:
$("#xxx").val();

To set the textbox value:
$("#xxx").val("xxxxxxx");

attr()

To get the textbox value:
$("#xxx").attr("value");

To set the textbox value:
$("#xxx").attr("value","xxxxxxx");

The demo have a textbox and four button,
The first button: the code will use val() function get the textbox value and show it on label element.
The second button: the code will use attr() function get the textbox value and show it on label element.
The third button: the code will use val() function set the textbox value.
The fourth button: the code will use attr() function set the textbox value.

DEMO







Below is the source code:

<html>
<body>
<div class="demo">
<h2>DEMO</h2>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#b1").click(function(){
        var value = $("#t1").val();
        $("#showLabel").html(value);
        return false;
    });
    $("#b2").click(function(){
        var value = $("#t1").attr("value");
        $("#showLabel").html(value);
        return false;
    });
    $("#b3").click(function(){
        $("#t1").val("This is val() set value.");
        return false;
    });
    $("#b4").click(function(){
        $("#t1").val("This is attr() set value.");
        return false;
    });
});
function changeFocus(id){
    var v = "#" + id;
    $(v).focus();
}
</script>
 <form id="myForm" method="post" action="">
    <label>The TextBox' value is:</label><lable id="showLabel"></lable>
    <br/><br/>
    <input id="t1" type="text" value="This is a TextBox"/>
    <br/><br/>
    <input id="b1" type="button" value="val():Get value"/>
    <input id="b2" type="button" value="attr():Get value"/>
    <input id="b3" type="button" value="val():Set value"/>
    <input id="b4" type="button" value="attr():Set value"/>
 </form>
 </div>
</body>
</html>

Related Articles
jquery disable button

4 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. nice post. using javascript also we can get/set the value of the textbox. for example see this post: http://coding-issues.blogspot.com/2013/10/how-to-setget-textbox-value-using.html

    ReplyDelete
  3. how to get the name of a textbox for exampe if i write in the massage box
    first name muhammad haris

    i want to get it after written in the textfield to a new to div

    ReplyDelete
  4. can i get the name when i write the first name in the text field to a new div no need of get button

    ReplyDelete