Button Text Does Not Change jQuery

Question

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.

score 1 · Accepted Answer · answered Sep 19 '15 at 02:56

1

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

answered Sep 19 '15 at 02:56

Dane O'Connor

75,180
37
119
173

You answer ultimately resolved the issue. I change my `` to a ` – Brandon Wilson Sep 20 '15 at 00:51

score 0 · Answer 2 · answered Sep 19 '15 at 02:57

0

You need

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

instead of

btnRegUpdate.text("Update");

answered Sep 19 '15 at 02:57

JSelser

3,510
1
19
40

score 0 · Answer 3 · answered Sep 19 '15 at 02:58

0

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

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

Demo

answered Sep 19 '15 at 02:58

guradio

15,524
4
36
57

score 0 · Answer 4 · answered Sep 19 '15 at 02:58

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">

score 0 · Answer 5 · answered Sep 19 '15 at 02:59

0

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");

answered Sep 19 '15 at 02:59

score 0 · Answer 6 · answered Sep 19 '15 at 03:00

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')
}

score 0 · Answer 7 · answered Sep 19 '15 at 03:01

0

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.

answered Sep 19 '15 at 03:01

tragle

121
7

score 0 · Answer 8 · answered Sep 19 '15 at 03:43

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.

Button Text Does Not Change jQuery

8 Answers8