Contact form using e.preventDefault(); not working live

Question

UPDATE - the contact form is found at this URL.

I am trying to get the following contact form to function, using this tutorial.

I manage to get everything to work as expected on my computer using apache webserver. After uploading the files to an online website, the ajax function does not kick in. I seems like the e.preventDefault(); stops working after the upload, and the form is redirected to a new site,and not just being processed on the site without the reload.

I have also been trying to use the return false; instead of e.preventDefault(); without any success.

Her is my code:

.html

<form method="post" action='mail/mail.php'>
    <label>Name</label>
    <input name="name" id="name" placeholder="Name.." required="true" class="input-field">

    <label>Mail</label>
    <input type="email" name="email" placeholder="Mail.." required="true" class="input-field">

    <label>Msg</label>
    <textarea name="message" id="message" class="textarea-field" required="true"></textarea>

    <input type="submit" id="submit" name="submit" value="Send">
</form>

    <div id="loading">
        Sender melding...
    </div>
    <div id="success">
    </div>

.js

$(function(){
      $('form').submit(function(e){
        var thisForm = $(this);
        //Prevent the default form action

        //return false;
        e.preventDefault();

        //Hide the form
        $(this).fadeOut(function(){
          //Display the "loading" message
          $("#loading").fadeIn(function(){
            //Post the form to the send script
            $.ajax({
              type: 'POST',
              url: thisForm.attr("action"),
              data: thisForm.serialize(),
              //Wait for a successful response
              success: function(data){
                //Hide the "loading" message
                $("#loading").fadeOut(function(){
                  //Display the "success" message
                  $("#success").text(data).fadeIn();
              });
            }
          });
        });
      });
    })

Please help!

possible duplicate of [Prevent Default on Form Submit jQuery](http://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery) — castis, Nov 12 '14 at 22:19
If you do a `console.log`, does anything print out when you submit the form? Make sure `persist` is turned on for your console, or things will get erased when the page is reloaded. — Kyle, Nov 12 '14 at 22:24
Are you sure jQuery is being loaded correctly? Check your console for errors. — Barmar, Nov 12 '14 at 22:27
If you hide the form doesn't that cause some other odd problems? — Jay Blanchard, Nov 12 '14 at 22:28
@Kyle Thank you for your suggestion, I added the `console.log ( 'submit was pressed' );` to the **.js** code, but when checking the console after the submit is pressed I cannot see the console msg, neither in firebug or chrome developer tools. By checking the resources I can see that both the jQuery and the current **.js** are loaded correctly. — Sepi, Nov 14 '14 at 16:44

PeterKA · Accepted Answer · 2014-11-14T15:59:44.720

That's because your JS is missing a closing });. Please check this demo to confirm that the default action is indeed prevented and the ajax does kick in. However, I was expecting a POST but instead I am seeing an OPTIONS request.

NOTE: Giving an element a name or id attribute value of submit is bad practice. You cannot for example use JavaScript to submit the form via default form submission -- this.submit() or $('form')[0].submit() without getting the error ...submit() is not a function .....

$(function() {
      $('form').submit(function(e) {
        var thisForm = $(this);
        //Prevent the default form action

        //return false;
        e.preventDefault();

        //Hide the form
        $(this).fadeOut(function() {
          //Display the "loading" message
          $("#loading").fadeIn(function() {
            //Post the form to the send script
            $.ajax({
              type: 'POST',
              url: thisForm.attr("action"),
              data: thisForm.serialize(),
              //Wait for a successful response
              success: function(data) {
                //Hide the "loading" message
                $("#loading").fadeOut(function() {
                  //Display the "success" message
                  $("#success").text(data).fadeIn();
                });
              }
            });
          });
        });
      });
  }); // <==== MISSING THIS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post" action='mail/mail.php'>
  <label>Name</label>
  <input name="name" id="name" placeholder="Name.." required="true" class="input-field">

  <label>Mail</label>
  <input type="email" name="email" placeholder="Mail.." required="true" class="input-field">

  <label>Msg</label>
  <textarea name="message" id="message" class="textarea-field" required="true"></textarea>

  <input type="submit" id="submit" name="submit" value="Send">
</form>

<div id="loading">
  Sender melding...
</div>
<div id="success">
</div>

Thank you for pointing out this mistake, I checked my .js code and realize that the original code actually contain the closing `});` and that I failed to copy it over to stackoverflow. I have also tried to change the input id from "submit" to "send", but unfortunately it did not do the trick! — Sepi, Nov 14 '14 at 15:56
What do you mean by *an online website*? Which hosting service are you using ... can you share the URL so we can take a look? — PeterKA, Nov 14 '14 at 16:10
At the moment I am hosting the site off 000webhost.com, the contact form can be found thought this [URL](http://testurl321.site50.net/contact%20test/), the plan is to host the site off https://www.one.com/ when everything is set. — Sepi, Nov 14 '14 at 22:34
Thank you for not giving up on me :) I tried to change the jquery as you suggested. Both by `` and ``. The send button does not react at all! But it seems like the jquery is in fact included.. — Sepi, Nov 15 '14 at 08:22
Please use `e.preventDefault()` instead of `return false;`. When using `return false` it is generally at the end of the callback while `e.preventDefault()` is generally at the beginning. — PeterKA, Nov 15 '14 at 23:59

score 0 · Answer 2 · answered Nov 12 '14 at 22:20

0

Since you are submitting via AJAX anyway, you may find it easier to change your input type to button, and bind to click instead of form submit, to avoid the default submit behaviour you are trying to circumvent.

answered Nov 12 '14 at 22:20

Lunster

896
6
17

Thank you for your suggestion, I tried it out like this: ` $('#send').click(function(e) { ` is this the way you pictured, or do you have concerns regarding this code? – Sepi Nov 14 '14 at 15:59
Yeah that is the general idea, you will have to have a form submit method in your button handler, because you are removing the standard submit input type. – Lunster Nov 14 '14 at 16:14

Contact form using e.preventDefault(); not working live

2 Answers2