Ajax preventing form from being sent

Question

My Ajax script is preventing my form from being sent. I want my Ajax script to send my form, without my page has to refresh. If i am using my form and PHP WITHOUT the Ajax script, it's sending the form to my email just fine. But when i add the AJAX to PREVENT it from refreshing, the Ajax script runs, and returns that it has been send, without being sent, and this is my question.

Why is my AJAX script blocking the form from being sent?

HTML:

<form id="KontaktForm" action="e_Sender.php" method="post">
Fulde navn * <input type="text" class="form-control" id="FuldeNavm" type="text" name="fuldt_navn"><br>
Email * <input type="email" class="form-control" id="Email" name="email"><br>
Mobil * <input type="number" class="form-control" id="Mobil" name="mobil"><br>
Antal * <input class="form-control" id="Antal" type="number" name="antal"><br>
Besked *<br><textarea class="form-control" id="Besked" rows="5" name="message" cols="30"></textarea><br>
<input class="btn btn-info" id="Submit" type="submit" name="submit" value="Submit">
</form>

AJAX:

$(function () {
   $("#KontaktForm").on('submit', function (e) {
      e.preventDefault();
         $.ajax({
                 type: 'post',
                 url: 'e_Sender.php',
             data: $('form').serialize(),
             success: function () {
             alert('form was submitted');
         }
      });
   });
});

PHP:

<?php 
if(isset($_POST['submit'])){
    $to = "vejby3824@gmail.com"; // this is your Email address
    $from = $_POST['email']; // this is the sender's Email address
    $fuldt_navn = $_POST['fuldt_navn'];
    $mobil = $_POST['mobil'];
    $antal = $_POST['antal'];
    $subject = $fuldt_navn . " Efterspørger et tilbud!";
    $message = $fuldt_navn . "\n" . "Mobil Nummer: " . $mobil . "\n\n" . "Kommer med: " . $antal . "\n\n" . "De har skrevet følgende besked: " . "\n" . $_POST['message'];


    mail($to,$subject,$message);
    $url = 'Index.html';
    header('Location: ' . $url);
    exit;
    }
?>

Here is a picture of the return of network

What is the very first thing you're checking for in your PHP? Is it present in your request? — miken32, Jan 09 '19 at 01:41
miken32 It's not my php script, its my ajax script. If i compleatly delete my ajax script it all works, i get the email, when the submit button is pressed. The reason why i want a ajax script, is so that when the button is pressed, my page does not have to refresh to send the form to my email. This where i am trying to use the ajax, the problem i run into with my ajax script is that it alerts that the form has been send, but i am nevet reciving any form in my email, as i used to do. — UnscopeTying, Jan 09 '19 at 01:54

krlv · Accepted Answer · 2019-01-09T02:00:40.110

1

When sending form data with .serialize() method, $_POST['submit'] will never be set. It's expected JQuery behavior:

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button

Take a look at your network data - there is no submit field.

The easiest way to fix it, is to change if condition on PHP side:

<?php 
if (isset($_POST['email'])) {
    // ...
}

edited Jan 09 '19 at 02:00

answered Jan 09 '19 at 01:43

krlv

2,310
1
12
15

Thanks alot! I did change the submit to email, and now it's working excatly like i wanted it to! Thanks again! – UnscopeTying Jan 09 '19 at 02:07
Just a question to understand it right. For .serialize() to work, it has to get the data from a valid input in my form. Right? – UnscopeTying Jan 09 '19 at 02:11
I'm glad I can help you. Yes, `.serialize` will send only valid inputs: text, textarea, **selected** checkboxes/radiobuttons. – krlv Jan 09 '19 at 02:19
Just FYI, PHP form script like this is vulnerable for CSRF attack. Please take a look how you can make it more secure https://stackoverflow.com/questions/36947825/form-submit-security-with-php – krlv Jan 09 '19 at 02:22
krlv I've tried adding a recaptcha, but the captchha does not work, and again i am not reciving my emails, can you see why? http://jsfiddle.net/z473mvbL/ – UnscopeTying Jan 09 '19 at 11:28

Ajax preventing form from being sent

1 Answers1