CODEWITHSUNDEEP
javascriptjquery
Brandon Wilson
Brandon Wilson

Reputation: 4590

Button Text Does Not Change jQuery

Okay, I have been messing around with this for a few hours now and decided to ask. I have searched StackOverflow and Google, with no resolution. I am trying to change the text of a button, like below.

<input id="btnRegUpdate" type="submit"  onclick="updatePrice(1)" value="Correct">

The updatePrice() function is called and checks a few things and at the end I have an if statement that checks the value to see if it is Correct, if it is, it will change the text, or suppose to.

var btnRegUpdate = $('#btnRegUpdate');

if (btnRegUpdate.attr('value') == 'Correct'){
    logMessage("Button was correct");
    btnRegUpdate.text("Update");
}

At this point I have tried everything in this solution jQuery change button text with nothing working. I get the logMessage, but the button still doesn't change.

UPDATE: Nothing seems to be working. I tried everything again in a new function, just in case the other logic was messing with something. After doing a quick test to see if the text was change

function updatePrice2(val, e) {
    e.preventDefault();
    var btnRegUpdate = $('#btnRegUpdate');

    if (btnRegUpdate.attr('value') == 'Correct') {
        logMessage("Button was correct");
        btnRegUpdate.val("Update");
    }else if(btnRegUpdate.attr('value') == 'Update'){
        logMessage('Button was update');
        btnRegUpdate.val("Correct");
    }
}

and the console shows that it changed but doesn't on screen.

Upvotes: 2

Views: 5809

Answers (8)

Huy Minh
Huy Minh

Reputation: 16

Your function look good and i don't know it's not working.

function updatePrice2(val, e) {
    e.preventDefault();
    var btnRegUpdate = $('#btnRegUpdate');

    if (btnRegUpdate.attr('value') == 'Correct') {
        logMessage("Button was correct");
        btnRegUpdate.val("Update");
    }else if(btnRegUpdate.attr('value') == 'Update'){
        logMessage('Button was update');
        btnRegUpdate.val("Correct");
    }
}

I suggest you check in your page and find id "btnRegUpdate", maybe it appear more than one.

Upvotes: 0

tragle
tragle

Reputation: 121

Add return false to the click handler.

<input id="btnRegUpdate" type="submit"  onclick="updatePrice(1); return false;" value="Correct">

Otherwise the page will attempt to submit and reload.

Upvotes: 0

Adam Wolf
Adam Wolf

Reputation: 309

With jQuery you can use .html() to change the contents. It works the same as javascript's .innerHtml

var btnRegUpdate = $('#btnRegUpdate');

if (btnRegUpdate.attr('value') == 'Correct'){
    logMessage("Button was correct");
    btnRegUpdate.html('Update')
}

Upvotes: 0

user1978450
user1978450

Reputation:

The input element's text is defined by its value attribute, not content. To change the text, update the value attribute: 

btnRegUpdate.attr('value', "Update");

instead of 

btnRegUpdate.text("Update");

Upvotes: 0

Rayon
Rayon

Reputation: 36609

Try this:

Prevent default action of submit button

Change the value of button using val()

function updatePrice(val, e) {
  e.preventDefault();
  var btnRegUpdate = $('#btnRegUpdate');

  if (btnRegUpdate.attr('value') == 'Correct') {
    console.log("Button was correct");
    btnRegUpdate.val("Update");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="btnRegUpdate" type="submit" onclick="updatePrice(1,event)" value="Correct">

Upvotes: 0

guradio
guradio

Reputation: 15555

var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.val() == 'Correct'){
    btnRegUpdate.attr('Value',"Update");
}

Try using btnRegUpdate.attr('Value',"Update");

Demo

Upvotes: 0

JSelser
JSelser

Reputation: 3630

You need 

btnRegUpdate.attr("value", "Update")

instead of 

btnRegUpdate.text("Update");

Upvotes: 0

Dane O&#39;Connor
Dane O&#39;Connor

Reputation: 77278

Change the innerHTML not the text. Like so:

btnRegUpdate.html("Update");

EDIT:

Just noticed you're using a <input> not a <button>, change the value property:

btnRegUpdate.attr('value', 'Update');

Upvotes: 1

Related Questions