1

Eu não tenho muita experiência com JQuery e Ajax.

Estou desenvolvendo um formulário que ao selecionar o Radio Button para enviar informações anônimas, ele deve tornar invisível a parte do formulário que é referente ao endereço.

Estou usando HTML5, CSS3, Bootstrap, PHP.

2
  • Poderia colocar o código já desenvolvido.
    – rray
    Commented 25/03/2014 às 13:47
  • 1
    Dê uma conferida no guia Como perguntar. Se por acaso lê Inglês, aqui tem um artigo ótimo sobre como melhorar nossa técnica de escrever perguntas.
    – brasofilo
    Commented 25/03/2014 às 13:49

2 Respostas 2

2

Olá!

Você pode utilizar a função .hide() juntamente com .change() do jQuery.

$("input[name='opcoes']").change(function () {
    if ($(this).val() === 'Sim') {
        $("#painelEndereco").fadeIn();
    } else {
        $("#painelEndereco").fadeOut(function() {
            $(this).remove();
        });
    }
});

O exemplo completo você pode encontrar aqui: http://jsfiddle.net/vrcca/fC7Yb/

Edit 1: Adicionadas as sugestões de RodrigoBorth.

Abs!

4
  • 1
    esse método é funcional, mas poderia ser feito com ajax para substituir o conteúdo por completo sem deixar uma possível "falha" de segurança... recomendo tambem substituir o show e o hide por fadeIn e fadeOut respectivamente, fica mais bonito :D Commented 25/03/2014 às 13:59
  • Obrigado a todos. Vou ficar com o exemplo do vrcca. Muito obrigado. Commented 25/03/2014 às 14:20
  • Só mais uma coisa. Onde eu coloco o código JQuery? Obrigado. Commented 25/03/2014 às 15:50
  • dentro do $(document).ready. Segue um exemplo da documentação do jQuery: learn.jquery.com/about-jquery/how-jquery-works/…
    – vrcca
    Commented 25/03/2014 às 16:44
2

Eu recomendo o uso de checkbox para dizer se é anônimo ou não:

Javascript:

$(function() {
    var $check = $("#checkAnonimo");
    $check.on("change", function () {
        var anonimo = $check.is(":checked");
        anonimo ? $("#camposAnonimo").hide() : $("#camposAnonimo").show();
        $("#camposAnonimo input").prop("disabled", anonimo);
    });
});

Note que além de esconder os inputs relacionados ao endereço, também desativo os mesmos, pois mesmo ocultos, se você submeter o form, os dados serão enviados caso tenham sido preenchidos previamente.

Html:

<form action="" method="POST">
    <div><label for="textOpiniao">Escreva sua opinião:<br/></label><textarea id="textOpiniao">Sua opinião aqui!</textarea></div>
    <label for="checkAnonimo"><input type="checkbox" id="checkAnonimo"/> Anônimo?</label>
    <div id="camposAnonimo">
        <div><label for="textNome">Nome: <input type="text" name="nome" id="textNome"/></label></div>
        <div><label for="textEndereco">Endereço: <input type="text" name="endereco" id="textEndereco"/></label></div>
    </div>
    <div><input type="submit" value="Enviar"/></div>
</form>
1
  • Obrigado a todos. Esta funcionando perfeitamente. Commented 25/03/2014 às 16:04

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 .