Question

我确信在看到答案后我会感到愚蠢，但我仍然在网络上遇到史前代码，我不确定是否仍然适用。我的问题是“我如何使用javascript更改按钮的值（在表单内）？”这就是我现在所拥有的：

function myFunc(form) {
    form.elements["submit-button"].value = "New<br>Text";
    "other stuff that actually works."
    return false;
}

接着是

<form onSubmit="return myFunc(this);">
    <button name="submit-button">Original<br>Text</button>
</form>

“实际工作的其他东西”。实际上是有效的，所以我确定该函数被调用并且按钮被找到了。我似乎无法在按钮上粘贴“新文字”！

非常感谢。

Answer 1

使用innerHTML代替value。

form.elements["submit-button"].innerHTML = ...

由于您使用的是<button>而不是<input type="button">，因此您需要设置innerHTML。 <button>不会将其文本基于值属性。

<button> innerHTML </button>
<input type="button" value="value" />

Answer 2

您的代码有效，但没有按照您的预期行事。您的后跟显示按钮的文本及其初始值，但是您的代码将在提交表单之前更改值。这意味着，接收页面（通常是php / perl / asp脚本）将看到更改的值作为GET或POST参数传递。

如果您想要更改没有提交表单的文本，您可能需要尝试：

function changeValue(id, newText) {
    var el       = document.getElementById(id);
    el.value     = newText;  // change the value passed to the next page
    el.innerHTML = newText;  // change the displayed text on the screen
    return false;
}

<form onsubmit="return false;">
    <button  id="submit-button" 
           name="submit-button" 
        onclick="changeValue(this.id,'Some New Text');" >Original<br>Text</button>
</form>

see JS Fiddle here

Answer 3

这可能有效：

form.elements["submit-button"][0].innerHTML = "New<br>Text";

form.elements["submit-button"]可能返回具有name属性的所有元素，这是一个数组。

Answer 4

有一个更好的方法来做到这一点。使用document.getElementById并为按钮指定ID。

function myFunc() {
    document.getElementById('my_button').innerHTML = "New<br>Text";
    //"other stuff that actually works."
    return false;
}

<form onSubmit="return myFunc();">
    <button id="my_button" name="submit-button">Original<br>Text</button>
</form>

我不确定你是否可以将标签放入按钮的值，但谁知道呢。不能说我已经尝试过了。

使用javascript设置按钮的值

4 个答案:

see JS Fiddle here