hatefulcrawdad

woot woot! its all good now. Thank you so much man for all your help.

i just tested in IE 8 and it doesn't work. The form still puts the info in the URL, do you have any idea why it would do that?

awesome! I think i did it by myself! I used the following handleResponse function handleResponse() { if(http.readyState == 4){ var response = http.responseText; $('contact-content').set('html',response+$('contact-content').get('html')); setTimeout(function() { $('email-err').fade('out');}, 2000); setTimeout(function() { $('email-err').setStyle('display', 'none');}, 2500); } }

awesome, now i gotta figure out how to get rid of the space created by the div. some kind of function that sets the display to none of that div after it fades out. ill search google, but if you have the time and know how, let me know.

wow, your good. it worked alright but I would like it to stay for a couple second, then fade out. Also, the space for it stays after it faded away. Is there a way to add something that makes it go to display:none; or somethign after it fades? Sorry if Im buggin you, but i really am learning from all this. it is making me seriously want to dedicate some time to learn these programming languages.

once again, i dont know how to use that? Do i just put that line somewhere? i need it to delay about 2 seconds after the div originally shows. Im a designer, not a programer so this is kinda new to me. I definltey know a lot more already than I did a couple weeks ago thanks to this forum.

mootools documentation is always so vague. I will keep trying and reading. but if anyone on here knows how to delay a div from fading out after a form is submited, that would be awesome.

awesome, that worked wonders. I had to change one small thing ('form-area') needed to be ('contact-content'). Now I'm wondering if there is a way to have the error messages that are produces fade away after a certain amount of time.

Oy, now the form wont send at all. I probably messed up on fixing the handleResponde, not sure. function createRequestObject() { var ro; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ ro = new ActiveXObject("Microsoft.XMLHTTP"); }else{ ro = new XMLHttpRequest(); } return ro; } var http = createRequestObject(); function sendemail() { var msg = document.contactform.Message.value; var name = document.contactform.Name.value; var email = document.contactform.Email.value; var subject = document.contactform.Subject.value; var survey = document.contactform.Survey.value; var message = document.contactform.Message.value; document.contactform.send.disabled=true; document.contactform.send.value='Sending...'; http.open('post', 'contact.php'); http.onreadystatechange = handleResponse; http.setRequestHeader('Content-type','application/x-www-form-urlencoded'); http.send('Name='+name+'&Email='+email+'&Subject='+subject+'&Message='+message+'&Survey='+survey+'&action=send'); } function handleResponse() { if(http.readyState == 4){ var response = http.send var update = new Array(); if(response.indexOf('|' != -1)) { update = response.split('|'); document.getElementById(update[0]).innerHTML = update[1]; } } }

That didnt seem to work. Here is a link to the page I have the code working for. www.chrismdesign.com/test/index2.html

I did some reading and got some code going. But my problem now is that when the form submits, it just relays the entries into the url and thats not right, it also wont show the success or error message. Here is all my code. AJAX: function createRequestObject() { var ro; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ ro = new ActiveXObject("Microsoft.XMLHTTP"); }else{ ro = new XMLHttpRequest(); } return ro; } var http = createRequestObject(); function sendemail() { var msg = document.contactform.Message.value; var name = document.contactform.Name.value; var email = document.contactform.Email.value; var subject = document.contactform.Subject.value; var survey = document.contactform.Survey.value; document.contactform.send.disabled=true; document.contactform.send.value='Sending...'; http.open('post', 'contact.php'+Message+'&name='+Name+'&email='+Email+'&subject='+Subject+'&msg='+Message+'&action=send'); http.onreadystatechange = handleResponse; http.send(null); } function handleResponse() { if(http.readyState == 4){ var response = http.responseText; var update = new Array(); if(response.indexOf('|' != -1)) { update = response.split('|'); document.getElementById(update[0]).innerHTML = update[1]; } } } PHP: <?php if (isset($_POST['Name'])){ $emailTo = 'cm@chrismdesign.com'; $emailName = $_POST['Name']; $emailFrom = $_POST['Email']; $emailSubject = $_POST['Subject']; $emailMessage = "---- Message ----\n" . $_POST['Message']; $emailMessage .= "\n\n\n---- Sender's Name ----\n" . $_POST['Name']; $emailMessage .= "\n\n---- Email Address ----\n" . $_POST['Email']; $emailMessage .= "\n\n---- Survey Answer ----\n" . $_POST['Survey']; if (!preg_match('/^([A-Z0-9\.\-_]+)@([A-Z0-9\.\-_]+)?([\.]{1})([A-Z]{2,6})$/i', $emailFrom) || empty($emailFrom)) { echo '<div class="email-err"><h3>Error!</h3><p class="err">Please enter a valid email address.</p></div>'; } elseif (empty($emailName)) { echo '<div class="email-err"><h3>Error!</h3><p class="err">Please enter your name.</p></div>'; } elseif (empty($emailSubject)) { echo '<div class="email-err"><h3>Error!</h3><p class="err">Please enter a subject.</p></div>'; } elseif (empty($_POST['Message'])) { echo '<div class="email-err"><h3>Error!</h3><p class="err">Please enter a message.</p></div>'; } else { if (!empty($emailFrom)) { $emailHeaders = 'FROM: <cm@chrismdesign.com>'; } /* Send Email */ if (mail($emailTo, $emailSubject, $emailMessage, $emailHeaders)) { echo '<div class="email-suc"><h4>Thanks!</h4><p class="err">Your message has been sent!</p></div>'; } else { echo '<div class="email-err"><h3>Error</h3><p class="err">There was an internal error while sending your email.</p><p>Please try again.</p></div>'; } } } ?> HTML: <form name="contactform"> <h1>Send Me An Email</h1> <p>Name:<br /> <input type="text" name="Name"></p> <p>Email Address:<br /> <input type="text" name="Email"></p> <p>Subject:<br /> <input type="text" name="Subject"></p> <p>How did you find my site? <em>(optional)</em><br /> <textarea name="Survey" cols="30" rows="2"></textarea></p> <p>Message:<br /> <textarea name="Message" cols="30" rows="5"></textarea></p> <p><input id="button" type="submit" name="submit" value="Send Email"></p> </form>

You know of any good sites to read up on how exactly to utilize AJAX to submit a form?

im still kinda a noob and dont reallly know how to do that. I will read it and give it a try i suppose. no luck.

im still kinda a noob and dont reallly know how to do that. I will read it and give it a try i suppose.

What do you mean error message? But yes, If you understand how the function works, Use PHP to echo that javascript into a <script> tag within/outside head. So basically if the get variable = contact, it'll force the accordion to slide to contact. Yeah, I dont really know how to do that. when you submit you get a success or error message. Not sure how to have php put java in the head on submit, sorry man, lol.

It is controlled by mootools and a small domready function. window.addEvent('domready', function() { var accordion = new Accordion($$('.toggler'),$$('.element'), { opacity: 0.4, show: 1, alwaysHide: true, duration: 800 }); }); The show: 1 part controls which part is open on page load. So contact section would be show: 5. Could I just have it print that javascript and the error messages?

I really wish I knew more php and javascript. Not really sure how to go about doing this. I will see what I can find.

Hello helpful souls out there. You guys have come through for me in the recent past and I'm hoping someone out there can either help me or point me in the right direction. I have the following site, www.chrismdesign.com/test/index.php. I am waiting to launch the site until I get a few more bugs fixed. The problem I am facing is that the site is all contained on one page and each section is hidden in an accordion type thing. When a visitor opens the contact section and decides to send me an email through my contact form there is a small problem. When the user clicks submit, the page reloads, therefore sending the page back to the default open accordion section (which isn't the contact section). So, when the the form dsplays the success or error message, the user might not even see it unless they reopen the contact accordion section. My question to you all is... Can I control my form to where the page doesn't reload when the form is submitted? That was the same accordion section will remain open and not risk the chance of confusing my viewers. I dont really have any code to post, you can find it on my site. I guess I can post my php form. <?php if (isset($_POST['Name'])){ $emailTo = 'cm@chrismdesign.com'; $emailName = $_POST['Name']; $emailFrom = $_POST['Email']; $emailSubject = $_POST['Subject']; $emailMessage = "---- Message ----\n" . $_POST['Message']; $emailMessage .= "\n\n\n---- Sender's Name ----\n" . $_POST['Name']; $emailMessage .= "\n\n---- Email Address ----\n" . $_POST['Email']; $emailMessage .= "\n\n---- Survey Answer ----\n" . $_POST['Survey']; if (!preg_match('/^([A-Z0-9\.\-_]+)@([A-Z0-9\.\-_]+)?([\.]{1})([A-Z]{2,6})$/i', $emailFrom) || empty($emailFrom)) { print '<div class="email-err"><h3>Error!</h3><p class="err">Please enter a valid email address.</p></div>'; } elseif (empty($emailName)) { echo '<div class="email-err"><h3>Error!</h3><p class="err">Please enter your name.</p></div>'; } elseif (empty($emailSubject)) { echo '<div class="email-err"><h3>Error!</h3><p class="err">Please enter a subject.</p></div>'; } elseif (empty($_POST['Message'])) { echo '<div class="email-err"><h3>Error!</h3><p class="err">Please enter a message.</p></div>'; } else { if (!empty($emailFrom)) { $emailHeaders = 'FROM: <cm@chrismdesign.com>'; } /* Send Email */ if (mail($emailTo, $emailSubject, $emailMessage, $emailHeaders)) { echo '<div class="email-suc"><h4>Thanks!</h4><p class="err">Your message has been sent!</p></div>'; } else { echo '<div class="email-err"><h3>Error</h3><p class="err">There was an internal error while sending your email.</p><p>Please try again.</p></div>'; } } } ?> <div id="form-area"> <form method="post" action="index.php"> <h1>Send Me An Email</h1> <p>Name:<br /> <input type="text" name="Name"></p> <p>Email Address:<br /> <input type="text" name="Email"></p> <p>Subject:<br /> <input type="text" name="Subject"></p> <p>How did you find my site? <em>(optional)</em><br /> <textarea name="Survey" cols="30" rows="2"></textarea></p> <p>Message:<br /> <textarea name="Message" cols="30" rows="5"></textarea></p> <p><input id="button" type="submit" name="submit" value="Send Email"></p> </form> </div><!-- End div#form-area -->

Nevermind, I was a dummy and didn't realize where the stuff was being outputted. So I was calling the wrong id in the css. Fixed, thanks. Your comments sparked me to take a look closer.

I am putting them in the css file attached to this page.

I have the following code in my php mail form: print '<div class="email-err"><h3>Error!</h3><p>Please enter a valid email address</p></div>'; } elseif (empty($emailName)) { echo '<div class="email-err"><h3>Error!</h3><p>Please enter your name</p></div>'; } elseif (empty($emailSubject)) { echo '<div class="email-err"><h3>Error!</h3><p>Please enter a subject</p></div>'; } elseif (empty($_POST['Message'])) { echo '<div class="email-err"><h3>Error!</h3><p>Please enter a message</p></div>'; } else { if (!empty($emailFrom)) { $emailHeaders = 'FROM: <cm@chrismdesign.com>'; } Is that the proper way to pass divs and classes through php? I am trying to target them with css and nothing is working, so I'm guessing it is not. People have been helpful on here before, so I'm hopeful someone knows this.

OMG, thank you so much. What is with that guy trying to get headers defined when it already is? wierd. But anyway, you are a complete life saver. I am set with this contact form, not just gotta style the bitch.

Thanks man, I really appreciate it. I didn't understand what the other guy was trying to tell me. The only thing not working now is, if the user doesn't enter a message it is supposed to tell them "Please enter a message" but it just sends now. Not a huge deal because everthing else works. But if you can see why, that would be awesome. <?php if (isset($_POST['Name'])){ $emailTo = 'cm@chrismdesign.com'; $emailName = $_POST['Name']; $emailFrom = $_POST['Email']; $emailSubject = $_POST['Subject']; $emailMessage = "\n-----MESSAGE-----\n" . $_POST['Message']; $emailMessage .= "\n-----NAME-----\n" . $_POST['Name']; $emailMessage .= "\n-----EMAIL-----\n" . $_POST['Email']; if (!preg_match('/^([A-Z0-9\.\-_]+)@([A-Z0-9\.\-_]+)?([\.]{1})([A-Z]{2,6})$/i', $emailFrom) || empty($emailFrom)) { echo 'Please enter a valid email address'; } elseif (empty($emailName)) { echo 'Please enter your name'; } elseif (empty($emailSubject)) { echo 'Please enter a subject'; } elseif (empty($emailMessage)) { echo 'Please enter a message'; } else { if (!empty($emailFrom)) { $emailHeaders = 'FROM: <cm@chrismdesign.com>'; } /* Send Email */ if (mail($emailTo, $emailSubject, $emailMessage, $emailHeaders)) { echo 'You message has been sent!'; } else { echo 'There was an internal error whilst sending your email.<br>'; echo 'Please try again later.'; } } } ?>

okay, doesn't this if (!empty($emailFrom)) { $emailHeaders = 'FROM: <cm@chrismdesign.com>'; } define it? and it did come before the mail() function before. Im sorry again, like I said, total php noob.

<?php $emailTo = 'cm@chrismdesign.com'; $emailName = $_POST['Name']; $emailFrom = $_POST['Email']; $emailSubject = $_POST['Subject']; $emailMessage = "\n-----MESSAGE-----\n" . $_POST['Message']; $emailMessage .= "\n-----NAME-----\n" . $_POST['Name']; $emailMessage .= "\n-----EMAIL-----\n" . $_POST['Email']; if (!preg_match('/^([A-Z0-9\.\-_]+)@([A-Z0-9\.\-_]+)?([\.]{1})([A-Z]{2,6})$/i', $emailFrom) || empty($emailFrom)) { echo 'Error'; } elseif (empty($emailSubject)) { echo 'You must enter a valid subject.'; } elseif (empty($emailMessage)) { echo 'You must enter a message to send to our team.'; } else { /* Send Email */ if (mail($emailTo, $emailSubject, $emailMessage, $emailHeaders)) { echo 'You message has been sent!'; } else { echo 'There was an internal error whilst sending your email.<br>'; echo 'Please try again later.'; } } ?> if (!empty($emailFrom)) { $emailHeaders = 'FROM: <cm@chrismdesign.com>'; }