I am using 000webhost for my website and they keep suspending my account because I am apparently sending more that 1000 emails. This happens about 30 seconds after submitting an email via my contact form. I am only receiving one email and all emails outbound from the form go to me, they arent in my spam either.
I just wanted an opinion on whether this form is actually looping and sending the message but im not getting them or this is 000webhost fault. I had a contact form since I made this website and its only causing issues now.
Heres the code for the contact form:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/primary.css"> <!--Address Using URL to prevent no styling when slash is typed-->
<link rel="shortcut icon" href="Images/tabIcon.ico">
<title>Harry Felton | Welcome</title>
</head>
<script language="php">
require_once'header.php';
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('body').hide()
$("#notify").hide()
</script>
<script>
function toggleAbout(){
if ($("#center").hasClass("up")) {
$("#about").slideToggle(500);
setTimeout(function() {
$("#center").css({
msTransform: 'translateY(10px)',
webkitTransform: 'translateY(10px)',
transform: 'translateY(10px)',
})
}, 500);
} else {
$("#center").css({
msTransform: 'translateY(-75px)',
webkitTransform: 'translateY(-75px)',
transform: 'translateY(-75px)',
})
setTimeout(function() {
$("#about").slideToggle(500);
}, 1000);
}
$($("#center").toggleClass("up"))
};
</script>
<body onunload="" class="pg-index">
<div class="overwrap">
<div id="center">
<h1 id="title1">Welcome</h1>
<h2 id="title2">Harry Felton</h2>
<h2 id="subTitle">Auckland | New Zealand</h2>
<br><br><br><br>
<div id="about" style="display: none;">
<p>Hi, My name is Harry and I am an amateur programmer, I just do it as a hobby until I can actually take it as a course, I have created many programs, and love doing it, I am also into ComputerCraft which is a mod for Minecraft that adds programmable computers.<br><br>This website domain was initially created around September 2014, It took about a week to create, It was awesome, As it was the first time I had ever used HTML, CSS or JavaScript. On the 20th November I chose to completely recreate the website, So I deleted all files, And now... Here we are.<br><br>My absolute favorite thing to do in this world is code, I enjoy making, distributing and using my programs, And the feedback is always awesome, If you feel like leaving feedback, then click HERE</p>
</div>
</div>
</div>
<script type="text/javascript" src="JavaScript/element.js"></script>
<script type="text/javascript" src="JavaScript/pageNav.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<div id="contactForm" class="hidden">
<title>Contact Us</title>
<div id="mainPageCont">
<?php error_reporting(0); ?>
<?php if(isset($_POST['Email'])): ?>
<?php
$to = 'harryfelton12#gmail.com';
$subject = 'ALERT! Website Form Submission';
$message = 'Users Name: '.strip_tags($_POST['Name'])."\n";
$message .= 'Users Email: '.strip_tags($_POST['Email'])."\n";
$message .= 'Submitted Message: '.strip_tags($_POST['Comment'])."\n";
$headers = 'From: noReply#harryfelton.com' . "\r\n" .
'Reply-To: '.strip_tags($_POST['Email']) . "\r\n";
?>
<?php if(mail($to, $subject, $message, $headers)): ?>
<script type="text/javascript">
console.log('Mail OK')
location.href="/"
</script>
<?php endif ?>
<?php else: ?>
<script>console.log('Loading Contact Script')</script>
<form method="post" id="comments_form">
<h2>Please Leave Some Feedback, It Helps!</h2>
<div class="row">
<div class="label">
Your Name
</div>
<!--.label end-->
<div class="input">
<input type="text" id="fullname" class="detail" name="Name"
value="<?php echo isset($_POST['Name'])? $_POST['Name'] : ''; ?>" placeholder="e.g John Doe"/>
</div>
<!--.input end-->
<div class="context">
<span>We want to know who we are talking too</span>
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Your Email
</div>
<!--.label end-->
<div class="input">
<input type="text" id="email" class="detail" name="Email" placeholder="e.g test#example.com" value="<?php echo isset($_POST['Email'])? $_POST['Email'] : ''; ?>" />
</div>
<!--.input end-->
<div class="context">
<span>We will send an email to this address containing a confirmation and any further replies</span>
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Your Message
</div>
<!--.label end-->
<div class="input2">
<textarea id="Comment" name="Comment" class="mess"><?php echo isset($_POST['Comment'])? $_POST['Comment'] : ''; ?></textarea>
</div>
<!--.input end-->
</div>
<!--.row end-->
<div class="submit">
<input type="submit" id="submit" name="Submit" value="Send Message" />
</div>
</form>
<?php endif; ?>
<script>
function CheckVal() {
var SetMess = $('#option').val();
$('#feedback').html(SetMess);
if (SetMess !== '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
}
// As one types, check that the message is not empty
$('#option').keyup(function () {
CheckVal();
});
// As one clicks into the field, see if it has content
$('#option').click(function () {
CheckVal();
});
$(document).ready(function() {
// validate form
$("#comments_form").validate({
// This will allow you to extend the validator functions
invalidHandler:
function(form, validator) {
// $("#get_online").val("CHECK");
},
rules: {
// For every named input that you want to validate,
// you create a little set of prefs
Name: {
required: true,
},
Email: {
required: true,
email: true
},
Comment: { required: true },
},
messages: {
// Here are just the custom messages you can modify per field
Name: {
required: 'Please Enter Your Name',
},
Email: {
required: 'Please Enter An Email',
email: 'Email address not valid',
},
Comment: { required: 'Please Enter A Message'},
},
});
});
</script>
</div>
</div>
</div>
<script>
$(document).ready(function() {
fadeIn("body");
setTimeout(function() {
notification();
}, 500)
});
</script>
<script>changeWelcome("#title1");</script>
<div id="notify">Disabled JavaScript Is Now Supported, Contact Form Is Being Worked On Again!<a onclick="notification();" id="notifyClose">x</a></div>
<script>
function notification() {
isNotify = true
notifyID = "#notify"
if (isNotify) {
if ($(notifyID).hasClass("vis")) {
console.log("Notification Bar Enabled, Hiding: "+notifyID);
$(notifyID).slideUp(500);
} else {
$(notifyID).slideDown(500);
console.log("Notification Bar Enabled, Showing: "+notifyID);
}
$(notifyID).toggleClass("vis");
}
}
</script>
</body>
</html>
If you guys wanna visit the webiste then heres the link: http://www.harryfelton.host56.com/ Although it may be offline due to the account being suspended.
So... what do you think, is this loop sending 1000 emails? Ive been doing some console and alert testing and it never seems to send a message more than once, but I thought maybe the pause time had an effect.
I think if someone were to disable javascript in their browser, they could bypass your jQuery validation and send 1000 emails because you are not validating your Reply-To email server-side.
Try changing your server-side validation to something like:
$to = 'harryfelton12#gmail.com';
$subject = 'ALERT! Website Form Submission';
$message = 'Users Name: '.strip_tags($_POST['Name'])."\n";
$message .= 'Users Email: '.strip_tags($_POST['Email'])."\n";
$message .= 'Submitted Message: '.strip_tags($_POST['Comment'])."\n";
$headers = 'From: noReply#harryfelton.com' . "\r\n" .
'Reply-To: '.strip_tags($_POST['Email']) . "\r\n";
// User the filter_var() function to check that there is no manipulation
// of the $headers
if(filter_var($_POST['Email'], FILTER_VALIDATE_EMAIL)) {
if(mail($to, $subject, $message, $headers)) { ?>
<script type="text/javascript">
console.log('Mail OK')
location.href="/"
</script>
<?php }
} ?>
I don't see any loop and from what you have posted. aside from server-side validation, I don't see any reason why it should send 1000 emails.
Related
I have a contact form on my website that is not posting the success or error message as it should.
The weird thing is I have used this exact same form, php, and ajax script on several other sites and it works great. In fact, it used to work great on the site in question.
The website is https://www.pouncingfoxdesign.com. The contact form is at the bottom. Feel free to fill it out for testing purposes.
Here's the form and script:
<div class="col-md-8 col-sm-9 wow form1 fadeInLeft">
<div class="contact-form clearfix contactForm">
<form id="form" action="php/email.php" class="contactForm"
method="post">
<div class="messages"></div>
<div class="input-field">
<input type="text" class="form-control" name="name"
placeholder="Your Name" required="">
</div>
<div class="input-field">
<input type="email" class="form-control"
name="email" placeholder="Your Email" required="">
</div>
<div class="input-field message">
<textarea name="message" class="form-control"
placeholder="Your Message" required=""></textarea>
</div>
<input type="submit" name="submit" class="btn btn-blue
pull-right" value="SEND MESSAGE" id="msg-submit">
<div class="g-recaptcha fadeInLeft" data-
sitekey=""></div>
</form>
</div> <!-- end .contact-form -->
</div> <!-- .col-md-8 -->
<script> $('#form').on('submit', function(e) {
event.preventDefault(); //Prevents default submit
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize(); //Serialized the form data for
process.php
// $('#loader', '#form').html('<img src="img/forms/loading.gif" />
Please Wait...');
$.ajax({
type: 'POST',
url: 'php/email.php', // Your form script
data: post_data,
success: function(msg) {
var old_html = form.html()
$(form)
.html(msg).fadeIn();
setTimeout(function(){
$(form)
.html(old_html).fadeIn();
}, 4000);
},
error: function(xhr, ajaxOptions, err){
var old_html = form.html()
$(form).fadeOut(500)
.html("<h3>There was an error. Please try again.
</h3>").fadeIn();
setTimeout(function(){
$(form).fadeOut(500)
.html(old_html).fadeIn();
}, 3000);
}
});
});
</script>
And here's the PHP:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$success = "
<div class=\"row-fluid\">
<div class=\"span12\">
<h1>Submission successful</h1>
<h3>Thank you for contacting us!</h3>
</div>
</div>";
$to = "email#email.com";
$subject = "$name\n filled Pouncing Fox Desing Form";
$txt = "From: $name\n E-Mail: $email\n Comments:\n $message";
$headers = "From: Pouncing Fox Design" . "\r\n" ;
if(isset($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha){
echo '<h2>Please check the the captcha form.</h2>';
exit;
}
$secretKey = "";
$ip = $_SERVER['REMOTE_ADDR'];
$response=file_get_contents
("https://www.google.com/recaptcha/api/siteverify?
secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
$responseKeys = json_decode($response,true);
if (mail($to, $subject, $txt, $headers)) {
echo "$success"
} else {
echo 'Form submission failed. Please try again...'; // failure
}
?>
What I want it to do is replace the form with the success message for a few seconds and then go back to the form. What it does instead is just go to the email.php file with the success message being all that's on the screen.
If you want to check out https://www.mooreengaging.com, the same script and php file is used for that site. It works great and you can see my intended results. Again, feel free to fill out the form for testing purposes.
I have tried to use other ajax scripts and have tried to rework it several different times, but no matter what when clicking submit it just loads the php file. It's like it is bypassing the ajax script altogether.
Thanks!
EDIT:
I have received the emails from you guys testing and they look right. So it is working, just not posting the success message as I'd like.
Ok, I figured it out. I added <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> to the top of the page under the header.
I thought it was best to put jquery at the bottom?
Did it fail because I was trying to run that script before it loaded jquery?
Change
$('#form').on('submit', function(e)
To
$('#form').on('submit', function(event)
Because you use
event.preventDefault();
I have set up a page that is still in construction and i'm building a webform for users to contact me.
When i fill the webform and hit the "send" button, message gets send succesfully and i receieve it on my mail...but when i hit the "send" button, i get re-directed off page, saying it was sent successfully.
How can i prompt user that the message was sent successfully, without getting redirected of page, and get the message in same window?
This is my HTML code
<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">
<div class="row">
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required />
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required />
</div>
</div>
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="5"></textarea>
<div class="row">
<div class="col-xs-12 col-md-12">
<button class="btn btn btn-lg">Send Message</button>
</div>
</div>
</form>
And this is my contactUs.php code
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$message = <<<EMAIL
$message
From: $name
My email is: $email
EMAIL;
$to = "mymail#mymail.com";
$subject = "New Customer Enquiry";
mail($to, $subject, $message, "From: " . $email);
echo "Thank you, your message has been successfully sent!";
?>
AJAX
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(){
$.post( "assets/php/contactUs.php", $( "#contact" ).serialize(), function(msg){
alert(msg);
} );
});
});
</script>
This is a result of successfully sent message.
Please guys help me out! Thanks!
REDIRECT OPTION
$firstpageurl = 'http://example.com';
echo "Your message has been successfully sent!";
$header('Location: '.$firstpageurl);
Use Ajax as below.Change the submit type button to a normal button by removing the type attribute.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(event){
$.post( "config.php", $( "#contact" ).serialize(), function(msg){
alert(msg);
} );
event.preventDefault();
});
});
</script>
The action part of your form tag is "assets/php/contactUs.php"
<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">
That means that posting this form will bring you to that page. You can either code that page to send the email and redirect them back like this...
header('Location: '.$firstpageurl);
or put the php code into this first page and remove the entire action property. If you put the php on this page, you need to wrap your code in an if so that people can load the page before posting the form.
if (isset($_POST['email'])){
echo "Sent email";
[email send code here]
}
as for putting the message saying it's sent...that will only work with the second method. To do it without a full page load at all do it with ajax.
You want to use JQuery for that.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#contact").submit(function(){
var form_data=$("form").serialize();
$.post( "assets/php/contactUs.php",form_data, function( data ) {
alert(data);
});
event.preventDefault();
});
</script>
You can do it without using Javascript. Do the following:
Set the form to post to itself (e.g. if your form was on index.php, set action="index.php"
When the page loads, check $_POST to see if the form values were sent.
If the $_POST values are empty, display the form
If the $_POST values are set, do what you need to do with those values, then output your results into the page.
Here's a really simple example demonstrating what I mean.
<?php
$submitted = false;
if (isset($_POST["myinput"]) && $_POST["myinput"] != '') {
$submitted = true;
}
?>
<?php
if ($submitted == false) {
?>
<form action="index.php" method="post">
<input name="myinput"><input type="submit">
</form>
<?php } else { ?>
<h1>Form Submitted</h1>
<?php } ?>
I made a simple contact form for my website. At the moment, after sending the message, it shows "The message is sent successfully" but doesn't really send. It can't deliver to the stated email address.
Why so? Is there anything wrong in my code? Also
jQuery(document).ready(function($){
the above function isn't working I guess.
My PHP file:
<div id="contact">
<!--
Contact form begins
-->
<div class="container">
<?php
$hasError=false;
$sent=false;
if(isset($_POST['submitform'])){
$name=trim(htmlspecialchars($_POST['name'],ENT_QUOTES));
$email=trim($_POST['email']);
$message=trim(htmlspecialchars($_POST['message'], ENT_QUOTES));
$fieldsArray=array(
'name'=>$name,
'email'=>$email,
'message'=>$message
);
$errorArray=array();
foreach($fieldsArray as $key=>$val){
switch($key){
case 'name':
case 'message':
if(empty($val)){
$hasError=true;
$errorArray[$_key]=ucfirst($key)."field was left empty.";
}
break;
case 'email':
if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
$hasError=true;
$errorArray[$key]="Invalid email address entered";
}else{
$email=filter_var($email, FILTER_SANITIZE_EMAIL);
}
break;
}
}
if(hasError!==true){
$to="jabirfatah91#yahoo.com";
$subject="Message from your website";
$msgcontents="Name: $name<br>Email:$email<br>Message: $message";
$headers.="MIME-version:1.0\r\n";
$headers.="From:$name<$email>\r\n";
$mailsent=mail($to, $subject, $messagecontents, $headers);
if($mailsent){
$sent=true;
unset($name);
unset($email);
unset($message);
}
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Conatct form</title>
<link rel="stylesheet" type="text/css" href="contactformdesign.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#contactform").validate({
rules:{
name:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
message:{
required:true,
minlength:50
}
},
message:{
name:{
required:"Please type your name",
minlength:"Your name seems a bit short"
},
email:{
required:"Please enter your email address",
email:"Please enter a valid email address"
},
message:{
required:"Please type your message",
minlength:"Your message seems a bit short. Please enter minimum 50 character"
}
}
});
});
</script>
</head>
<body>
<div class="container">
<h1>Contact form</h2>
<form id="contactform" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" novalidate>
<?php
if($sent===true){
echo "<h2 class='success'>Thanks, your message has been sent successfully</h2>";
}elseif($hasError===true){
echo '<ul class="errorlist">';
foreach($errorArray as $key =>$val){
echo "<li>".ucfirst($key)."field error-$val</li>";
}
echo '</ul>';
}
?>
<input type="text" name="name" value="<?php echo (isset($name)? $name: ""); ?>" placeholder="Your name">
<input type="email" name="email" value="<?php echo (isset ($email)? $email:"");?>" placeholder="Your E-mail">
<textarea name="message" placeholder="Your Message"><?php echo (isset($message)? $message: ""); ?></textarea>
<input type="submit" name="submitform" value="Send">
</form>
</div>
</body>
</html>
</div>
<!--
Contact form ends.
-->
If you're trying to send the mail directly FROM the email entered by the user, some mail receivers will block mail from certain addresses and it will never get through, despite your SCRIPT thinking it sent successfully.
This was a problem I personally had with Wordpress's 'Contact Form 7', and found some other references to on-line.
It was solved by NOT using the email entered in the form, but using the site's contact email - 'contact#yoursite.com', and just referencing the email address in the body of the email.
As for jQuery's document ready -
make sure jQuery is loaded on the page
Check out the docs again - http://api.jquery.com/ready/
Do you really need that syntax? Is something else using '$' on your page? If not, it's much simpler to use $(function(){ //your code });
open a new question if you really can't solve it using the docs
Been scouring this site and find many AJAX to PHP examples but following these I cannot figure why on earth my scripts are not working.
I have an HTML form with a button. You click the button it calls a Bootstrap modal window. You enter an email address click Submit.
It posts to a PHP file that will email me.
The reason I am implementing using AJAX is because I do not want the ACTION and METHOD submit on the form. I want to submit via AJAX so the user is not redirected to my PHP page.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script>
$(document).ready(function () {
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "email.php", //
data: $('form.icontact').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("#contact").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
</script>
</head>
<body>
<div class="container"> <!-- numbers cannot total more than 12 for rows-->
<div id="thanks"><p>Submit!</p></div>
</div>
<!--contact modal-->
<div class="modal fade"id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class ="form-horizontal" name="icontact" id="icontact">
<div class="modal-header">
<h4>testemail</h4>
</div>
<div class="modal-body">
<p>Please enter your email address and click submit to receive your free first chapter</p>
<div class="form-group">
<label for ="contact-email" class="col-lg-2 control-label">Email: </label>
<div class="col-lg-10">
<input type="email" class="form-control" id="fromaddress" placeholder="new#example.com" name="fromaddress" />
<input type="hidden" id ="subject" value="enter in your email" name="subject" />
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Cancel</a>
<button class="btn btn-primary" type="submit" id="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="js/bootstrap.js"></script>
</body>
and here is the php file. I get failure when I run it and it is passing the data in the URL like a GET. What am I doing wrong?
<?php
function spamcheck($field) {
// Sanitize e-mail address
$field=filter_var($field, FILTER_SANITIZE_EMAIL);
// Validate e-mail address
if(filter_var($field, FILTER_VALIDATE_EMAIL)) {
return TRUE;
} else {
return FALSE;
}
}
if (isset($_POST["fromaddress"])) {
// Check if "from" email address is valid
$mailcheck = spamcheck($_POST["fromaddress"]);
if ($mailcheck==FALSE) {
echo "Invalid input";
} else {
echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span><br><br>";
$from = strip_tags($_POST["fromaddress"]); // sender
$subject = strip_tags($_POST["subject"]);
$message = "Thanks.";
// message lines should not exceed 70 characters (PHP rule), so wrap it
$message = wordwrap($message, 70);
// send mail
mail("test#test.com",$subject,$message,"From: $from\n");
}
}
?>
The problem is, you form is submitting either ways. You haven't prevented the default behaviour of the submit button. i.e. Submitting the form and redirecting to the form-action.
Do something like this
$("button#submit").click(function(e){
e.preventDefault(); // This line avoids the default submit event.
//Rest of stuff as you have it.....
});
A better option is to do the AJAX call on the .submit() rather than on the .click() as below
$("form#icontact").submit(function(e){
e.preventDefault();
//Proceed with other stuff as is...
});
Hope this helps! :)
This is my contactus.html page. I am submitting to a php page on the server that is to take the information and send email alongw ith saying thank you. When I do submitthe form, all I see is "undefined" on screen even though I am able to get the email.
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<link rel="stylesheet" href="css/latestjquerymobile.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/latestjquerymobile.js"></script>
<script type="text/javascript" src="js/jquery.mobile.simpledialog.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#contactus").submit(function(event) {
alert("page submitted");
})
});
</script>
</head>
<body>
<div data-role="page" data-theme="e" id="contactus">
<div data-role="header" data-position="fixed">
<h1>Contact Us</h1>
Back
Home
</div><!-- /header -->
<div data-role="content">
<div align="center">
<form action="http://testsite.com/contactus.php" name="contactus" id="contactus" method="post">
<fieldset>
<div data-role="fieldcontain">
<label for="name"> Name:</label>
<input id="name" name="name" type="text" />
<label for="email">Email:</label>
<input id="email" name="email" type="text" />
<label for="contact">Contact:</label>
<input id="contact" name="contact" type="text" />
<label for="message">Message:</label>
<textarea rows="4" cols="50" id="message" name="message"></textarea>
<br />
<button type="submit" name="submit" value="submit-value">Send</button>
</fieldset>
</div>
</form>
<div><br><br>
<img src="images/facebook.png" border="0" />
<img src="images/twitter.png" border="0" />
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
This is the code for contactus.php on server
<?php
$ToEmail = 'test#testemail.com';
$EmailSubject = 'Contact Form Submission from testsite.com';
$mailheader = "From: ".$_POST["email"]."\r\n";
$mailheader .= "Reply-To: ".$_POST["email"]."\r\n";
$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n";
$MESSAGE_BODY = "Name: ".$_POST["name"]."<br>";
$MESSAGE_BODY .= "Email: ".$_POST["email"]."<br>";
$MESSAGE_BODY .= "Contact: ".$_POST["contact"]."<br>";
$MESSAGE_BODY .= "Message: ".$_POST["message"]."<br>";
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure");
?>
<html>
<body>
THANK YOU
</body>
</html>
I'm not sure why you're seeing undefined, but I noticed you are not preventing the default submit action. so your page will still submit rather than executing JS.
You'll need to do a couple things:
Prevent the default action (ie the submission)
Serialize your form data and submit it via ajax.
So in code it would look something like this:
$(document).ready(function() {
//Cache DOM reference
var form = $("#contactus");
form.submit(function(event) {
//Prevent the form from regular (non-js) submission
event.preventDefault();
//Serialize your data, using jQuery to make it easer
var data = form.serialize();
//Submit via ajax
$.post(
form.attr('action'),
data,
function(response) {
//You should modify your PHP to return a success or error code, then
//handle appropriately here - eg if (response === 'success") {...
}
);
});
});
The reason you get an undefined value is because you post to a non-valid jQuery mobile page. So make sure the server returns a valid jquery mobile HTML page.
Create your jquery mobile form
Set the attribute action="/mobile.html" and method="post" (or get)
Then make sure the page mobile.html (or whatever you want to call it) returns a valid jQuery mobile HTML page.
If you don't know what a valid jquery mobile HTML page is, check the jquery mobile website.
<script type="text/javascript">
$(document).ready(function() {
$("#contactus").submit(function(event) {
alert("page submitted");
})
});
</script>
You don't need to use above JS coding. Just use native Submit button. And check following link
http://jquerymobile.com/test/docs/forms/forms-sample.html