Go Back   CodingForums.com > :: Server side development > PHP

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-05-2012, 11:13 PM   PM User | #1
gribbs100
Regular Coder

 
Join Date: Feb 2006
Posts: 168
Thanks: 32
Thanked 1 Time in 1 Post
gribbs100 is an unknown quantity at this point
trying to make this email form show sent ok in alert box, not on html page

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
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">
//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
Code:
<?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>"; 
}
?>
gribbs100 is offline   Reply With Quote
Old 01-07-2012, 03:22 PM   PM User | #2
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,383
Thanks: 18
Thanked 350 Times in 349 Posts
sunfighter is on a distinguished road
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."
;
?>
sunfighter is offline   Reply With Quote
Reply

Bookmarks

Tags
alert, contact, form, parse, submit

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:31 PM.


Advertisement
Log in to turn off these ads.