Ajax submit doesn't submit anything

Question

Looked into this post but didn't help me im afraid, at the moment I press submit and the page refreshes but nothing is actualy submitted with my ajax call... Can you guys see any error?

$('.formen').on('submit',function(e){
alert("TEST");
    e.preventDefault();
        $.ajax({
                type: "POST", 
                url: "booked.php", 
                data: $('.formen').serialize(),
                complete: function(data){
                    $('#namn, #epost').val('');    
                    },
                success: function(response){
                    alert("Complete!");
                }
        });
});

I tried to put an alert when the form is submitted but nothing happend

book.php

<form class = "formen" autocomplete="off">
  <div class="form-group">
       <label for="">Name</label>
       <input type="text" id = "namn" class="form-control" name="name">
  </div>
  <div class="form-group">
       <label for="">Email</label>
       <input type="email" id = "epost"class="form-control" name="email">
  </div>
  <input type = 'hidden' name = "datum" id = "datum" value = "<?php echo $date; ?>">
  <input type = 'hidden' name = "room" id = "room" value = "<?php echo $room; ?>">
  <button class="btn btn-primary" type="submit" name="submit">Submit</button>
</form>

And yes the values are defined, I think the problem is my submit function. This is what shows in my url when i press submit.php?name=David&email=Test%40asdsa&datum=2020-05-28&room=1&submit= What am I missing? I get the form by clicking on a button which I aswell include with ajax:

$(document).on("click", '.boka', function() { 
$.ajax({
url:"book.php",
type:"POST",
data:{'date': $(this).data('date')},
success: function(data){
    $("#conf").html(data);
}
});

});

Answer 1

Pass the event to your submit function and prevent the event from submitting the form which is its default functionality like this:

$('.formen').on('submit', function(event){
  event.preventDefault();
  .... # your rest of the code
});

PS $('#namn, #epost').val() condition would only check if the value of name is present, if it does the form will get submitted even if the email value is null

Answer 2

Your code lacks document.ready() function.

so this should alert TEST. and works

$(document).ready(function(){

$('.formen').on('submit',function(e){
alert("TEST");
    e.preventDefault();
        $.ajax({
                type: "POST", 
                url: "booked.php", 
                data: $('.formen').serialize(),
                complete: function(data){
                    $('#namn, #epost').val('');    
                    },
                success: function(response){
                    alert("Complete!");
                }
        });
});
});

or you can try another way. 1.) Remove the form elements

2.) Add loader div to show a text during submision

3.) Add result div to display data from server end

4.) add formen variable to class in a submit form

 <script src="jquery.min.js"></script>

<script>

$(document).ready(function(){


    $('.formen').click(function(e){
e.preventDefault();

var name = $('#name').val();
var email = $('#email').val();
var datum = $('#datum').val();
var room = $('#room').val();

    atpos = email.indexOf("@");
    dotpos = email.lastIndexOf(".");
        if(name==""){

            alert('please Enter name');


        }

 else if(email==""){

            alert('please Enter Email');


        }


else  if (atpos < 1 || ( dotpos - atpos < 2 ))
    {
        alert("Please enter correct email Address")
        return false;
    }


else{

$('#loader').fadeIn(400).html('<br><span> Please Wait, Your Data is being Submitted</span>');
var datasend = "name="+ name + "&email=" + email + "&datum=" + datum + "&room=" + room;

        $.ajax({

            type:'POST',
            url:'booked.php',
            data:datasend,
                        crossDomain: true,
            cache:false,
            success:function(data){

                $('#name').val('');
                                $('#email').val('');
                $('#loader').hide();
                $('#result').fadeIn('slow').prepend(data);
alert('data submitted');

            }

        });

        }

    })

});


</script>

  <div class="form-group">
       <label for="">Name</label>
       <input type="text" id = "name" class="form-control" name="name">
  </div>
  <div class="form-group">
       <label for="">Email</label>
       <input type="email" id = "email" class="form-control" name="email">
  </div>
  <input type = '' name = "datum" id = "datum" value = "">
  <input type = '' name = "room" id = "room" value = "">

<div id="loader"></div>
<div id="result"></div>
  <button class="formen btn btn-primary" type="submit"  name="submit">Submit</button>

booked.php

<?php
echo $name =$_POST['name'];
echo $email =$_POST['email'];
echo $datum =$_POST['datum'];
echo $room =$_POST['room'];

?>

Answer 3

$('.formen').on('submit',function(e){
        // preventDefault() method stops the default action of an element from happening.
        // https://www.w3schools.com/jquery/event_preventdefault.asp
        e.preventDefault();
        $.ajax({
                type: "POST", 
                url: "booked.php", 
                data: $('.formen').serialize(),
                success: function(response){
                    console.log(response);
                    alert("Complete!");
                },
                error: function(error){
                    console.log(error);
                },
                complete: function(data){
                    $('.formen').get(0).reset();
                }
        });
    });