使用JavaScript设置按钮的值

oprakyz7  于 2023-02-28  发布在  Java
关注(0)|答案(4)|浏览(207)

我知道看到答案后我会觉得自己很愚蠢,但我一直在网络上遇到史前代码,我不确定这些代码是否仍然适用。如何使用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>

其他的东西确实有效。"确实有效,所以我确信函数被调用了,按钮被找到了。我只是不能坚持"新建
文本"输入按钮!
非常感谢帮助。

yk9xbfzb

yk9xbfzb1#

使用innerHTML代替value

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

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

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

3phpmpom2#

你的代码可以工作,但是没有达到你的预期。你的后跟显示了按钮的文本和它的初始值,但是你的代码会在表单提交之前更改值。这意味着,接收页面(通常是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>

∮ ∮ ∮ ∮

z9smfwbn

z9smfwbn3#

这可能行得通:

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

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

tvmytwxo

tvmytwxo4#

有一个更好的方法来完成这个任务。使用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>

我不确定你能不能在一个按钮的值里放一个标签,但是谁知道呢。我还没试过。

相关问题