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>
This article show you how to focus to a textbox on page.
below have function that you can copy it to your page be used to focus the textbox, just pass the id of textbox.
this function is very simple.
function changeFocus(id){
var v = "#" + id;
$(v).focus();
}
The demo have two textbox and two button,
When you click the Change Focus1 button the focus will go to the first textbox,
click the Change Focus2 button the focus will go to the second textbox.
In a html design, Normally when complete input data will press a submit button to request the data.
This post will show you how to use a image button to submit form? The image that have a movseover hover effect.
First you need to download the jquery library to your test location or use below code direct reference the library.
In this demo, the Form have two input box such as the "firstName" and the "lastName".
Press Enter key on them will triger different submit method.
The very important method is below:
In this article will show your how to set the parameter of the submit button when click the submit button.
1.change text use the attr/val method
.attr() Description: Get the value of an attribute for the first element in the set of matched elements.
.val() Description: Get the current value of the first element in the set of matched elements.
$("#submitId").attr("value","Submitting");
or
$("#submitId").val("Submitting");
2.change size use the height/width method
.height() Description: Get the current computed height for the first element in the set of matched elements.
.width() Description: Get the current computed width for the first element in the set of matched elements.
$("#submitId").height(30);
$("#submitId").width(150);
3.change css use the css method
.css() Description: Get the value of a style property for the first element in the set of matched elements.
$("#submitId").css("color","green");
$("#submitId").css("font-size","20");
Demo:
DEMO
Below is the source code:
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myForm").submit(function(){
//clone the submit button use to reset
$("#tempDiv").html($("#submitId").clone().removeAttr("style",""));
//change the button text
$("#submitId").attr("value","Submitting");
//change the height
$("#submitId").height(30);
//change the width
$("#submitId").width(150);
//change css color
$("#submitId").css("color","green");
//change css font-size
$("#submitId").css("font-size","20");
alert($("#firstName").val());
return false;//remove this line will submit request to server site.
});
$("input[type=reset]").click(function(){
$("#submitId").replaceWith($("#tempDiv").html());
$("#firstName").val("");
});
});
</script>
<form id="myForm" method="post" action="">
<input type="text" name="firstName" id="firstName"/>
<input id="submitId" type="submit" value="Submit Button"/>
<input type="reset" value="Reset"/>
</form>
<div id="tempDiv" style="display:none;">
</div>
</body>
</html>
This part will binding the submit action to the ID "myForm" of the Form.
When the Form is submitting, This part will find the submit button and disable the submit button.
The next step will use popup to show the first name value.
Note1:If your page have more than two form, Please use the id get the submit button.Like below:
$("#xxx").attr("disabled","disabled");
The xxx is the ID of the submit button.
Note2:Please don't binding a onclick method to submit button use to execute something, Because of the Chrome is not execute the Form's submit method when use jquery binding a click action the submit button.
This demo have no server side so I have add a line "return false;" to stop the submit.
If your have server side, Please remove this line and change the Form's parameter "action" to your server side url.
this element will send string that your input to server when you have submitted.
The second:
<a id="linkId" href="#">Submit Link</a>
Tag a will be bind a click method with jquery.The click action will execute Form's submit method.
Tip:the end of the click method must add a sentence "return false;" that will disable the href action after clicked the link.
When the page on loading, We need to bind two methods use jquery.
The First:
For this demo case, I have binded the submit method to Form use to show the first name input when submitting. This binding is optional.
The Second:
We need to bind a link click action, For submit when click the link.
In this case, the Form don't submit to server side.
If your want to submit your request to server side, Please change two places.
The one:
The action of the Form's parameter, change it to a server side url.
The second:
remove the "return false;" line in source code line8.
DEMO
Below is the source code:
<html><head><script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">$(document).ready(function() { $("#myForm").submit(function(){ alert($("#firstName").val()); return false;//remove this line will submit request to server site. }); $("#linkId").click(function(){ $("#myForm").submit(); return false; });});</script></head><body> <form id="myForm" method="post" action=""> <input type="text" name="firstName" id="firstName"/> <a id="linkId" href="#">Submit Link</a> </form></body></html>
jquery version 1.7.1
All code except 'attr' run successful in platform such as chrome, firefox and ie. For this article the jquery's "attr" can't set the click event to button in IE.
The click() method simulates a mouse-click on an element.
You have four way to set the click to button use jquery.
The first way is a shortcut for .bind("click", handler), as well as for .on("click", handler) as of jQuery 1.7.
The third way is .attr('onclick',handler).
The last way is direct use .click(handler).
This code will cause the element with an ID of xxx to respond to the click event. When a user clicks inside this element thereafter, the alert will be shown.
1.1.How to use unbind method disable the onclick event in jquery?
unbind's Description: Remove a previously-attached event handler from the elements.
A basic usage of .unbind() is:
$("#xxx").unbind("click");
This code will cause the element with an ID of xxx to removes the handlers regardless of type.
2.How to use "on" method bind the onclick event to button in jquery?
on's Description: Attach an event handler function for one or more events to the selected elements.
A basic usage of .on() is:
$("#xxx").on('click', function(){alert("xxx");});
The above code will generate one alert when the button is clicked.
2.1.How to use "off" method disable the onclick event in jquery?
off's Description: Remove an event handler.
A basic usage of .off() is:
$("#xxx").off("click");
This code will cause the element with an ID of xxx to removes the handlers regardless of type.
3.How to use "attr" method bind the onclick event to button in jquery?
attr's Description: Get the value of an attribute for the first element in the set of matched elements.
A basic usage of .attr() is:
$("#xxx").attr('onclick','alert("xxx");');
This code will cause the element with an ID of xxx to respond to the click event. When a user clicks inside this element thereafter, the alert will be shown.
3.1.How to use "attr" method disable the onclick event in jquery?
A basic usage of .attr() is:
$("#xxx").attr('onclick','');
This code will clear the onclick method on the Button.
4.How to enable/disable "click" method to button in jquery?
click's Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.
Enable example:
$("#xxx").click(function(){ alert('xxx');});
Disable example:
$("#xxx").off('click');
or
$("#xxx").unbind('click');
5.How to call the onclick method in jquery?
A basic usage of call the click method is:
$("#xxx").click();
This code will call the click event on the ID of xxx button.
6.How to use javascript to set onclick event to button?
The javascript code for bind the onclick method to button tag:
6.2.How to use jquery delete onclick event in javascript?
$("#xxx").attr('onclick','');
7.Demo for jquery button click
Demo:
Below is the source code:
<html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#jqueryClickButtonId").click(function(){ alert('I have a onclick method setting by jquery.'); }); $("#jqueryClickButtonId2").attr('onclick','alert("set by jquery attr method");'); $("#jqueryClickButtonId3").bind('click', function(){alert("set by jquery bind method");}); $("#jqueryClickButtonId4").on('click', function(){alert("set by jquery on method");}); }); function removeC(){ //this method delete the onclick event //set by html code and set by jquery 'attr' attribute. $("#htmlClickButtonId").attr('onclick',''); $("#jqueryClickButtonId2").attr('onclick',''); //delete javascript onclick event $("#javascriptClickButtonId").attr('onclick',''); //below 2 method can delete onclick event set by jquery. //$("#jqueryClickButtonId").off('click'); $("#jqueryClickButtonId").unbind('click'); //delete jquery bind click $("#jqueryClickButtonId3").unbind("click"); //delete jquery on click $("#jqueryClickButtonId4").off("click"); } </script> </head> <body> <input id="htmlClickButtonId" type="button" value="onclick event set by html" onclick="alert('I have a onclick method setting by html code.');"/> <input id="javascriptClickButtonId" type="button" value="onclick event set by javascript"/> <input id="jqueryClickButtonId" type="button" value="onclick event set by jquery 'click'"/> <input id="jqueryClickButtonId2" type="button" value="onclick event set by jquery 'attr' atttribute"/> <input id="jqueryClickButtonId3" type="button" value="onclick event set by jquery 'bind'"/> <input id="jqueryClickButtonId4" type="button" value="onclick event set by jquery 'on'"/> <br/> <input id="removeid" type="button" value="Remove onclick event" onclick="removeC();"/> </body> <script> document.getElementById("javascriptClickButtonId").onclick = function() { alert("This is a javascript click button."); } </script> <html>
1.How to toggle a button use Jquery?
There are two type button in HTML.
The First type is Tag <button>:
<button id="aid">Button Tag<button>
The second type is Tag <input>:
<input id="bid" type="button" value="Input Tag"/>
To hide/show upon buttons use jquery is same.
$('#aid').toggle(); $('#bid').toggle();
or
$('#aid').toggle(1000); $('#bid').toggle(1000);
The "1000" of the parameter determining how long the animation will run.
1.1.Demo
DEMO
Below is the source code:
<html><head><script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript"> function toggleButton(){ $("#bid").toggle(1000); $("#iid").toggle(1000); }</script></head><body> <button id="bid">I am a bButton</button> <input type="button" id="iid" value="I am a bInput"/> <a href="#" onclick="toggleButton();">Toggle Button</a></body></html>
2.How to toggle button text use Jquery?
below I wirted a function to toggle button text for two type button.
This function have three parameter3
objId:The target of button ID
objText1:The button value for button text changed from.
objText2:The second value for button text changed to.
function toggleButtonText(objId,objText1,objText2){ objId = "#" + objId; var tagName = $(objId)[0].tagName; var value = null; //step1 if(tagName == "INPUT"){ //for tag input value = $(objId).attr("value"); }else{ //for tag button value = $(objId).html(); } //step2 if(value == objText1){ value = objText2; }else{ value = objText1; } //step3 if(tagName == "INPUT"){ //for tag input $(objId).attr("value",value); }else{ //for tag button $(objId).html(value); } }
2.1.Demo
DEMO
Below is the source code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function toggleButtonText(objId,objText1,objText2){
objId = "#" + objId;
var tagName = $(objId)[0].tagName;
var value = null;
//step1
if(tagName == "INPUT"){
//for tag input
value = $(objId).attr("value");
}else{
//for tag button
value = $(objId).html();
}
//step2
if(value == objText1){
value = objText2;
}else{
value = objText1;
}
//step3
if(tagName == "INPUT"){
//for tag input
$(objId).attr("value",value);
}else{
//for tag button
$(objId).html(value);
}
}
</script>
</head>
<body>
<button id="cid"
onclick="toggleButtonText('cid','I am a cButton','Toggle cButton Text');">I am a cButton</button>
<input type="button" id="did" value="I am a dInput"
onclick="toggleButtonText('did','I am a dInput','Toggle dInput Text');"/>
</body>
</html>
3.How to toggle button class/layout use Jquery?
This function have three parameter3
objId:The target of button ID
objClass1:The button class for button class changed from.
objClass2:The second class for button class changed to.
function toggleButtonClass(objId,objClass1,objClass2){ objId = "#" + objId; var value = $(objId).attr("class"); if(value == objClass1){ value = objClass2; }else{ value = objClass1; } $(objId).attr("class",value); }
3.1.Demo
DEMO
Below is the source code:
<html>
<head>
<style>
.blackClass {
color:black;
}
.whiteClass {
color:white;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function toggleButtonClass(objId,objClass1,objClass2){
objId = "#" + objId;
var value = $(objId).attr("class");
if(value == objClass1){
value = objClass2;
}else{
value = objClass1;
}
$(objId).attr("class",value);
}
</script>
</head>
<body>
<button id="eid"
class="blackClass"
onclick="toggleButtonClass('eid','blackClass','whiteClass');">I am a eButton</button>
<input type="button" id="fid"
class="blackClass"
value="I am a fInput" onclick="toggleButtonClass('fid','blackClass','whiteClass');"/>
</body>
</html>
jquery version 1.7.1
All code run successful in platform such as chrome, firefox and ie.
There are two ways you can define a button in html page.
The first way:
Tag <button>
The <button> tag defines a push button.
Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
If you use the <button> element in an HTML form, different browsers may submit different values.Use the <input> element to create buttons in an HTML form.
The second way:
Tag <input>
The <input> tag is used to select user information.
<input> elements are used within a <form> element to declare input controls that allow users to input data.
Tag <input> have three types to define a button.
1.How to change the text value of a button in Jquery?
1.1.How to change the text value of a Tag <button> in Jquery?
below define a button, the value is 'I am a button'.
<button id="bid">I am a button</button>
change text jquery:
$('#bid').html('<b>Save</b>');
or
$('#bid').text('Save');
.html('xxx') can insert html code, Set the HTML contents of each element in the set of matched elements.
.text('xxx') set the content of each element in the set of matched elements to the specified text.
1.2.How to change the text value of a Tag <input> in Jquery?
below define three Input buttons.
1.<input id="bid" type="button"
value="I am a button that type is button."/>2.<input id="bid"type="submit"
value="I am a button that type is submit."/>3.<input id="bid" type="reset"
value="I am a button that type is reset."/>
There are three way to change upon button text in jquery:
2.How to change the text value of a button in Javasript?
below example will get the ID 'bid' of button change its text to 'xxxx'.
For change Tag <button> text:
There are two ways to change the button state from disable to enable.
the first way:change the boolean value from true to false
$("#xxx").attr("disabled",false);
the second way:remove the disabled attribute
$("#xxx").removeAttr("disabled");
Tip:
1.when we enable a button the html code will remove the disabled attribute
disabled state:<input id="xxx" type="button" value="Button" disabled="disabled">
enabled state:<input id="xxx" type="button" value="Button">
2.The disabled property of JavaScript need to set the value to null.
document.getElementById("xxx").disabled = null;
2.How to check if button is enabled use jquery?
In jQuery you can use the “is” function to check if the button is enabled like this:
if ($('#xxx').is(':disabled') == false) {}
The jquery "is" api please see http://api.jquery.com/is/
