I do not have much experience with JQuery and Ajax.
I am developing a form that when selecting the Radio Button to send anonymous information, it should make invisible the part of the form that is referring to the address.
I'm using HTML5, CSS3, Bootstrap, PHP.
Hello
You can use the .hide () function together with . change () of jQuery.
$("input[name='opcoes']").change(function () {
if ($(this).val() === 'Sim') {
$("#painelEndereco").fadeIn();
} else {
$("#painelEndereco").fadeOut(function() {
$(this).remove();
});
}
});
The full example you can find here: link
Edit 1 : Added suggestions for RodrigoBorth .
Abs!
I recommend using checkbox to tell if it is anonymous or not:
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 that in addition to hiding the address-related inputs, you also disable them , because even if hidden, if you submit the form, the data will be sent if they have been filled in previously.
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>