it-swarm-pt.tech

Definindo o valor de um botão usando javascript

Tenho certeza de que vou me sentir estúpido depois de ver a resposta, mas continuo encontrando código pré-histórico na web, o que não sei se ainda se aplica. Minha pergunta é "Como altero o valor de um botão (dentro de um formulário) usando javascript?" Aqui está o que eu tenho agora:

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

seguido por

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

As "outras coisas que realmente funcionam". realmente funciona, então eu tenho certeza que a função está sendo chamada e o botão está sendo encontrado. Eu simplesmente não consigo ficar "Novo
Envie "texto" para o botão!

Ajuda muito apreciada.

17
Felipe

Use innerHTML em vez de value.

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

Porque você está usando um <button> ao invés de <input type="button">, você precisa definir o innerHTML. <button>s não baseiam seu texto no atributo value.

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

Seu código funciona, mas não está fazendo o que você provavelmente espera. Seu seguido por mostra o texto do botão e seu valor inicial; no entanto, seu código alterará o valor antes do envio do formulário. Isso significa que a página de recebimento (geralmente um script php/Perl/asp) verá o valor alterado passado como um parâmetro GET ou POST.

Se você deseja alterar o texto sem enviar o formulário, tente o seguinte:

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>

consulte JS Fiddle aqui

2
vol7ron

Isso pode funcionar:

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

form.elements["submit-button"] provavelmente retorna todos os elementos com esse atributo name, que é uma matriz.

0
Blender

existe uma maneira muito melhor de fazer isso. use document.getElementById e forneça um ID ao botão.

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>

Não sei se você pode colocar uma tag no valor de um botão, mas quem sabe. Não posso dizer que tentei.

0
thescientist