I put the plugin Pace Master on my page that makes a bar load at the top while the page is loading, like YouTube's, however, I want to make that same bar load when sending the form it contains on the page, if it is filled out. I've seen this on a myriad of sites, and it seems to be pretty simple but I do not have much JavaScript knowledge yet, so the ways I tried did not work. I tried to call the loading function with onclick but it did not work, I wanted it to work at least without checking if the form is filled, since the main one would be if the user had feedback when he clicked send the form.
<label for="questao5">5. Se possível, liste alguns sites que você gosta, incluindo as URLs.</label>
<textarea name="questao5" id="questao5" required></textarea>
<button class="btn" id="enviar" name="enviar" type="submit">Enviar</button>
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #8BB006;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
-JavaScript plugin- Link GitHub
-JavaScript form -
$('.formphp').on('submit', function() {
var emailContato = "[email protected]"; // Escreva aqui o seu e-mail
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(response) {
if( $('[name="leaveblank"]').val().length != 0 ) {
$('.formphp').html("<div id='form-erro'></div>");
$('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>")
.hide()
.fadeIn(1500, function() {
$('#form-erro');
});
} else {
$('.formphp').html("<div id='form-send'></div>");
$('#form-send').html("<span>Mensagem enviada!</span><p>Em breve eu entro em contato com você. Abraços.</p>")
.hide()
.fadeIn(1500, function() {
$('#form-send');
});
};
},
error: function(response) {
$('.formphp').html("<div id='form-erro'></div>");
$('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>")
.hide()
.fadeIn(1500, function() {
$('#form-erro');
});
}
});
return false;
});