Email form submit message is staying after page refresh

[Guest Steph]

I've just made an email form and at the minute when it's submitted, the page refreshes and "message sent" comes up next to the submit button. However, I would ideally like the page not to refresh and the success message just to come up on the page.

Also, when I click around my website and come back to the contact page, the success message is still there, is there a way I can make it disappear after the page changes?

 

I've never used javascript before so a copy and paste code would be ideal. At the minute this is my code:

 

In the head tags I have

<script type="text/javascript">
function showit(){
document.getElementById('success').style.visibility = 'visible';
}
</script>

 

In my input tag I have

onsubmit="showit"

 

And I have this where the message comes up

<p id="success" style="visibility: visible">Message sent!</p>

 

I'm assuming only the first one needs to be changed.

[BeeDev]

What you're asking is pretty advanced.

 

Basically you need to:

 

1. Create a PHP/ASP/.NET page that sends an e-mail

2. Create lots of javascript to process/send the form to the page you created in step 1 (in the background without loading the page again).

3. If succesful display message, if not display the returned error.

 

I'm not in a position to write pages of complex script here, but if you're familiar with ASP/PHP/.NET any of the technologies I suggest you research on how to create a stand-alone page that can process the form fields and send an e-mail, and "echo" or "response.write" the results/error messages. Next thing you need to do is study a bit of jQuery, which will make the form submission much easier, in particular you would need to look into the following methods (Learn the basics fist and foremost ofcourse):

 

$.submit() (event)

$.val() (getter/setter)

$.post() (ajax post)

 

Hope this helps.