For some stupid random reason, I can't get my PHP/jQuery form to work well together, it keeps taking me to the page that I am posting the data too, instead of actually doing it behind the scenes and giving me the result without any real browser movement to another page, I am so confused, can someone please shed some light on this for me?
Here is my code...
The form (index.php)
Code:
<script type="text/javascript">
$(document).ready(function(){
$("#emailform").validate({
debug: false,
rules: {
name: "required",
subject: "required",
message: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
subject: "Without a subject selected, we can't fully categorise our support messages!",
message: "This must be full in order for us to understand yor issue."
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#emailform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
<form method='post' id='emailform' action='process.php'>
<b>Name:</b>
<br/>
<input type='text' name='name' id='name'>
<br/><br/>
<b>E-mail Address:</b><br/>
<input type='text' name='email' id='email'>
<br/><br/>
<b>Subject:</b><br/>
<select name='subject' id='subject'><option value='Furniture Request'>Furniture Request</option></select><br/><br/>
<b>Message:</b><br/><textarea cols='40' rows='5' onClick='this.value='';' onBlur='this.value='Type your message here...';' name='message' id='message'>Type your message here...</textarea><br/><br/>
<input type='submit' name='send' value='Send'> <input type='reset' name='reset' value='Clear'>
</form>
</div>
</center>
</div>
Here is the PHP (process.php)
PHP Code:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
mail('EMAIL REMOVED FOR SECURITY','$subject','$message','From: $email');
print"Congratulations, we've received your message! We'll get back to you via e-mail so be sure to keep checking for our reply!";
?>
Your submit button is submitting the form. Change it to a type="button" and call the function from that.. or you might be able to use event.preventDefault().
__________________ ^_^
If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
* The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".
<?php
mysql_connect('localhost','root','');
mysql_select_db('willows');
$extensions = array("jpg","gif","png");
$all_files = scandir("staff/products/");
$images = array();
for ($i=0;$i<count($all_files);$i++)
{
$is_image = false;
for ($x=0;$x<count($extensions);$x++)
{
if (substr_count(strtolower($all_files[$i]),$extensions[$x]) != 0)
{
$is_image = true;
break;
}
}
if ($is_image) array_push($images,$all_files[$i]);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
<?php
$titlequery = mysql_query("SELECT * FROM `homepage`");
while($title = mysql_fetch_array($titlequery))
{
echo"$title[title]";
}
?>
</title>
<link rel="stylesheet" type="text/css" href="files/css/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="files/css/iestyle.css" />
<![endif]-->
<link rel="stylesheet" href="files/css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="files/css/nivo-slider.css" type="text/css" media="screen" />
<script src="files/javascript/jquery-1.7.2.min.js"></script>
<script src="files/javascript/jquery.nivo.slider.js"></script>
<script src="files/javascript/jquery-ui-1.8.18.custom.min.js"></script>
<script src="files/javascript/jquery.smooth-scroll.min.js"></script>
<script src="files/javascript/lightbox.js"></script>
<script src="files/javascript/scripts.js"></script>
</head>
<body>
<center>
<div id="contactform" style="width: 100%; position: absolute; top: 0px; left: 0px; z-index: 80; display: none; padding-top: 120px;">
<center>
<div id="form" style="background-color: #ffffff; border: 4px solid #13480B; padding: 10px; text-align: left; width: 400px;">
<a style="cursor: pointer;"><img src="images/closeform.png" align="right" border="0" id="closeform" style="border: 2px solid black; padding: 1px;"></a>
<b>Contact Form</b><br/><br/>
Welcome to our contact form, we are always free to answer any questions, queries or interests you have in our stock or website! This form is connected directly to our e-mail inbox, therefore we will be sure to answer any questions you have as soon as possible.<br/><br/>
<div id="results"></div>
<script type="text/javascript">
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[i]);
}
}
$(document).ready(function(){
$("#emailform").validate({
debug: false,
rules: {
name: "required",
subject: "required",
message: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
subject: "Without a subject selected, we can't fully categorise our support messages!",
message: "This must be full in order for us to understand yor issue."
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#emailform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
<form method='post' id='emailform' action='process.php'>
<b>Name:</b>
<br/>
<input type='text' name='name' id='name'>
<br/><br/>
<b>E-mail Address:</b><br/>
<input type='text' name='email' id='email'>
<br/><br/>
<b>Subject:</b><br/>
<select name='subject' id='subject'><option value='Furniture Request'>Furniture Request</option></select><br/><br/>
<b>Message:</b><br/><textarea cols='40' rows='5' onClick='this.value='';' onBlur='this.value='Type your message here...';' name='message' id='message'>Type your message here...</textarea><br/><br/>
<input type='button' name='send' value='Send'> <input type='reset' name='reset' value='Clear'>
</form>
</div>
</center>
</div>
<div id="menu">
<div id="search" style="float: right;margin-top: -3px; margin-right: 10px;">
<form method="get" action="http://www.google.com/search" target="_blank">
<input type="text" value="Search..." name="q" id="search" onclick="this.value='';" onBlur="this.value='Search...';">
<input type="submit" value="Go!">
<input type="radio" style="display: none;" name="sitesearch" value="willowsgb.co.uk" checked/>
</form>
</div>
<img src="images/willowsgb.png" width="100" height="20" border="0" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()" style="margin-left: 10px;" />
<img src="images/products.png" width="100" height="20" border="0" onMouseover="showmenu(event,linkset[2], '180px')" onMouseout="delayhidemenu()" style="margin-left: 10px;" />
<a href="#pagecontent" style="cursor: pointer;" onClick="mainContent('<b>Legislation!</b><br/><br/>As a company, legislation is very important to us, and we want to focus on the main aspects of it in case any problems or issues seem to arise within the time that you use our business. If you want to know all about your rights and what can be done if anything goes wrong on our part, then all you have to do is download our document explaining all the fundamentals you need to know about.<br/><br/>Downloading the information will take no longer than 30 seconds, we suggest you read it all through before trading or discussing business with us.');"><img src="images/legislation.png" width="100" height="20" border="0" style="margin-left: 10px;" /></a>
<img src="images/links.png" width="100" height="20" border="0" onMouseover="showmenu(event,linkset[3], '180px')" onMouseout="delayhidemenu()" style="margin-left: 10px;" />
<a style="cursor: pointer;"><img src="images/contactus.png" width="100" height="20" border="0" id="contactbutton" style="margin-left: 10px;" /></a>
</div>
<div id="content">
<div id="banner">
<a href="index.html"><img src="images/logo.png" align="left" border="0" /></a>
<div id="address"><br/>
66 West Street<br/>
Fareham<br/>
PO16 0JR<br/>
<strong>Tel:</strong> 01329 281889<br/>
<strong>Fax:</strong> 02380 335585<br/>
<strong>Email:</strong> info@willowsgb.co.uk
</div>
</div>
<center>
<div id="products" style="display:block;" class="products">
<div id="producttitle">Latest Products</div>
<div class="imageRow">
<div class="set">
<div class="single">
<div id="productlist">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#productlist").load('products/latest.php');
function loadContent(page,title){
$("#productlist").load(''+page+'');
document.getElementById("producttitle").innerHTML = ''+title+'';
}
</script>
</center>
<div id="leftside">
<div id="mainpicture">
<div id="slider" class="nivoSlider">
<img src="images/photos/1.jpg" alt="" title="All the latest products you could ask for, right in front of your eyes." data-transition="boxRandom" />
<img src="images/photos/2.jpg" alt="" title="Want to see our products? Check out the link above!" data-transition="slideInLeft" />
</div>
</div>
<div id="pagecontent">
<b>Welcome to WillowsGB!</b><br/><br/>Hello there and welcome to the website of WillowsGB! A company that is catered to bringing you top quality furniture. We also offer a wide range of accessories and ornaments to make any room in your house look as good as possible.<br/><br/>If you have any questions at all then feel free to ask us on our contact page by clicking <u>here</u>, we will get back to you via e-mail and it will take 24 to 72 hours for us to reply, we are very busy!<br/><br/>We also have the option to download our brochures so you can take a browse through our beautiful collection, if you like our work then get in contact with us for a quote through the contact us form too!
</div>
</div>
<div id="rightside">
<div id="smallpicture">
<div id="picturetitle">Bedroom</div>
<img src="images/photos/bedroom.jpg" width="190" height="97"/>
</div>
<div id="smallpicture">
<div id="picturetitle">Dining Room</div>
<img src="images/photos/diningroom.jpg" width="190" height="97"/>
</div>
<div id="smallpicture">
<div id="picturetitle">Living Room</div>
<img src="images/photos/livingroom.jpg" width="190" height="97"/>
</div>
<div id="smallpicture">
<div id="picturetitle">Accessories</div>
<img src="images/photos/accessories.jpg" width="190" height="97"/>
</div>
</div>
<div id="bottombar"></div>
</div>
</center>
</div>
<script>
jQuery(document).ready(function($) {
$('a').smoothScroll({
speed: 1000,
easing: 'easeInOutCubic'
});
$('.showOlderChanges').on('click', function(e){
$('.changelog .old').slideDown('slow');
$(this).fadeOut();
e.preventDefault();
})
});
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2196019-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
$(window).load(function() {
$('#slider').nivoSlider();
});
$('#contactbutton').click(function() {
$('#contactform').fadeIn('slow', function() {
});
});
$('#closeform').click(function() {
$('#contactform').fadeOut('slow', function() {
});
});
</script>
</body>
</html>
Sorry it's so messy, I really need to tidy it up but that's everything in it, hopefully there is no interference in the code considering every other jQuery function works fine...
You have to edit your original post, and choose "Resolved" from the drop down next to the subject of your post.
BTW.. how did you fix it?
__________________ ^_^
If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
* The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".
Before you post, read our: 
