2

Minha dúvida é a seguinte: Observem os seguintes campos de formulário:

input type="radio" name="pagto" value="A"
input type="radio" name="pagto" value="B"
input type="radio" name="pagto" value="C"
input type="radio" name="pagto" value="D"

Notem que o "name" é o mesmo e a variável está no "value", conforme o padrão.

O que preciso: Ao clicar em um radio, o envio do formulário já acontece. Não quero usar o botão "submit", quero que o envio seja no momento do clique no radio e que TODOS os campos do formulário sejam enviados.

2
  • Sei que não é essa a sua pergunta (e por isso estou só comentando), mas eu diria que fazer o envio do formulário pelo clique no Radio Button é uma má ideia. Não sei os detalhes do sistema que está construindo, mas esse componente permite ao usuário fazer uma escolha que as vezes pode ser suficientemente importante (exemplo: qual opção de frete a pagar?) para que lhe seja permitido pensar a respeito e até mesmo alterar a escolha inicial. [...] Commented 13/06/2015 às 22:36
  • [...] Além do mais, tradicionalmente esse envio imediato não é o comportamento padrão, e certamente não vai ser esperado pela maioria dos usuários (ainda mais se forem recém-chegados ao seu sistema). Assim, você pode causar mais problemas do que facilidades. Sugiro não fazer isso, ou ao menos avaliar essa opção com alguns usuários antes de colocá-la em produção. Commented 13/06/2015 às 22:37

1 Resposta 1

3

Precisas de adicionar um oscultador do evento change. Também daria com click mas change é mais correto semânticamente e depois fazeres form.submit() quando esse evento fôr detectato.

Um exemplo seria assim:

var radios = document.querySelectorAll('input[type="radio"]');
[].forEach.call(radios, function (radio) {
    radio.addEventListener('change', function () {
        document.querySelector('form').submit();
    });
});

jsFiddle: http://jsfiddle.net/0gkhygqx/

Se já souberes qual é o elemento form podes fazer como o @ctgPi sugeriu, senão podes usar isto (http://jsfiddle.net/0gkhygqx/1/) que procura o elemento form ao qual esse input pertence.

// isto fica dentro do event handler
var form = (function (el) {
    while (el.tagName.toLowerCase() != 'form') el = el.parentNode;
    return el;
})(e.target);
form.submit();
2
  • 1
    +1, mas não seria melhor fazer algo tipo var form = document.querySelector('form');, var radios = form.querySelectorAll('input[type="radio"]'); e form.submit();? Assim fica mais fácil de ajeitar no dia que o @Washington tiver mais de um formulário na página dele.
    – user25930
    Commented 13/06/2015 às 20:07
  • 1
    @ctgPi tens razão, juntei essa ideia e outra variante.
    – Sergio
    Commented 13/06/2015 às 20:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .