CODEWITHSUNDEEP
javascriptjquery
MrM
MrM

Reputation: 21989

How do I change button Text on Click MVC?

I have a toggle button, with a show/hide feature in javascript. How do I change the text when the button is clicked? 

<button id="ShowHide">Show</button>

Upvotes: 1

Views: 9311

Answers (5)

SLaks
SLaks

Reputation: 887285

Using jQuery:

$('#ShowHide').toggle(
    function() { 
        $(this).text("Show");
        $('whatever').show();
    },
    function() { 
        $(this).text("Hide");
        $('whatever').hide();
    }
);

Upvotes: 5

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

$('#HideShow').click(function()
{
  if ($(this).text() == "Show")
  {
     $(this).text("Hide");
  }
  else
  {
     $(this).text("Show");
  };
});

EDIT: Updated to use the new valid ID which should be faster :) Brain cramp: cannot remember if it is .val() or .text() on the "button" tag as opposed to the <input type="button"> tag, no time to test atm but you get the idea (and I think I have it right:) ).

Alternative, the .toggle() has an .toggle(even,odd); functionality.

$('#HideShow').toggle(function() 
  { 
   $(this).text("Hide"); 
  }, 
  function() 
  { 
     $(this).text("Show"); 
  } 
);

Upvotes: 0

Dolph
Dolph

Reputation: 50650

In pure HTML/JS:

<input type="button" id="show_hide" onclick="this.value=(this.value=='Show')?('Hide'):('Show')" value="Show" />

Upvotes: 0

Justin Niessner
Justin Niessner

Reputation: 245399

You'll have to use Javascript. Either hard code the new value in the Javascript or use AJAX to call back to the server and get the new value.

If you're just going to hard code the value in your Javascript...jQuery makes it a snap:

('#yourButton').click(function(){
    (this).text('Hello click!');
});

Upvotes: 0

C. Ross
C. Ross

Reputation: 31848

You can use this jquery to do the change.

$("#buttonName").val("New text for button");

JQuery is automatically included in your ASP.NET MVC Project.

Upvotes: 2

Related Questions