Form on submit not doing anything

Question

This is the code I'm using to send a form to a php page and then sending an email. Somehow it's not working and I don't get why. The page just reloads (why?) and I cannot see any request being sent. (I'm using MAMP on macOS if this is a useful information). What's wrong here? Thank you for helping me out. PS: also, the page reloads when I click submit. Why and how can I prevent that?

HTML

         <div id="form_container">
          <form id="contact_form" enctype="multipart/form-data">
            <div class="form-group">
              <div class="row">
                <div class="col">
                  <input name="name" type="text" class="form-control" placeholder="Name" id="inputName">
                </div>
                <div class="col">
                  <input name="surname" type="text" class="form-control" placeholder="Surname" id="inputSurname">
                </div>
              </div>
            </div>
            <div class="form-group">
              <input name="email" type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
            <br/>
            <div class="form-group">
              <input name="subject" type="text" class="form-control" id="inputSubject" placeholder="Subject">
            </div>
            <div class="form-group">
              <textarea name="message" class="form-control" id="textArea" rows="4" placeholder="Write your message here"></textarea>
            </div>
            <div id="btn_container">
              <button id="btn_send" name="submit" type="submit" class="btn btn-dark">SEND</button>
              <div id="success_send" class="alert alert-success" role="alert">
                SUCCESS
              </div>
              <div id="error_send" class="alert alert-danger" role="alert">
                ERROR
              </div>
            </div>
          </form>
        </div>

JS

$( document ).ready(function() {

  $('#contact_form').submit(function(event) {
    $.ajax({
      type: 'POST',
      url: '../php/email.php',
      data: $('#contact_form').serialize(),
      success: function() {
        $('#success_send').show();
      },
      error: function(){
        $('#error_send').show();
      }
    });
  });

});

PHP

<?php
if($_POST){
  $name = $_POST['name'];
  $surname = $_POST['surname'];
  $email = $_POST['email'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];

  $to = "xxxxxx@xxxx.xxx";
  $subject = "Portfolio Mail - ".$subject;
  $body = "Name: ".$name."\t".$surname."\nEmail: ".$email."\nMessage: ".$message;
  $headers = "From: " . $email;

//send email
mail($to, $subject, $body, $headers);
?>

score 1 · Answer 1 · answered Oct 18 '18 at 11:55

The page just reloads (why?)

Because you are submitting a form.

The data is sent to the URL specified in the action (default: the current page), and the result is loaded as a new page.

and I cannot see any request being sent.

The submit event handler runs before the form submission happens, this queues up the HTTP request. The browser then immediately leaves the page which kills the JS environment that request belongs to, so it is cancelled.

You should:

Make sure that a non-JS submission of the form Does The Right Thing. See Unobtrusive JavaScript
Stop the default form submission behaviour if the JS runs successfully:

Such

$('#contact_form').submit(function(event) {
    event.preventDefault();
    $.ajax({

Maros · Answer 2 · 2018-10-18T12:10:25.863

-1

You should add event.preventDefault(); at the start of the submit handler to prevent the default submit action.

As a bonus, you should add a form action attribute since it's technically required:

<form id="contact_form" action="../php/email.php" enctype="multipart/form-data">

Edit: Required in HTML4, optional in HTML5

edited Oct 18 '18 at 12:10

answered Oct 18 '18 at 11:49

Maros

1,825
4
25
56

1

It's Ajax!! not required. – Amin.MasterkinG Oct 18 '18 at 11:50
Oh, perhaps its missing `event.preventDefault()` on the submit handler. – Maros Oct 18 '18 at 11:51
Not sure why the downvotes, it's exactly what @Quentin is saying. – Maros Oct 18 '18 at 11:56
1

"As a bonus, you should add a form action attribute since it's technically required" — No. It's optional. – Quentin Oct 18 '18 at 12:01
Is it wrong? We don't know what HTML spec he's conforming to. – Maros Oct 18 '18 at 12:04
1

Even if they were attempting to conform to HTML 4, it is still red herring because it makes no difference to the problem described. – Quentin Oct 18 '18 at 12:05
Hence the "As a bonus" – Maros Oct 18 '18 at 12:06

Form on submit not doing anything

2 Answers2