The only solution I can see to what you want is AJAX. Before looking at the code I want to make some comments as to why I did some things and why I took some things out.
In your forms you use keyup to call limitarelungime function in the phone and message input, but have not included it. All this function does is limit the number of key stokes that can be used in that input box. I left it in, but if your not going to use it, take it out.
I removed the form and the reset button. I also changed the submit button. If these are important to you put them back, except for the submit.
I gave the elements of the old form ID's equal to the names. I re-wrote the function that checks for empty boxes. I removed the everif function, if you want to use it put it back and call it from the section that checks phone for empty box.
After function tommytwotone checks for empty it does an if to see if everything has input and then starts the ajax magic. This is not my code but comes from tizag. Two things of interest here. I use:
Code:
alert(ajaxRequest.responseText);
to display the returned php echo. This satisfies your requirement. But you may want to use
Code:
if (confirm(ajaxRequest.responseText))
window.location = "http://www.google.com/";
If you want to go to another page.
The HTML page:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>-</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #1c0000;
color: #FFF;
margin-top: 8px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 27px;
}
</style>
</head>
<body>
<script type="text/javascript">
function tommytwotone()
{
if (document.getElementById('fname').value == '')
{
document.getElementById('fname').style.backgroundColor = 'red';
alert('Please Enter a Name');
}else{
document.getElementById('fname').style.backgroundColor = 'white';
contn_1 = 'yes';
}
if (document.getElementById('mail').value == '')
{
document.getElementById('mail').style.backgroundColor = 'red';
alert('Please Enter a Email Address');
}else{
document.getElementById('mail').style.backgroundColor = 'white';
contn_2 = 'yes';
}
if (document.getElementById('phone').value == '')
{
document.getElementById('phone').style.backgroundColor = 'red';
alert('Please Enter a Phone Number');
}else{
document.getElementById('phone').style.backgroundColor = 'white';
contn_3 = 'yes';
}
if (document.getElementById('message').value == '')
{
document.getElementById('message').style.backgroundColor = 'red';
alert('Please Enter a Message to Send');
}else{
document.getElementById('message').style.backgroundColor = 'white';
contn_4 = 'yes';
}
if (contn_1 == 'yes' && contn_2 == 'yes' && contn_3 == 'yes' && contn_4 == 'yes')
{
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
alert(ajaxRequest.responseText);
}
}
}
nameval = document.getElementById('fname').value;
mailval = document.getElementById('mail').value;
phoneval = document.getElementById('phone').value;
messageval = document.getElementById('message').value;
ajaxRequest.open("GET", "mailer2.php?fname="+nameval+"&mail="+mailval+"&phone="+phoneval+"&message="+messageval, true);
ajaxRequest.send(null);
}
</script>
<!--<form id="contact_form" method="post" action="">-->
<table border="0">
<tr>
<td colspan="2" style="height: 32px;">Name<br />
<input name="fname" id="fname" type="text" size="28" />
</td>
</tr>
<tr>
<td colspan="2">Email<br />
<input name="mail" id="mail" type="text" size="28" />
</td>
</tr>
<tr>
<td colspan="2">Phone<br />
<input name="phone" id="phone" type="text" size="28" onkeypress="return numere(event)" onkeyup="return limitarelungime(this, 10)" />
</td>
</tr>
<tr>
<td colspan="2">Message<br />
<textarea name="message" id="message" onkeyup="return limitarelungime(this, 255)" cols="22" rows="5"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<!--<input type="reset" name="reset" value="Reset" id="reset"/>-->
<input type="button" value="Submit" onclick="tommytwotone();" />
<a href="#"></a>
</td>
</tr>
</table>
<!--</form>-->
</body>
</html>
In the php I removed the session_start() don't know why its there.
Removed the if(isset($_POST['Submit'])) { , because we're not using the form submit.
Removed the
Code:
else {
echo "You must write a message. </br> Please go back to the <a href='/form2.html'>form</a>";
}
Really never belonged here.
Please take note of the echo at the end. That's what will appear in the alert on the HTML page.
I commented out the mail line so I can run this on my server. Put it back in.
mailer2.php
PHP Code:
<?php
$youremail = 'info@mydomainname.com';
$fromsubject = 'Website Inquiry';
$subject = 'Website Inquiry';
$from = "mydomainname.com";
$fname = $_GET['fname'];
$mail = $_GET['mail'];
$phone = $_GET['phone'];
$message = $_GET['message'];
$to = $youremail;
$mailsubject = 'Message received from'.$fromsubject.' Contact Page';
$body = $fromsubject.'
The person that contacted you is '.$fname.'
Phone Number: '.$phone.'
E-mail: '.$mail.'
Message:
'.$message.'
|---------END MESSAGE----------|';
//mail($to, $subject, $body);
echo "Thank you fo your inquiry.
We will contact you shortly.";
?>