problem to send form by ajax

1

[! [enter the description of the image here] [2]] [2] I am trying to send a form via ajax, to prevent the page from refreshing:

function form(){
      $.ajax({
          type: 'POST',
          url: 'formulario.php',
          data: $('#formulario').serialize(),
          success: function(data) {

              console.log("sin refresh");

          }
      });
    }

HTML

 <form action="formulario.php" method="post" name="formulario" id="formulario">
       <input type="text" name="name" class="form-control" id="name" placeholder="Your Name..." required>
       <input type="text" name="company" class="form-control" id="company" placeholder="Company..." required>
       <input type="email" name="email" class="form-control" id="email" placeholder="Your Email..." required>
       <p style="font-size: 15px; margin-left: 12px;">
          What service interests you?
          <select name="service">
             <option>Compliance</option>
             <option>Cybersecurity</option>
             <option>Network Engineering</option>
          </select>
       </p>
       <br>
       <textarea name="message" class="form-control" id="message" placeholder="Messages..." required></textarea>
       <input type="checkbox" name="condiciones" id="condiciones" value="1" required> 
       <a href="privacy.html" target="new">I have read the privacy notice</a><br><br> <button type="button" class="btn btn-blue btn-effect" id="enviar" onClick="form()" style="color: white">Send</button> 
    </form>
    
asked by Aimee Ramirez 11.07.2017 в 18:05
source

3 answers

0

Remember to modify the form. In these cases, it is better to avoid assigning a function onClick , because if the user wants to use the key Enter will not work. Additionally, you should check the errors that the console shows you, since these do not have to do with the form. However I leave you how it could be a shipment with jQuery.

<script>
    $('document').ready(function(){
        $('#formulario').submit(function(evt) {
            var currentData = $(this).serialize();

            // This will avoid the form sending through html
            evt.preventDefault();

            $.ajax({
                type: 'POST',
                url: 'formulario.php',
                data: currentData,
                beforeSend: function() {
                    console.log('Enviando...');
                },
                success: function(data) {
                    alert('Mensaje enviado');
                    console.log("sin refresh");
                }
            });
        });
    });
</script>

<form name="formulario" id="formulario"> <!-- Delete "action" and "method" -->
    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name..." required />
    <input type="text" name="company" class="form-control" id="company" placeholder="Company..." required />
    <input type="email" name="email" class="form-control" id="email" placeholder="Your Email..." required />
    <p style="font-size: 15px; margin-left: 12px;">
        What service interests you?
        <select name="service">
            <option>Compliance</option>
            <option>Cybersecurity</option>
            <option>Network Engineering</option>
        </select>
    </p>
    <br />
    <textarea name="message" class="form-control" id="message" placeholder="Messages..." required></textarea>
    <input type="checkbox" name="condiciones" id="condiciones" value="1" required />
    <a href="privacy.html" target="new">I have read the privacy notice</a>
    <br><br>
    <button type="submit" class="btn btn-blue btn-effect" id="enviar" style="color: white">Send</button><!-- Delete onClick event -->
</form>
    
answered by 12.07.2017 / 16:57
source
1

You should modify the name of the function in JS, the word form can not be used as a function name, it is a reserved word ( documentation on words reserved in javascript )

I hope I have been of help, greetings!

PS: do not forget to add the reference to jquery:)

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    
answered by 11.07.2017 в 18:23
-3

The refresh is done because you are using the form tag for your form, so that it does not refresh you must remove it and use button type buttons to send the data to ajax.

function form(){
      $.ajax({
          type: 'POST',
          url: 'formulario.php',
          data: $('#formulario').serialize(),
          success: function(data) {

              console.log("sin refresh");

          }
      });
    }


<div id="formulario">
    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name..." required>
 <input type="text" name="company" class="form-control" id="company" placeholder="Company..." required>
 <input type="email" name="email" class="form-control" id="email" placeholder="Your Email..." required>
<p style="font-size: 15px; margin-left: 12px;">What service interests you?
 <select name="service">
 <option>Compliance</option>
 <option>Cybersecurity</option>
 <option>Network Engineering</option>
 </select> </p><br>
 <textarea name="message" class="form-control" id="message" placeholder="Messages..." required></textarea>
 <input type="checkbox" name="condiciones" id="condiciones" value="1" required> 
<a href="privacy.html" target="new">I have read the privacy notice</a><br><br> <button type="button" class="btn btn-blue btn-effect" id="enviar" onClick="form()" style="color: white">Send</button> </div>
    
answered by 11.07.2017 в 18:24