Reputation: 149
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?
Upvotes: 0
Views: 1747
Reputation: 21815
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
Upvotes: 0
Reputation: 4624
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
Upvotes: 1