Friday, March 2, 2012

How to convert jquery object to string?

In jquery we can use .html() get the html code.
But how can we convert it to string?
That is very simple, we just asign the .html() to a javascript variable.

var v = $("#xxx").html();

The variable v will be change to a string that about .html() content.

DEMO


<html>
<body>
<div class="demo">
<h2>DEMO</h2>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function test(){
    var v = $("#asignHtmlToString").html();
    alert(v);
}
</script>
<button id="asignHtmlToString" onclick="test();">Click Me</button>
 </div>
</body>
</html>

Related Articles
jquery disable button

How to compare space with jquery?

Compare the space we can use unicode to comparing it.
the space unicode is 32.
<b> </b>

The below code show how to compare the space use jquery.
if( $("b").html().charCodeAt() == 32 ) {}

Click below demo button will show the alert popup when find the li tag have space.

DEMO


  • Text1
  • Text2

  • Text3

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">
function test(){
    $("li").each(function(e){
        if($(this).html().charCodeAt() == 32){
            alert("I have a space");
        }
    });
}
</script>
<ul> 
      <li>Text1</li>
      <li> </li>
      <li> </li>
      <li>Text2</li>
      <li></li>
      <li>Text3</li>
      <li>    </li>
</ul>
<button onclick="test();">Click Me</button>
</div>
</body>
</html>

Related Articles
jquery disable button

Wednesday, February 29, 2012

How to select different tag elements with jquery?

Consider a page width many tags and you want to select diferent tag.
Make them to a list item and change their css or style.

you can use add() selector.
Consider a page with 5 i tags and 5 b tag.How can I select these tags as a list item?

$("i").add("b");

It's so easy to use with jquery.

DEMO

Hello World! Hello Sun! Hello Moon! Hello Star! Hello Jquery! Hi World! Hi Sun! Hi Moon! Hi Star! Hi Jquery!

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() {
    $("i").add("b").css("color","red").css("display","block");
});
</script>
 <i>Hello World!</i>
 <i>Hello Sun!</i>
 <i>Hello Moon!</i>
 <i>Hello Star!</i>
 <i>Hello Jquery!</i>
 <b>Hi World!</b>
 <b>Hi Sun!</b>
 <b>Hi Moon!</b>
 <b>Hi Star!</b>
 <b>Hi Jquery!</b>
 </div>
</body>
</html>

Related Articles
jquery disable button

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

Monday, February 27, 2012

How to set focus to textbox with jquery

jquery version 1.7.1

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.

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() {
    $("#t1").focus();
    $("#b1").click(function(){
        changeFocus('t1');
        return false;
    });
    $("#b2").click(function(){
        changeFocus('t2');
        return false;
    });
});
function changeFocus(id){
    var v = "#" + id;
    $(v).focus();
}
</script>
 <form id="myForm" method="post" action="">
    <input id="t1" type="text"/>
    <input id="t2" type="text"/>
    <br/><br/>
    <input id="b1" type="button" value="Change Focus1"/>
    <input id="b2" type="button" value="Change Focus2"/>
 </form>
 </div>
</body>
</html>

Related Articles
jquery disable button

Sunday, February 26, 2012

A Mouseover Hover Effect Image Button with jquery

jquery version 1.7.1

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.

<script src="http://code.jquery.com/jquery-latest.js"></script>

we need to add the jQuery library script between the <head> tags.

we also need two images.I use the two below.I named them button_normal.png and button_hover.png

I writed two css use to define the image style, The class name are "imageNormal" and "imageHover".

 .imageNormal{
    cursor:pointer;
    border-style: inset;
 }

 .imageHover{
    cursor:pointer;
    border-style: outset;
 }

 There are 5 parameters in css style.

 when the page loading, we need to initial the action use jquery.

    $("#imgButton").hover(function() {
        $(this).attr("class","imageHover");
        $(this).attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxWHfSrt9UJLm29Id7C2RUpdioxkhaqnncIZDFp4kD-DTSD0aIOWdWobYVciSDi-jTmH6JNJJVEuS3E1_m0ieMvWkVWsY3aYRLY3_opoGj3pDT4i9fzG2tZr9rpSEUxofJm9xlqb6cbocT/s1600/button_hover.png");
            }, function() {
        $(this).attr("class","imageNormal");
        $(this).attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7McHsOjSD9bjHoFnGw5-A8o3TO58S8QY9XllX17migQShHjYLc_Xyyv3-K7Wk0d71EvzDjwn2kll_iocoFFgwkANpDDRzWf9TSOeCbgl6fe6imj1mcCFUbyoWBDDTQO_LkZ56T8VF4q2g/s1600/button_normal.png");
    });

upon code define the img will change the css style when mouse hover it.

    $("#imgButton").click(function(){
        $("#myForm").submit();
    });

upon code will call the submit action when click the image button.

    $("#myForm").submit(function(){
        alert("submit");
        return false;//delete this line when your have sever side to request
    });

upon code will submit the form.

 Between the body tag in html we write below code.

 <form id="myForm" method="post" action="">
    <img id="imgButton" alt="My button" class="imageNormal" />
 </form>

DEMO


My button


Below is the source code:

<html>
<body>
<div class="demo">
<h2>DEMO</h2>
<style>
 .imageNormal{
    cursor:pointer;
    border-style: inset;
 }
 .imageHover{
    cursor:pointer;
    border-style: outset;
 }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#imgButton").hover(function() {
        $(this).attr("class","imageHover");
        $(this).attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxWHfSrt9UJLm29Id7C2RUpdioxkhaqnncIZDFp4kD-DTSD0aIOWdWobYVciSDi-jTmH6JNJJVEuS3E1_m0ieMvWkVWsY3aYRLY3_opoGj3pDT4i9fzG2tZr9rpSEUxofJm9xlqb6cbocT/s1600/button_hover.png");
            }, function() {
        $(this).attr("class","imageNormal");
        $(this).attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7McHsOjSD9bjHoFnGw5-A8o3TO58S8QY9XllX17migQShHjYLc_Xyyv3-K7Wk0d71EvzDjwn2kll_iocoFFgwkANpDDRzWf9TSOeCbgl6fe6imj1mcCFUbyoWBDDTQO_LkZ56T8VF4q2g/s1600/button_normal.png");
    });
    $("#imgButton").click(function(){
        $("#myForm").submit();
    });
    $("#myForm").submit(function(){
        alert("submit");
        return false;//delete this line when your have sever side to request
    });
});
</script>
 <form id="myForm" method="post" action="">
    <img id="imgButton" alt="My button" class="imageNormal" />
 </form>
 </div>
</body>
</html>

Related Articles
jquery disable button

Friday, February 24, 2012

How to use enter key submit form on different input text with jquery?

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:
$("form input").keypress(function (e) {
  if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
    if($(this).attr("name") == "firstName"){
      $("#firstNameId").click();
    }
  if($(this).attr("name") == "lastName"){
    $("#lastNameId").click();
  }
  return false;
} else {
  return true;
}
});

This method define in page initial, Set all input elements bind a keypress method that will execute when user focus in and press enter key.

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() {
    $("form input").keypress(function (e) {
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
            if($(this).attr("name") == "firstName"){
                $("#firstNameId").click();
            }
            if($(this).attr("name") == "lastName"){
                $("#lastNameId").click();
            }
            return false;
        } else {
            return true;
        }
    });
    
    $("#firstNameId").click(function(){
        alert("This is the firstName submit button click event.");
    });
    
    $("#lastNameId").click(function(){
        alert("This is the LastName submit button click event.");
    });
});
</script>
 <form id="myForm" method="post" action="">
    <input type="text" name="firstName" id="firstName" value="firstName"/>
    <input type="text" name="lastName" id="lastName" value="lastName"/>
    <input type="submit" value="FirstName Submit Button" id="firstNameId"/>
    <input type="submit" value="LastName Submit Button" id="lastNameId"/>
 </form>
 </div>
</body>
</html> 

Related Articles
jquery disable button

Wednesday, February 22, 2012

How to change submit button text/size/css/ on form submit with jquery?

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>

Related Articles
jquery disable button

How to disable submit button on form submit with jquery?

In this Demo, The From have three elements.

 The First element:

<input type="text" name="firstName" id="firstName"/>

 This element ust to request the firstName to server side.
 In this case, When user click the submit button webpage will popup this field vlaue.

 The secode element:

<input type="submit" value="Submit enable"/>

 This submit button is visiable by default on page loading.

 The third element:

<input type="reset" value="Reset"/>

 For user easy to test the demo, I have add this button to reset the firstName field and enable the submit button.

 The jquery have three parts, all jquery will initial in page loading.

 The First part:

$("#myForm").submit(function(){
    $("input[type=submit]").attr("disabled","disabled");
    alert($("#firstName").val());
    return false;
 });

 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.

 The Second part:

$("input[type=reset]").click(function(){
        $("input[type=submit]").removeAttr("disabled");
        $("#firstName").val("");
 });

 This part will binding a click method to a reset button, For enable the submit button and clear the first name field.

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(){
        $("input[type=submit]").attr("disabled","disabled");
        alert($("#firstName").val());
        return false;//remove this line will submit request to server site.
    });
    $("input[type=reset]").click(function(){
        $("input[type=submit]").removeAttr("disabled");
        $("#firstName").val("");
    });
});
</script>
</head>
<body>
 <form id="myForm" method="post" action="">
    <input type="text" name="firstName" id="firstName"/>
    <input type="submit" value="Submit enable"/>
    <input type="reset" value="Reset"/>
 </form>
</body>
</html>

Related Articles
jquery disable button

How to use link submit form with jquery?

 In this demo, The Form have two elements.

 The First:

<input type="text" name="firstName" id="firstName"/>

 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


Submit Link

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> 

Related Articles
jquery disable button

jquery button onclick

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).

1.How to bind the onclick event to button in jquery?
1.1.How to use unbind method disable the onclick event in jquery?
2.How to use "on" method bind the onclick event to button in jquery?
2.1.How to use "off" method disable the onclick event in jquery?
3.How to use "attr" method set the onclick event to button in jquery?
3.1.How to use "attr" method clear the onclick event in jquery?
4.How to enable/disable "click" method to button in jquery?
5.How to call the onclick method in jquery?
6.How to use javascript to set onclick event to button?
6.1.How to call button click method in javascrpt?
6.2.How to use jquery delete onclick event in javascript?
7.Demo for jquery button click

1.How to bind the onclick event to button in jquery?
  bind's Description: Attach a handler to an event for the elements.
  A basic usage of .bind() is:
 
$("#xxx").bind('click', function(){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.

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:
  
 <script>
    document.getElementById("xxx").onclick = function() {
        alert("xxx");
    }
</script>

6.1.How to call button click method in javascrpt?
    The javascript code for trigger the onclick event on button tag:
    
<script>
        document.getElementById("xxx").click();
</script>

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>

Related Articles
jquery disable button

jquery toggle button

jquery version 1.7.1
Jquery toggle's description: Display or hide the matched elements.

1.How to toggle a button use Jquery?
1.1.Demo
2.How to toggle button text use Jquery?
2.1.Demo
3.How to toggle button class/layout use Jquery?
3.1.Demo

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>


Related Articles
jquery disable button

Monday, February 20, 2012

jquery button text

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.<input type="button"/>

2.<input type="submit"/>

3.<input type="reset"/>

If you want to change the text of an html button from client-side code, you can use javascript and jquery.

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?
1.2.How to change the text value of a Tag <input> in Jquery?
2.How to change the text value of a button in Javasript?
3.Demo for jquery button text

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:
$('#bid').attr('value', 'Save');

$('#bid').prop('value', 'Save');

$('#bid').val('value', 'Save');

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:
  
document.getElementById('bid').innerHTML = 'xxxx';

   For change Tag <input> button text:
  
document.getElementById('bid').value = 'xxxx';


3.Demo for jquery button text

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 () {
  $('#bid3').attr('value', 'Save');

 });
</script>
</head>
<body>
<input 
 id="bid1" 
 type="button" 
 value="Change Input Button Value Use Jquery attr" 
 onclick="$('#bid1').attr('value', 'Save');"/>
<br/>
<input 
 id="bid11" 
 type="button" 
 value="Change Input Button Value Use Jquery prop" 
 onclick="$('#bid11').prop('value', 'Save');"/>
<br/>
<input 
 id="bid1111" 
 type="button" 
 value="Change Input Button Value Use Jquery val" 
 onclick="$('#bid1111').val('value', 'Save');"/>
<br/>
<input 
 id="bid111" 
 type="button" 
 value="Change Input Button Value Use Javascript" 
 onclick="changeInputButtonValue('bid111','Save');"/>
<br/>
<button 
 id="bid2" 
 onclick="$('#bid2').html('<b>Save</b>');">
 Change Button Value Use Jquery Html
</button>
<br/>
<button 
 id="bid3" 
 onclick="changeButtonTagValue('bid3','Save');">
 Change Button Value Use Javascript
</button>
</body>
<script>
function changeInputButtonValue(i,p){
 document.getElementById(i).value = p;
}
function changeButtonTagValue(i,p){
 document.getElementById(i).innerHTML = p;
}
</script>
<html>


Related Articles
jquery disable button

Wednesday, February 15, 2012

jquery enable button

jquery version 1.7.1
All code run successful in platform such as chrome, firefox and ie.
1.How to enable the button use jquery?
2.How to check if button is enabled use jquery?
3.Demo for jquery enable button
3.1 enable the button when click a link
3.2 enable all disable button in webapge using jquery

1.How to enable the button use jquery?

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/


3.Demo for jquery enable button

3.1 enable the button when click a link

Demo:

Click Me

Below is the source code:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#bid").attr("disabled","disabled");
});
function enableButton(id){
    $("#bid").attr("disabled",false);
    //$("#bid").removeAttr("disabled");
}
</script>
</head>
<body>
<input id="bid" type="button" value="Target Button">
<a href="#" onclick="enableButton('bid');">Click Me</a>
</body>
</html>


3.2 enable all disable button in webapge using jquery

Demo:


Below is the source code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#bid1").attr("disabled","disabled");
 $("#cid").click(function(){
  //Traverse all disable button
  $(":button").each(function(){ 
   if ($(this).is(':disabled') == true) {   
    //$(this).attr("disabled",false);
    $(this).removeAttr("disabled");
   }
  });
 });
});
</script>
</head>
<body>
<input id="cid" type="button" value="Click Me">
<input id="bid1" type="button" value="Target Button1">
<input id="bid2" type="button" value="Target Button2" disabled="disabled">
<input id="bid3" type="button" value="Target Button3">
</body>
</html>

Related Articles
jquery disable button

Tuesday, February 14, 2012

jquery disable button

jquery version 1.7.1
All code run successful in platform such as chrome, firefox and ie.
1.How to disable the button use jquery?
2.How to check if button is disabled use jquery?
3.Demo for jquery disable button
3.1 disable the button when webpage initialize
3.2 onclick event disable button
3.3 disable submit button on form submit

1.How to disable the button use jquery?

There are two method disable the button using jquery.
the first way:
$("#xxx").attr("disabled",true);

the second way:
$("#xxx").attr("disabled","disabled");

Tip:
1.when we set the disabled property the html code will change to
<input id="xxx" type="button" value="Button" disabled="disabled">

2.The disabled property of JavaScript is a not null property,meaning it can take any string value.
document.getElementById("xxx").disabled = "true";
or
document.getElementById("xxx").disabled = "disabled";

3.Disabled <input> elements in a form will not be submitted.
4.The disabled attribute will not work with <input type="hidden">.

2.How to check if button is disabled use jquery?

In jQuery you can use the “is” function to check if the button is disabled like this:
   
if ($('#xxx').is(':disabled') == true) {}

The jquery "is" api please see http://api.jquery.com/is/

3.Demo for jquery disable button

3.1 disable the button when webpage initialize

Demo:


Below is the source code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#bid").attr("disabled","disabled");
});
</script>
</head>
<body>
<input id="bid" type="button" value="Target Button">
</body>
</html>

3.2 onclick event disable button

Demo:


Below is the source code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#cid").click(function(){
  $("#tid").attr("disabled","disabled");
 });
});
</script>
</head>
<body>
<input id="cid" type="button" value="Click Me">
<input id="tid" type="button" value="Target Button">
</body>
</html>

3.3 disable submit button on form submit

Demo:


Below is the source code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#testform').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
    return false;//false, don't submit.
});
});
</script>
</head>
<body>
<form id="testform" action="your submit page url" method="get">
    <input name="username" />
    <!-- some more form fields -->
    <input id="submit" type="submit" />
</form>
</body>
</html>