使用javascript设置按钮的值

时间:2011-12-17 01:49:39

标签: javascript html button

我确信在看到答案后我会感到愚蠢,但我仍然在网络上遇到史前代码,我不确定是否仍然适用。我的问题是“我如何使用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>

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

非常感谢。

4 个答案:

答案 0 :(得分:27)

使用innerHTML代替value

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

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

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

答案 1 :(得分: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

答案 2 :(得分:0)

这可能有效:

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

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

答案 3 :(得分:0)

有一个更好的方法来做到这一点。使用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>

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