I have a modal bootstrap that has a contact form:
HTML:
Thank you! Your form has been successfully submitted and will be answered as soon as possible.
<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="contactModalLabel">Formulário para contato</h4>
</div>
<div class="modal-body">
<form method="POST" id="ajax_form" action="sendForm.php">
<div class="form-group">
<label class="control-label">Seu nome:</label>
<input type="text" class="form-control" name="name" placeholder="Escreva seu nome">
</div>
<div class="form-group">
<label class="control-label">Seu email:</label>
<input type="email" class="form-control" name="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label class="control-label">Assunto:</label>
<input type="text" class="form-control" name="subject" placeholder="Escreva o assunto da mensagem">
</div>
<div class="form-group">
<label class="control-label">Mensagem:</label>
<textarea class="form-control" id="mensagem" name="message" placeholder="Escreva sua mensagem"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<input type="submit" class="btn btn-primary" value="Enviar mensagem">
</form>
</div>
</div>
</div>
</div>
JS:
$('#ajax_form').submit(function(){
var dados = $( this ).serialize();
jQuery.ajax({
type: "POST",
url: "sendForm.php",
data: dados,
success: function(data)
{
$("#msg").attr({"style":"display: block;"});
}
});
return false;
});
$("#closeModal").on("click", function(){
$("#msg").attr({"style":"display: none;"});
So far so good, the modal opens correctly, the form is displayed and when I submit the form, the thank you alert appears on the screen. However, I would like a function that, once I send the form, the modal closes automatically, because the alert appears but still stays in the background, with the modal being highlighted ...
Taking advantage of the post, I would also like to ask why the alert takes (about 10 seconds) to appear on the screen. Is it because I'm using ajax in localhost?