如何使用jQuery更改页面加载时“提交”按钮的显示值

Question

I am new to JQuery and need suggestions on following requirement.

I have a form with a submit button as below. Page accepts locale as an input parameter. Depending on the value of locale , on page load I am populating the labels of the input fields in respective language using jQuery.i18n.properties.js plug-in, but I could not update the display value of the button.

Please suggest solution or if there is another way to achieve this.

HTML code:

<input type="submit" data-inline="true" id="submit" value="Submit"/>

Have tried below jQuery options to update the button label:

1. $("#submit").val($.i18n.prop('submit'));
2. $("#submit").html($.i18n.prop('submit'));
3. $("#submit").prop('value',($.i18n.prop('submit')));
4. $("#submit").text($.i18n.prop('submit'));

None of them worked. But I see the value gets updated as below in Developer tools window, for this button.

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow"> Submit <input type="submit" id="submit" value="New Text"> </div>

Answer 1

Try $("#submit")[0].value = $.i18n.prop('submit'); . Does that work for you?

(Even though it's a JS workaround, not a JQuery solution)

Answer 2

If your button is an input tag, use the jQuery val :

 function changeBtnText() { $("#submit").val("My new button text"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="submit" id="submit" value="My button"> <button type="button" onclick="changeBtnText()">Change button text</button> 

If your button is a button tag, use the jQuery text (or html ):

 function changeBtnText() { $("#submit").text("My new button text"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="submit" id="submit">My button</button> <button type="button" onclick="changeBtnText()">Change button text</button> 

Note: I recommend giving your button an ID different from "submit" to avoid confusion.