0
I set up a form, where I have a SELECT with three options and when selecting them, the jquery displays different form options, with their respective contents (they are three Divs with class "Hide" to hide them). The problem that when submitting the form, the "required" fields of the other inputs interfere with the processing. Someone could help me come up with an effective solution, without the need to go rogue and maintaining the need for client-side validation, even with javascript disabled?
Follow the codes:
$(function() {
// Formulários
$("#form").change(function() {
var $this, secao, atual, campos, input;
campos = $("div[data-name]");
campos.addClass("hide");
if(this.value !== "") {
secao = $('option[data-section][value="' + this.value + '"]', this).attr("data-section");
atual = campos.filter("[data-name=" + secao + "]");
if(atual.length !== 0) {
atual.removeClass("hide");
}
}
});
var formID = '#' + $('form').data('form-id');
$(formID).submit(function() {
var dados = $(this).serialize();
$('#mensagem')
.fadeIn('slow')
.css('display', 'block')
.addClass('alert alert-light')
.html("<i class='fa fa-spinner fa-pulse fa-fw'></i> Enviando...");
$.ajax({
type : 'POST',
url : '../../mail.php',
data : dados,
dataType: 'json',
success : function(response) {
$('#mensagem')
.css('display', 'block')
.removeClass()
.addClass(response.tipo)
.html('')
.html('' + response.mensagem + '');
}
});
$(this).trigger('reset');
setTimeout(function(){ $("#mensagem").fadeOut('slow'); }, 10000)
return false;
});
});<form method="post" id="form">
<div class="form-group row">
<label for="formSelect" class="col-sm-4 col-form-label"><i>*</i> Formulário</label>
<select class="form-control" name="formSelect" id="formSelect" required>
<option>-- Selecione --</option>
<option data-section="form1" value="form1">Formulário 1</option>
<option data-section="form2" value="form2">Formulário 2</option>
<option data-section="form3" value="form3">Formulário 3</option>
</select>
</div>
<div data-name="form1" class="hide">
<div class="form-group row">
<label for="campo1" class="col-form-label"><i>*</i> Campo 1</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="campo1" id="campo1" required>
</div>
</div>
<div class="form-group row">
<label for="formMSG" class="col-form-label">Mensagem</label>
<textarea class="form-control" name="formMSG" id="formMSG"></textarea>
</div>
<div class="form-group row">
<button type="submit" class="btn btn-block">Enviar</button>
</div>
</div>
<div data-name="form2" class="hide">
<div class="form-group row">
<label for="campo2" class="col-form-label"><i>*</i> Campo 1</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="campo2" id="campo2" required>
</div>
</div>
<div class="form-group row">
<label for="formMSG" class="col-form-label">Mensagem</label>
<textarea class="form-control" name="formMSG" id="formMSG"></textarea>
</div>
<div class="form-group row">
<button type="submit" class="btn btn-block">Enviar</button>
</div>
</div>
<div data-name="form3" class="hide">
<div class="form-group row">
<label for="campo3" class="col-form-label"><i>*</i> Campo 1</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="campo3" id="campo3" required>
</div>
</div>
<div class="form-group row">
<label for="formMSG" class="col-form-label">Mensagem</label>
<textarea class="form-control" name="formMSG" id="formMSG"></textarea>
</div>
<div class="form-group row">
<button type="submit" class="btn btn-block">Enviar</button>
</div>
</div>
<div class="row">
<div id="mensagem" class="" role="alert"></div>
</div>
</form>
The way you want to do it, you have to create a form for each thing.
– Sam
Opa @Sam all right? So, theoretically I "have a form for each one", however, are in the same code. The problem is that I need them to be on the same page. Do you have any idea how I can do it? Generating content by Jquery would be the right way?
– rasp
From what I see it’s all in the same
form.– Sam
Sorry for the delay, but understood, you say, put complete form for each content, correct?
– rasp
Yeah, separate each segment with a tag
<form></form>, so you can control things separately. By submitting one, the other will not influence.– Sam
@Sam separated the forms with the tag form, however, he no longer sends the form (none of the three). I’ve tried debugging too and I can’t find error, it’s like "Submit" doesn’t work, it just reloads the page
– rasp