trying to make this email form show sent ok in alert box, not on html page [Archive]

gribbs100

01-05-2012, 11:13 PM

Hello Guys,I have a simple contact form that relies on a php file to parse the message. if a visitor tries to skip a field, an alert box pops open saying to make the corrections. That works fine.

When the fields are filled in correctly, I would like the alert box to also be the way to notify them that the email is sent successfully instead of the current way... which shows a line of txt from the php file on a white page.

I'm a little bit confused on how to change this. If the fields are ok, id like the alert box to say delivered and reset the fields.

Can anybody help? Id appreciate it a lot. these are the 2 files:

FORM

<!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">
//email form validation

function everif(str) {

var at="@"
var punct="."
var lat=str.indexOf(at)
var lstr=str.length
var lpunct=str.indexOf(punct)
if (str.indexOf(at)==-1){
alert("Valid email must be entered")
return false
}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert("Valid email must be entered")
return false
}

if (str.indexOf(punct)==-1 || str.indexOf(punct)==0 || str.indexOf(punct)==lstr){
alert("Valid email must be entered")
return false
}

if (str.indexOf(at,(lat+1))!=-1){
alert("Valid email must be entered")
return false
}

if (str.substring(lat-1,lat)==punct || str.substring(lat+1,lat+2)==punct){
alert("Valid email must be entered")
return false
}

if (str.indexOf(punct,(lat+2))==-1){
alert("Valid email must be entered")
return false
}

if (str.indexOf(" ")!=-1){
alert("Valid email must be entered")
return false
}

return true
}

function evalid(){
var emailID=document.contact_form.mail

if (everif(emailID.value)==false){
emailID.focus()
return false
}

//empty field validation

var fname=document.contact_form.fname
if ((fname.value==null)||(fname.value=="")){
alert("Fields marqued with * must be entered")
fname.focus()
return false
}

var message=document.contact_form.message
if ((message.value==null)||(message.value=="")){
alert("Fields marqued with * must be entered")
message.focus()
return false
}

return true
}
</script>

<form name="contact_form" method="post" action="mailer2.php" onSubmit="return evalid()">
<table border="0"><tr>
<td height="32" colspan="2">Name<br />
<input name="fname" type="text" size="28" /></td>
</tr>
<tr>
<td colspan="2">Email<br />
<input type="text" name="mail" size="28" /></td>
</tr>
<tr>
<td colspan="2">Phone<br />
<input name="phone" type="text" size="28" onkeypress="return numere(event)" onkeyup="return limitarelungime(this, 10)" /></td>
</tr>
<tr>
<td width="65"> </td>
<td width="170"> </td>
</tr>
<tr>
<td colspan="2"><a href="#" title="Valid Contact Form"></a> Message<br />
<textarea name="message" onkeyup="return limitarelungime(this, 255)" cols="22" rows="5" id="message"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="reset" name="reset" value="Reset" id="reset"/>
<input type="submit" name="Submit" value="Submit" />
<a href="#"></a></td>
</tr>
</table>
</form>
</body>
</html>

PHP

<?php session_start();
if(isset($_POST['Submit'])) {
$youremail = 'info@mydomainname.com';
$fromsubject = 'Website Inquiry';
$subject = 'Website Inquiry';
$from = "mydomainname.com";
$fname = $_POST['fname'];
$mail = $_POST['mail'];
$phone = $_POST['phone'];
$message = $_POST['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----------|';
echo "Thank you fo your inquiry. <br/>
We will contact you shortly.<br/>";
mail($to, $subject, $body);
} else {
echo "You must write a message. </br> Please go back to the <a href='/form2.html'>form</a>";
}
?>

sunfighter

01-07-2012, 03:22 PM

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:
alert(ajaxRequest.responseText); to display the returned php echo. This satisfies your requirement. But you may want to use
if (confirm(ajaxRequest.responseText))
window.location = "http://www.google.com/";
If you want to go to another page.

The HTML page:
<!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>


<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="button" value="Submit" onclick="tommytwotone();" />
<a href="#"></a>
</td>
</tr>
</table>

</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
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
$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.";
?>