Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

    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>"; 
    }
    ?>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,295
    Thanks
    23
    Thanked 611 Times in 610 Posts
    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."
    ;
    ?>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •