I need to run Ajax
within Jquery
.
The Jquery
does the validation correctly, more when I click the button to send the form, it does not work, it locks in loader
, where it would have to execute ajax
.
How could I solve this?
I'm using this jquery plugin jquery.validate
Console error
Uncaught ReferenceError: e is not defined
at $.validator.submitHandler ((index):1918)
at handle (jquery.validate.js:86)
at HTMLFormElement.<anonymous> (jquery.validate.js:110)
at HTMLFormElement.dispatch (jquery-2.1.3.min.js?Tuesday 6th of February 2018 01:33:38 AM:3)
at HTMLFormElement.r.handle (jquery-2.1.3.min.js?Tuesday 6th of February 2018 01:33:38 AM:3)
submitHandler @ (index):1918
handle @ jquery.validate.js:86
(anonymous) @ jquery.validate.js:110
dispatch @ jquery-2.1.3.min.js?Tuesday 6th of February 2018 01:33:38 AM:3
r.handle @ jquery-2.1.3.min.js?Tuesday 6th of February 2018 01:33:38 AM:3
Code:
$(document).ready(function () {
$('#reg_discagem').validate({ // initialize the plugin
rules: {
nome: {
required: true,
minlength: 5
},
email: {
required: true,
email: true,
minlength: 5
},
telefonephone: {
required: true,
minlength: 5
}
},
submitHandler: function (form) { // for demo
$("#form-content_discagem").html('<div class="spinner"></div>');
e.preventDefault();
var form = $('#reg-discagem');
$.ajax({
url: 'http://3mind.com.br/EnviarPedidoChamada.php',
type: 'POST',
data: form.serialize()
})
.done(function(data){
$('#form-content_discagem').fadeOut('slow', function(){
$('#form-content_discagem').fadeIn('slow').html(data);
});
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
return false; // for demo
}
});
});
Form Html:
<form action="" id="reg-discagem" method="post" class="wpcf7-form" novalidate>
<div class="form-group ligacao">
<label for="nome">Seu Nome</label>
<input type="text" class="form-control" name="nome" id="nome" placeholder="Seu nome">
</div>
<div class="form-group ligacao telefone">
<div class="row" style="margin-top:10px;">
<div class="col-md-4">
<label for="paises">Seu País</label>
<select name="countryCode" id="paises" style="clear:both;">
<option data-countryCode="BR" value="55" selected>Brasil (+55)</option>
<optgroup label="Other countries">
<option value="93">AFEGANISTAO</option>
<option value="591">BOLIVIA</option>
<option value="387">BOSNIA E HERZEGOVINA</option>
<option value="267">BOTSUANA</option>
<option value="55" selected>BRASIL</option>
</optgroup>
</select>
</div>
<div class="col-md-8">
<label for="telefonephone">Seu telefone </label>
<input type="text" id="telefonephone" name="telefonephone" class="form-control telefonephone" placeholder="(DD) XXXXX-XXXX"> </div>
</div>
</div>
<br>
<div class="form-group ligacao" style="clear:both; margin-top:-20px;">
<label for="email">Email</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Seu Email">
</div>
<div id="form-content_discagem" style="clear:both;">
<input type="submit" id="btn" class="wpcf7-form-control wpcf7-submit" style="background-color: #f05d2d;border: 1px solid #f05d2d;font-size: 20px;color: #fff;font-family: lato;padding: 20px;border-radius: 6px;margin-bottom: 3px;margin-top: 10px;text-transform: none !important;" value="Receber ligação">
</div>
</form>