Ajax keep redirecting to the php page

Question

I have a shopify store and i want to add a form on product page the problem is when i want to submit a from using ajax with an external link but i want to stay on the same page it goes to the external link

<form method="post" id="fastform"action="http://website.fun/bianca/doc.php" class="form" enctype="multipart/form-data">
<label  class="label" style="color: rgb(0, 0, 0);">Nom :  </label>
<input placeholder="Nom"    class="input" width="100%" type="text" name="nom" id="nom">
<label  class="label" style="color: rgb(0, 0, 0);">Télephone* :  </label>
<input placeholder="Telephone"    class="input" width="100%" type="text" name="phone" id="phone">
<input placeholder="Adresse"    class="input" width="100%" type="text" name="adresse" id="adresse">
<div id="form-messages"></div>
<button type="submit" class="button-input btn btn-default" name="btn"style="margin-top: 20px;" id="btn">Commander</button>

and this is the js en ajax part

<script>

$(function () {
    // Get the form.
    var form = $('#fastform');

    // Get the messages div.
    var formMessages = $('#form-messages');

    // Set up an event listener for the contact form.
    $(form).submit(function (event) {
        // Stop the browser from submitting the form.
        event.preventDefault();
        // Serialize the form data.
        var formData = $(form).serialize();
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
            }.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            // Set the message text.
            $(formMessages).text("votre commande et bien traiter");

            // Clear the form.
            $('#name').val('');
            $('#email').val('');
            $('#message').val('');
        })).fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            // Set the message text.
            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! il\'ya un problem');
            }
        });
                });

i want the page to stay without refreshing and get the results on the same page

Answer 1

try this,

$( "#your_form_id" ).submit(function(event) {
    event.preventDefault();
    $.ajax({
            beforeSend: function () {
                //something to do before ajax call
            },
            complete: function () {
               //something to do after ajax call
            },
            type:"POST",
            data:$(this).serialize(),
            url:"<?php echo $url;?>",
            success:function(data){
                $('#divId').html(data); // id where you want to retrive and show your data
            }
    });

});

Please review your action URL again

Answer 2

Try This

Change the form like this.

<form method="post" id="fastform" onsubmit='return submitForm()' action="http://website.fun/bianca/doc.php" class="form" enctype="multipart/form-data">

And change the function like this,

  function submitForm(){

  var formData = $('#fastform').serialize();
  $.ajax({
      type: 'POST',
      url: $('#fastform').attr('action'),
      data: formData
  }.done(function(response) {
      // Make sure that the formMessages div has the 'success' class.
      $(formMessages).removeClass('error');
      $(formMessages).addClass('success');

      // Set the message text.
      $(formMessages).text("votre commande et bien traiter");

      // Clear the form.
      $('#name').val('');
      $('#email').val('');
      $('#message').val('');
  })).fail(function(data) {
      // Make sure that the formMessages div has the 'error' class.
      $(formMessages).removeClass('success');
      $(formMessages).addClass('error');

      // Set the message text.
      if (data.responseText !== '') {
          $(formMessages).text(data.responseText);
      } else {
          $(formMessages).text('Oops! il\'ya un problem');
      }
  });

  return false;

}

Answer 3

Try this code:

$(function (){ 
 $('form').bind('submit', function () { 
       $.ajax({ type: 'post', 
        url: 'libs/send.php', 
        data: new FormData($('form')[0]),
        cache: false, 
        contentType: false,
        processData: false,
        success: function () { 
      alert("Data has been successfully inserted"); 
   } 
    }); 
   return false; 
 }); 
});