web-dev-qa-db-ja.com

JavaScriptを使用してボタンの値を設定する

答えを見た後、私は愚かな気持ちになると確信していますが、私はWebの周りで先史時代のコードに出くわし続けています。私の質問は、「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>

「実際に機能するその他のもの」実際に機能するので、関数が呼び出され、ボタンが見つかります。 「新しい
テキスト」をボタンに！

どうぞよろしくお願いいたします。

javascripthtmlbutton
17
Felipe

innerHTMLの代わりにvalueを使用してください。

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

<button> の代わりに <input type="button">、innerHTMLを設定する必要があります。 <button>sは、テキストをvalue属性に基づいていません。

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

コードは機能しますが、期待どおりの動作をしていません。続いてボタンのテキストとその初期値が表示されますが、フォームが送信される前にコードによって値が変更されます。つまり、受信ページ（ほとんどの場合、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ここを参照 を参照してください

2
vol7ron

これはうまくいくかもしれません：

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

form.elements["submit-button"]は、配列であるname属性を持つすべての要素を返す可能性があります。

0
Blender

それを行うにはもっと良い方法があります。 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>

ボタンの値にタグを付けることができるかどうかはわかりませんが、誰が知っているかはわかりません。私が試したとは言えません。

0
thescientist