Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá,
esta dúvida pode ser um pouco básica mas já pesquisei durante vários dias e não estou a conseguir resolver.
eu tenho fieldset input onde o utilizador coloca um nº com base no nº escrito o formulário cria x un fieldset com 3 campo. 1- imput normal; 2 um select onde quando é seleccionado "sim" é mostrado o campo 3 que é um textarea.
o problema é que o select do 1º fieldset está a manipular todos os textarea quando apenas devia manipular a 1º textarea; o select do segundo fieldset devia apenas conreolar o segundo textara ect.
este é o script que criei.
$(document).ready(function(){
$('#NAdultos').keyup(function(){
if($('fieldset.adulot').length < $('#NAdultos').val()){
for (var i = $('fieldset.adulto').length; i < $('#NAdultos').val(); i++) {
j=i+1
$('#formulario_contactos form').append($('<fieldset class="adulto_'+j+'"> <legend >'+j+'º adulto :</legend> <input type="text" placeholder="Nome dos adultos" name="Nomes_adultos"> <label>Se um ou mais convidado tiver restrições alimentares, por favor indique-nos:</label> <select class="alera"> <option value="s">Sim</option> <option value="n" selected="selected">Não</option> </select> <textarea placeholder="qual" class="qadultos"></textarea> </fieldset>').hide().fadeIn(1500));
}
}if($('fieldset.adulto').length > $('#NAdultos').val()){
var NAdultos = $('#NAdultos').val();
$('#formulario_contactos form').find("fieldset.adulto").slice(NAdultos).fadeOut(1500)
}
}
);
$('.alera').each(function(){
$(this).change(function() {
var alerg = $(".alera option:selected").val();
if(alerg == 's') {$(".qadultos").fadeIn(1500);});
$('#submit').click(function(){
$.ajax({
url:"name.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
})
});
e este é o html
<form action="" method="post" >
<input type="number" placeholder="Nº de adultos" name="NAdultos" id="NAdultos">
<fieldset class="adulto">
<legend >adulto:</legend>
<input type="text" placeholder="Nome dos adultos" name="Nomes_adultos">
<label>Se um ou mais convidado tiver restrições alimentares, por favor indique-nos:</label>
<select class="alera">
<option value="s">Sim</option>
<option value="n" selected="selected">Não</option>
</select>
<textarea placeholder="qual" class="qadultos"></textarea>
</fieldset>
se alguém poder ajudar agradeço imenso.
Desde já obrigado
cumprimentos>
2 horas atrás, washalbano disse:
Olá!
Tente assim:
$(document).ready(function () {
form = $('#formulario_contactos form'),
fieldset = form.find('fieldset').eq(0).clone();
$('#NAdultos').on('input', function () {
var quant = this.value,
adulot = $('fieldset.adulto').length;
if (adulot < quant) {
for (var i = adulot; i < quant; i++) {
fieldset.find('legend').html(i + 1 + 'º Adulto: ');
form.append(fieldset.clone().hide().fadeIn(500));
}
}
if (adulot > quant) {
form.find("fieldset.adulto").slice(quant).fadeOut(500, function () {
this.remove()
});
}
}
);
form.on('change', '.alera', function () {
var alerg = this.value,
textArea = $(this).next(); // apenas o textarea que está imediatamente depois de .alera
alerg == 's' ? textArea.fadeIn(500) : textArea.fadeOut(500);
});Nº de adultos
<input type="number" min="1" value="1" placeholder="Nº de adultos" name="NAdultos" id="NAdultos">
<fieldset class="adulto">
<legend >adulto:</legend>
<input type="text" placeholder="Nome dos adultos" name="Nomes_adultos">
<label>Se um ou mais convidado tiver restrições alimentares, por favor indique-nos:</label>
<select class="alera">
<option value="s">Sim</option>
<option value="n" selected="selected">Não</option>
</select>
<textarea placeholder="qual" class="qadultos" style="display:none;"></textarea>
</fieldset>
Muito muito obrigado. Bastante mais dinâmico assim e está a funcionar a perfeição. muito obrigado
Olá!
Tente assim:
Nº de adultos