0

Is their any possible when on click the button it change to only text and not as a button.

Ex:

I have Invite button for all individual user. What I need is when on click the Invite button, button text need not to change instead button is change to text.

"Invite" button format is change to "pending request" text format along with "cancel" button when on click the button.

Anne Tina
  • 13
  • 1
  • 1
  • 8
  • Why not create a button and a text. Then you can choose which is which to show/hide. – JunM Jul 18 '13 at 06:41
  • make two butons and on click of one change the buttons. – ABorty Jul 18 '13 at 06:42
  • refer link, http://stackoverflow.com/questions/1544317/jquery-change-type-of-input-field – gayan Jul 18 '13 at 06:44
  • Hide it as suggested by @JunM. Also make sure you disable the initial button when hiding to prevent double-click or Enter key. This is a relatively easy task with jQuery. – Revent Jul 18 '13 at 06:45

4 Answers4

1

Hope it helps, this FIDDLE

if you want to learn more. read more about jquery.

html

<input id="invite" type="button" value="Invite" />
<span id="pending">Pending</span>
<input id="cancel" type="button" value="Cancel" />

script

$('#pending').hide();
$('#cancel').hide();

$('#invite').on('click', function () {
    $(this).hide('fast');
    $('#pending').show('fast');
    $('#cancel').show('fast');
});

$('#cancel').on('click', function () {
    $(this).hide('fast');
    $('#pending').hide('fast');
    $('#invite').show('fast');
});
Vond Ritz
  • 2,002
  • 12
  • 15
0

Try this code :

$('button').click(function() {
    $(this).replaceWith("pending request<button>cancel</button>")
})
Lucas Willems
  • 5,931
  • 2
  • 25
  • 41
0
$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'pending request...');
//add cancel button
 });
Raghavendra Devraj
  • 437
  • 5
  • 16
0

If you have a button like this:

<button>Click me</button>

You can disable it on click with jQuery like this:

$(function() {
  $('button').on('click', function(e) {
    e.preventDefault();       
    $(this).prop('disabled', 'disabled');
  });
});

See fiddle here: http://jsfiddle.net/jpmFS/

Or replace it with only text like this:

$(function() {
 $('button').on('click', function(e) {
    e.preventDefault();       
    $(this).replaceWith('<p>'+$(this).text()+'</p>');
 });
});
MiRaIT
  • 139
  • 3