How to submit data using ajax via button in form

Question

I am trying to make a form that uses HTML5 validations and uses ajax to display mail sending status. But when I click send button it doesn't work.

Form HTML:

<div class="contactForm">
    <form onSubmit="onSubmitForm()" id="form">
        <div style="font-size:36px;">Contact Me</div>
        <br>
        <br>
        <label>Name*</label>
        <input name="name" id="name" type="text" required>
        <label>Subject*</label>
        <input name="subject"  id="subject" type="text" required>
        <br>
        <br>
        <label>Email*</label>
        <input name="email"  id="email" type="email" required>
        <label>Contact</label>
        <input name="subject"  id="number" type="number">
        <br>
        <br>
        <label>Your Message*</label>
        <br>
        <textarea id="message" cols=86 rows=10></textarea>
        <br>
        <button type="submit" style="float:right;"></button>
    </form>
    <div class="sendingImage">Mail Sending</div>
</div>

It contains a div that will be displayed when I click a button on my website, and after sending mail the div is hidden automatically. But when I click button it does not working as i want.

Form JS:

function onSubmitForm() {
    var name = $("#name").val();
    var subject = $("#subject").val();
    var email = $("#email").val();
    var number = $("#number").val();
    var msg = $("#message").val();
    $("#form").hide();
    $(".sendingImage").show();
    $.ajax({
        type: "post",
        url: "mailme.php",
        data: { "name": name, "subject": subject, "email": email, "message": message }
    })
    .done(function(msg) {
        if (msg == "1")
        {
            alert("");
        }
    });
}

Form PHP:

<?php
$name_id = $_POST['name'];
$email_id = $_POST['email'];
$subject_id = $_POST['subject'];
$message_id = $_POST['message'];

$message = "Name: $name_id\n
 Email Address: $email_id\n
 Subject: $subject_id\n
 Message: $message_id";

//mail('xyz@gmail.com','message from website',$message);
// made above line comment to test functionality
echo '1';
?>

How can it be fixed?

Answer 1

Not an answer, but this might be helpful to reduce your code:

Instead of

var name=$("#name").val();
var subject=$("#subject").val();
var email=$("#email").val();
var number=$("#number").val();
var msg=$("#message").val();
$("#form").hide();
$(".sendingImage").show();
 $.ajax({
            type: "post",
            url: "mailme.php",
            data: {"name":name,"subject":subject,"email":email,"message":message}
            })

try:

$("#form").hide();
$(".sendingImage").show();
 $.ajax({
            type: "post",
            url: "mailme.php",
            data: $('#form').serialize()
            })

no need for all those vars, I have not tried your specific case though.

Also, if you want to prevent page reload:

$('#form').submit(function(evt){
  evt.preventDefault()
  $.post(this.action,$(this).serialize(),function(){
    // do something on success
  });
})

With this form you need to set action in form:

<form action='mailme.php' ...\

It's better because you end up with a good separation of concerns HTML/JS

Answer 2

You have to use either preventDefault()

<input type="submit" onclick="onSubmitForm(event);" value="Submit">

or instead of button type as 'submit' use 'button'

<input type="button" onclick="onSubmitForm(event)" value="Submit">

Another thing is since your using a form it is a good practice to use serialize() good for performance as well as simplification of code

your client side code;

function onSubmitForm(event){
 event.preventDefault();
var mydata = $("#form").serialize();
$("#form").hide();
$(".sendingImage").show();
 $.ajax({
            type: "post",
            url: "mailme.php",
            data: mydata,
            })
            .done(function(msg) 
            {
            if(msg=="1")
            {
                alert("");
            }
            });
}

and in your server side php access it like this

<?php
$data = $_POST['serialize'];
$name_id=$data['name'];
$email_id=$data['email'];
$subject_id=$data['subject'];
$message_id=$data['message'];

$message="Name: $name_id\n
 Email Address: $email_id\n
 Subject: $subject_id\n
 Message: $message_id";

//mail('xyz@gmail.com','message from website',$message);
 // made above line comment to test functionality
echo '1';
?>

Hope this helps