Not reloading page after php form submit

[hatefulcrawdad]

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 -->

[oni-kun]

Maybe you can try such a method? Like "action=index.php?p=contact" , With that GET header defined, when someone enters something, you can echo the proper JS that'll bring up the 'contact' section, or whatever you need to do. Doesn't sound TOO hard.

[hatefulcrawdad]

Maybe you can try such a method? Like "action=index.php?p=contact" , With that GET header defined, when someone enters something, you can echo the proper JS that'll bring up the 'contact' section, or whatever you need to do. Doesn't sound TOO hard.

 

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.

[oni-kun]

Maybe you can try such a method? Like "action=index.php?p=contact" , With that GET header defined, when someone enters something, you can echo the proper JS that'll bring up the 'contact' section, or whatever you need to do. Doesn't sound TOO hard.

 

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.

 

What is the JS code that switches the accordion to the 'contact' page? You can echo out that exact code, such as "switchpage('contact')" or whatnot.

[hatefulcrawdad]

What is the JS code that switches the accordion to the 'contact' page? You can echo out that exact code, such as "switchpage('contact')" or whatnot.

 

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?

[oni-kun]

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?

 

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.

[hatefulcrawdad]

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?

 

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.

[rajivgonsalves]

your using mootools you should submit your form through ajax

 

http://mootools.net/docs/core/Request/Request.JSON

 

this will not cause your page to reload and you can handle and display the message accordingly

[hatefulcrawdad]

your using mootools you should submit your form through ajax

 

http://mootools.net/docs/core/Request/Request.JSON

 

this will not cause your page to reload and you can handle and display the message accordingly

 

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

[hatefulcrawdad]

your using mootools you should submit your form through ajax

 

http://mootools.net/docs/core/Request/Request.JSON

 

this will not cause your page to reload and you can handle and display the message accordingly

 

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.

[rajivgonsalves]

your page is reloading causing everything to reload, your message is there but it is not visible since the contact form is not visible on initial load, the only way to avoid this is to use ajax you'll have to read on it.

[hatefulcrawdad]

your page is reloading causing everything to reload, your message is there but it is not visible since the contact form is not visible on initial load, the only way to avoid this is to use ajax you'll have to read on it.

 

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

[oni-kun]

your page is reloading causing everything to reload, your message is there but it is not visible since the contact form is not visible on initial load, the only way to avoid this is to use ajax you'll have to read on it.

 

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

 

http://www.w3schools.com/Ajax/Default.Asp

 

Once you learn how to just, well, copy&paste the AJAX initializing functions, what it does it sends data (via get or post) to a php file, gets the contents and uses JS to output the results of the PHP page. Since It's JS it doesn't refresh the page, to say "Successful"

[hatefulcrawdad]

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>

[rajivgonsalves]

I am not sure how it is working currently but I feel this

 

<form name="contactform">

 

should be

 

<form name="contactform" onsubmit="sendemail();return false;">

 

this should call sendemail() on submit of the form and return the necessary for you to display

[hatefulcrawdad]

I am not sure how it is working currently but I feel this

 

<form name="contactform">

 

should be

 

<form name="contactform" onsubmit="sendemail();return false;">

 

this should call sendemail() on submit of the form and return the necessary for you to display

 

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

[rajivgonsalves]

you had quite a few errors out there, after some debugging I came up with this

 

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');
}

 

ofcourse you will have to modify the handleResponse function to handle the response accordingly

[hatefulcrawdad]

you had quite a few errors out there, after some debugging I came up with this

 

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');
}

 

ofcourse you will have to modify the handleResponse function to handle the response accordingly

 

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];
         
        }
    }
}

[rajivgonsalves]

I am not very conversant with mootools more a jQuery fan but I came up with this your function should be

 

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        $('form-area').set('html',response+$('form-area').get('html'));
    }
}

[hatefulcrawdad]

I am not very conversant with mootools more a jQuery fan but I came up with this your function should be

 

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        $('form-area').set('html',response+$('form-area').get('html'));
    }
}

 

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.

[rajivgonsalves]

Glad to help, Mootools is just not my cup of tea, If you were using jquery I could have shown you how. you can have a look at the following url on how to do it

 

http://mootools.net/docs/core/Fx/Fx.Morph

[hatefulcrawdad]

Glad to help, Mootools is just not my cup of tea, If you were using jquery I could have shown you how. you can have a look at the following url on how to do it

 

http://mootools.net/docs/core/Fx/Fx.Morph

 

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.

[rajivgonsalves]

on reading further, you could use the

 

$('id').fade('out');

 

however you'll have to pass the id of your div

[hatefulcrawdad]

I am not sure how it is working currently but I feel this

 

<form name="contactform">

 

should be

 

<form name="contactform" onsubmit="sendemail();return false;">

 

this should call sendemail() on submit of the form and return the necessary for you to display

 

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.

[rajivgonsalves]

in your php file change all occurrences of this

 

<div class="email-err">

 

to this

 

<div class="email-err" id="email-err">

 

your response handler should be the following

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        $('contact-content').set('html',response+$('contact-content').get('html'));
        $('email-err').fade('out');
    }
}

 

I think that should work if you do everything right