Ajax with Jquery does not work

Asked

Viewed 307 times

-1

I need to make the Ajax within the Jquery.

The Jquery does the validation correctly, but when I click the button to send the form, it doesn’t work, hangs on the loader, where he would have to execute the ajax. How could I fix 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>
  • I put in the reply

  • That one e.preventDefault(); "is lost";

  • 1

    Tried calling Ajax by function? Just edit the answer to not create excessive comments!

  • when I withdraw e.preventDefault(); the form data does not go to the Sendcall.php

  • 1

    @Wagnermartinsbodyboard the other error is that you are using the ID reg-discagem in the form, but in JS you are using the ID reg_discagem

  • now it worked

Show 1 more comment

1 answer

0

As already mentioned, this e.preventDefault(); makes no sense so "and" is undefined and that is the cause of the error Uncaught ReferenceError: e is not defined

Browser other questions tagged

You are not signed in. Login or sign up in order to post.