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

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> s не основывают свой текст на атрибуте value.

<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>

см. JS Fiddle здесь

Answer 3

есть гораздо лучший способ сделать это. используйте 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>

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

Answer 4

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

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

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