Case: 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>');

$('#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

Case

Monday, February 20, 2012

jquery button text

Demo:

No comments:

Post a Comment