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('[email protected]','message from website',$message);
// made above line comment to test functionality
echo '1';
?>

How can it be fixed?

In your console (I'm assuming you're using google chrome), under the networks tab, what status does your mailme.php return? — Brett Gregson
– Brett Gregson, Commented Sep 16, 2014 at 15:55
if you don't prevent default browser submit, page will reload based on action — charlietfl
– charlietfl, Commented Sep 16, 2014 at 15:57
You can return false and put return here onSubmit=" return onSubmitForm()". Or you can use jQuery action and event.preventDefault. — tttpapi
– tttpapi, Commented Sep 16, 2014 at 16:00
it is returning nothing even the onSubmitForm function doesn't get called.I checked by putting alert in that.. — AZT
– AZT, Commented Sep 16, 2014 at 16:00

SarathSprakash · Accepted Answer · 2014-09-16 16:13:39Z

1

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('[email protected]','message from website',$message);
 // made above line comment to test functionality
echo '1';
?>

Hope this helps

edited Sep 16, 2014 at 16:13

answered Sep 16, 2014 at 16:06

SarathSprakash

4,6142 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

AZT Over a year ago

in my js my function didn't get called. i checked it by making another button and put onclick="onFormSubmit();" but still the function didn't get called. Where can be the problem?

SarathSprakash Over a year ago

can you make a jsfiddle woth your code, Have you included the jquery file

SarathSprakash Over a year ago

you have used onFormSubmit(); you function is onSubmitForm()

AZT Over a year ago

i mistakenly written here I crossed check at both place i've use same name, and I included jquery because on the js page two more function present and working correctly..

SarathSprakash Over a year ago

@AZT its working hope you have include the script in head or body? jsfiddle.net/qawg09w3/1

|

sites · Accepted Answer · 2014-09-16 16:17:15Z

0

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

edited Sep 16, 2014 at 16:17

answered Sep 16, 2014 at 16:04

sites

21.9k18 gold badges90 silver badges147 bronze badges

3 Comments

Regent Over a year ago

Well, if it is not an answer, why it is posted as answer?

sites Over a year ago

I needed formatting, and wanted to help OP to improve his code. Will the world end for doing this, will this site be doomed? sorry if overreacting, is just that I am done with purists in SO.

Regent Over a year ago

Nope, the world will not end. And attempts to teach people to write better code are indeed good idea, even though people learn only sometimes, often skipping important concepts. What I actually want to say is that phrase "Not an answer", posted as answer, not only sounds a little illogical, but can also draw some downvotes and flags without reading it, you know...

Collectives™ on Stack Overflow

How to submit data using ajax via button in form

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related