Question posted in
You can find the official documentation here.

Ajax submit doesn't submit anything – Jquery ajax

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);
}
});

});
Tags:

3

Answers


  1. 0

    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
});

    P.S. $('#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

    Login or Signup to reply.
  2. 0 
    $('.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();
                }
        });
    });
    Login or Signup to reply.
  3. 0

    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'];

?>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search