web-dev-qa-db-fra.com

Définition de la valeur d'un bouton à l'aide de javascript

Je suis sûr que je vais me sentir stupide après avoir vu la réponse, mais je continue de rencontrer du code préhistorique sur le Web, ce qui ne s'applique pas encore. Ma question est "Comment puis-je changer la valeur d'un bouton (à l'intérieur d'un formulaire) en utilisant javascript?" Voici ce que j'ai en ce moment:

function myFunc(form) {
    form.elements["submit-button"].value = "New<br>Text";
    "other stuff that actually works."
    return false;
}

suivi par

<form onSubmit="return myFunc(this);">
    <button name="submit-button">Original<br>Text</button>
</form>

Les "autres trucs qui fonctionnent réellement". fonctionne réellement, donc je suis sûr que la fonction est appelée et que le bouton est trouvé. Je n'arrive pas à coller "Nouveau
Texte "dans le bouton!

Aide très appréciée.

javascripthtmlbutton
17
Felipe

Utilisez innerHTML au lieu de value.

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

Parce que vous utilisez un <button> au lieu de <input type="button">, vous devez définir le innerHTML. <button>s ne basent pas leur texte sur l'attribut value.

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

Votre code fonctionne, mais ne fait pas ce que vous attendez probablement. Votre suivi par affiche le texte du bouton et sa valeur initiale, mais votre code changera la valeur avant l'envoi du formulaire. Cela signifie que la page de réception (le plus souvent un script php/Perl/asp) verra la valeur modifiée passée sous forme de paramètre GET ou POST.

Si vous souhaitez modifier le texte sans soumettre le formulaire, vous pouvez essayer ceci:

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>

voir JS Fiddle here

2
vol7ron

Cela pourrait fonctionner:

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

form.elements["submit-button"] renvoie probablement tous les éléments avec cet attribut name, qui est un tableau.

0
Blender

il y a une bien meilleure façon de le faire. utilisez document.getElementById et donnez au bouton un 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>

Je ne suis pas sûr que vous puissiez mettre une balise dans la valeur d'un bouton, mais qui sait. Je ne peux pas dire que je l'ai essayé.

0
thescientist