Set input button value to same name but uppercase

Question

I'm trying to update the value of a input button to the same name as before, but as uppercase. I struggle with calling the button value within the button value and keep getting errors. This is what I got now:

function updateButton(button) {
    $(button).val(button.val().ToUpperCase())
}

The error I get is:

Uncaught TypeError: button.val is not a function

HTML:

<input type='button' id='btn1' value='test' class='btn' onclick='updateButton(this)'>
<input type='button' id='btn2' value='test' class='btn' onclick='updateButton(this)'>
<input type='button' id='btn3' value='test' class='btn' onclick='updateButton(this)'>

Any idea on how to update the value within itself?

can you also share the html? Also it is [**toUpperCase**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) — brk, Jul 27 '16 at 07:52
`$(button).val(button.value.toUpperCase())` or `$(button).val(function(i, v){ return v.toUpperCase(); })` — Pranav C Balan, Jul 27 '16 at 07:53
wrap button in $ again `$(button).val($(button).val().toUpperCase())` — eltonkamami, Jul 27 '16 at 07:54
replace ` button.val().ToUpperCase()` to `button.val.ToUpperCase() ` — Jees K Denny, Jul 27 '16 at 07:54
First, `button` implies a variable (you may have meant `$('button')`), and second a ` — David Thomas, Jul 27 '16 at 07:55

score 1 · Accepted Answer · answered Jul 27 '16 at 07:54

1

Try:

$(button).val($(button).val().toUpperCase());

the second button needs to be wrapped by jQuery as well, and the toUpperCase starts with (oh the irony) a lower-case t.

answered Jul 27 '16 at 07:54

ADyson

57,178
14
51
63

Works perfectly. Will accept as soon as I can. Thank you – DaveLar Jul 27 '16 at 07:57

Rory McCrossan · Answer 2 · 2016-07-27T07:55:44.163

Firstly note that the method to change case is toUpperCase(), not ToUpperCase().

From the error you're getting it would appear that the button variable contains a DOMElement, not a jQuery object, and hence the error when trying to access jQuery's val() method. Instead, you could use the value property of the DOMElement directly:

function updateButton(button) {
    $(button).val(button.value.toUpperCase())
}

Better still, you could use unobtrusive JavaScript to attach your event handlers:

$('.btn').click(function() {
  $(this).val(this.value.toUpperCase());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' id='btn1' value='test' class='btn' />
<input type='button' id='btn2' value='test' class='btn' />
<input type='button' id='btn3' value='test' class='btn' />

score 0 · Answer 3 · answered Jul 27 '16 at 07:55

You are mixing jQuery objects with other js variables. $(button) is a jQuery object which selects all elements of type button, while button is simply a variable and if not defined before is of type undefined.

var button = $(button);
function updateButton(button) {
    button.val(button.val().toUpperCase())
}

score 0 · Answer 4 · answered Jul 27 '16 at 07:55

You are getting as .val() is jQuery method and you are using it with native DOM element.

You need to create a jQuery object to use .val(), manipulation can be achieved using val(fn) method

$(button).val(function(_, value){
    return value.toUpperCase()
})

score 0 · Answer 5 · answered Jul 27 '16 at 07:56

I'd suggest:

// select all <input> elements with a 'type' attribute
// equal to 'button'; then use the on() method - and
// its anonymous function - to bind the anonymous
// function as the 'click' event-handler:
$('input[type=button]').on('click', function(){

    // set the value of the current element -
    // 'this' will be the clicked input element -
    // to the string-value of its name attribute
    // set to uppercase:
    this.value = this.name.toUpperCase();
});

score -1 · Answer 6 · answered Jul 27 '16 at 07:55

-1

$('#button_id').val(button.val().ToUpperCase())

answered Jul 27 '16 at 07:55

Amol Dabholkar

1
1

score -1 · Answer 7 · answered Jul 27 '16 at 07:59

-1

Try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
        function updateButton(button) {
          $(button).val($(button).val().toUpperCase());
        }
    </script>
    <input type="button" value="hello" onclick="updateButton(this)">

answered Jul 27 '16 at 07:59

hmak.me

3,770
1
20
33

Explain why to `try this` and why it's solving issue – Justinas Jul 27 '16 at 08:35
@Justinas i can't answer the first but the 't' in 'toUpperCase' must be lowercase – hmak.me Jul 29 '16 at 04:35

Set input button value to same name but uppercase

7 Answers7