4
I have a bootstrap modal whose same has a contact form:
HTML:
Thank you! Your form has been sent successfully and as soon as possible will be answered.
<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 everything is right, the modal opens correctly, the form is displayed and when I send the form, the thank you alert appears on the screen. However, I would like a function that, once I send the form, the modal automatically closes, because the alert appears but is still in the background, with the modal being highlighted...
Taking advantage of the post, I would also like to ask why the alert take (about 10 seconds) to appear on the screen. Is it because I am using ajax on localhost?
Aah thanks, it worked :) Taking advantage, would you have an answer to my second question? "... 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 on localhost?"
– Gabriel Moodlight
That doesn’t sound like a problem. The modal will only appear after the JS is loaded, it is necessary that Jquery and Bootstrap are loaded to appear. Except if set in CSS, so when CSS is loaded it will already be open, even without JS.
– Inkeliz
No, no... the problem is not in the modal... When clicking on "Send message" inside the modal, it takes about 10 seconds to exit the screen (with the Hide code you passed me) and the message alert sent only appears after that time too, IE, the JS takes to update the information that has been set (the alert appear and the modal hide)... Is this happening because I’m using ajax on localhost? It’s because I don’t like this delay when I move the site to hosting
– Gabriel Moodlight
The problem then is in response time. The "server" is taking a long time to respond. For example, if you are using PHP it is he who is slow to return the information to ajax. The
successis done immediately after getting the server response.– Inkeliz
Oh got it... Yes, I’m using PHP, would there be some way to speed up the response time? Because my code is simple, see: http://prntscr.com/duya2n
– Gabriel Moodlight
The
mail()is a time-consuming topic at http://stackoverflow.com/questions/18325269/what-makes-phps-mail-function-so-slow. (in English). On the server this can be better than on the localhost, obviously.– Inkeliz
Ah right, thank you for clearing up all my doubts and helping me :)
– Gabriel Moodlight
@Gabrielmoodlight, mark the answer. Do not abandon the question ;)
– ShutUpMagda