技术求助：如何将指定提交按钮文本从Complete Purchase改为Place Order

Hey there! Let's get that button text updated for you. Depending on your setup, here are a few straightforward solutions:

1. Directly Modify the Static HTML #

If you have access to the raw HTML code, just update both the value attribute and the data-disable-with attribute to "Place Order"—this keeps the text consistent whether the button is active or disabled during submission. Here's the modified code:

<input type="submit" name="commit" value="Place Order" class="btn btn-primary" id="js-payment-btn" data-disable-with="Place Order">

2. Dynamically Update with JavaScript #

If you can't edit the HTML directly (like if it's generated by a CMS or framework), use JavaScript to target the button by its ID and update the text on the fly:

// Grab the button element
const paymentBtn = document.getElementById('js-payment-btn');

// Update the visible button text
paymentBtn.value = 'Place Order';

// Update the text that shows when the button is disabled
paymentBtn.dataset.disableWith = 'Place Order';

You can run this code on page load, or trigger it whenever you need to change the button text dynamically.

3. If You're Using Rails (since data-disable-with is a Rails UJS feature) #

If this button is part of a Rails form, you don't need to manually set the data-disable-with attribute—Rails handles that automatically when you update the submit tag's text. For example:

<%= submit_tag "Place Order", class: "btn btn-primary", id: "js-payment-btn" %>

This will render the button with both value="Place Order" and data-disable-with="Place Order" out of the box.

That should cover all common scenarios. Let me know if you hit any snags!

内容的提问来源于stack exchange，提问作者Hamiz