Установка значения кнопки с помощью javascript

Я уверен, что я буду чувствовать себя глупо, увидев ответ, но я продолжаю работать в доисторическом коде в Интернете, и я не уверен, что все еще применим. Мой вопрос: "Как изменить значение кнопки (внутри формы) с помощью 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>

"Другой материал, который действительно работает". на самом деле работает, поэтому я уверен, что функция вызвана и кнопка найдена. Я просто не могу вставить "Новый текст" в кнопку!

Помогите оценить.

Ответ 1

Используйте innerHTML вместо value.

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

Поскольку вы используете <button> вместо <input type="button">, вам нужно установить innerHTML. <button> не основывают свой текст на атрибуте value.

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

Ответ 2

Ваш код работает, но не делает то, что вы, вероятно, ожидаете. Затем вы увидите текст кнопки и ее начальное значение, однако ваш код изменит значение перед отправкой формы. Это означает, что страница приема (чаще всего php/perl/asp script) увидит измененное значение, переданное как параметр 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>

см. здесь JS Fiddle

Ответ 3

Это может сработать:

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

form.elements["submit-button"], вероятно, возвращает все элементы с этим атрибутом name, который является массивом.

Ответ 4

есть намного лучший способ сделать это. используйте document.getElementById и дайте кнопке идентификатор.

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>

Я не уверен, что вы можете поместить тег в значение кнопки, но кто знает. Не могу сказать, что я пробовал.