CODEWITHSUNDEEP
javascriptphpjqueryhtml
markkane
markkane

Reputation: 51

PHP/JavaScript Email Contact Form

Im trying to use a contact form for email which by default after submitting the mail redirects to another page. I would however like after the mail submits to stay on the same page but with a popup message telling the sender than the mail has been sent but without leaving the page. Below is the javascript from my HTML page & the PHP I'm trying to use.

Can anyone explain what I'm missing & how to do this please?

<script type="text/javascript">
        $(document).ready(function() {

            $("#contactFormSubmit").click(function( event ) {
                $.post( “/contactengine.php", $("#contactForm").serialize() );
                $('#contactFormConfirmation').slideDown();
                $('#submitFormReset').click();
            });

        });
    </script>




<?php
$EmailFrom = "";
$EmailTo = "";
$Subject = "";
$Name = Trim(stripslashes($_POST['Name'])); 
$Email = Trim(stripslashes($_POST['Email'])); 
$Message = Trim(stripslashes($_POST['Message'])); 

// validation
$validationOK=true;
if (!$validationOK) {
  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
  exit;
}

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

// redirect to success page 
if ($success){
  print "<meta http-equiv=\"refresh\" content=\"0;URL=contactthanks.php\">";
}
else{
  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
}
?>

Upvotes: 3

Views: 2787

Answers (3)

KM123
KM123

Reputation: 1387

Okay so I think you should try this!

First run the php script as you would to send the email then after that include this line at the bottom of your php script

header("Location: http://myurl.com/contact?check=1");

Then on the contact page have an hidden input that contains the value 0 which is called check and then use url parameters to fill the input box.

On page load check the value of the hidden input box to see if its 1 or 0. If its 1 show a pop up box if its 0 load the page normally

I hope this helps!

USE THIS CODE

<form id="contactForm" method="post" action="contactengine.php">
    <div class="row half">
        <div class="6u">
            <input type="text" class="text" placeholder="Name" name="Name" />
        </div>
        <div class="6u">
            <input type="text" class="text" placeholder="Email" name="Email" />
        </div>
    </div>
    <div class="row half">
        <div class="12u">
            <textarea name="message" placeholder="Message" name="Message"></textarea>
        </div>
    </div>
    <div class="row" id="contactFormConfirmation" style="display: none;">
         <div class="12u">
             <p style="color: white; background-color: #FF3B30;width: 325px;border-radius: 0.25em;padding: .3em;margin: 0 auto;">Thank you for getting in touch!</p>
          </div>
    </div>
    <div class="row">
         <div class="12u">
             <ul class="actions">
                  <li>
                      <input type="submit" name="submit" id="contactFormSubmit" class="form-button" value="Submit" />
                  </li>
                  <li>
                      <input type="reset" name="reset" id="submitFormReset" class="form-button alt" value="Clear" />
                  </li>
             </ul>
         </div>
      </div>
  </form>
  <form name="checkf" id="checkf">
         <input name="check" id="check" value="0">
  </form>

EDIT:

Change the code you added just to the one below I forgot to add a line in lol

<script type="text/css">
  function fcheckf(){
    var x = document.getElementById('check').value;
    if(x == 0)
    {
        return false;
    }
    else
    {
         alert("Thank you for submitting your data! - This is the pop up box content!");
    }
  }
</script>

Once you have added the above in, change your:

<body>

tag, to this:

<body onload="fcheckf()">

Another Edit

Now add this just before the 

</body>

tag. This is important that it is pasted in the line before the body tag :)

<script type="text/javascript">
var data=location.search;
if(data) {
data=location.search.substring(1);
data=data.split('&');
var pairs={};
for(var i=0; i<data.length; i++){
    var tmp=data[i].split('=');
    pairs[tmp[0]]=tmp[1];
    }
var f = document.checkf;
for (var i in pairs) {
    if(f.elements[i]) {f.elements[i].value = pairs[i];}
    }
}

EDIT 56981 V3

Use this code within your html

<script>
function fcheckf(){
var x = document.getElementById('check').value;
if(x == 0)
{
    return false;
}
else
{
     alert("Thank you for submitting your data! - This is the pop up box content!");
}
 }
</script>
<section id="fourth" class="contact">
    <header>
        <div class="container">
            <span class="image-header-contact"><img src="images/contact-header.png" alt="Video" /></span>
            <h2>Get In Touch</h2>
        </div>
    </header>
    <div class="content style4 featured">
        <div class="container small">
            <form id="contactForm" method="post" action="contactengine.php">
 <div class="row half">
    <div class="6u">
        <input type="text" class="text" placeholder="Name" name="Name" />
    </div>
    <div class="6u">
        <input type="text" class="text" placeholder="Email" name="Email" />
    </div>
 </div>
 <div class="row half">
    <div class="12u">
        <textarea name="message" placeholder="Message" name="Message"></textarea>
    </div>
</div>
<div class="row" id="contactFormConfirmation" style="display: none;">
     <div class="12u">
         <p style="color: white; background-color: #FF3B30;width: 325px;border-radius: 0.25em;padding: .3em;margin: 0 auto;">Thank you for getting in touch!</p>
      </div> 
 </div>
 <div class="row">
     <div class="12u">
         <ul class="actions">
              <li>
                  <input type="submit" name="submit" id="contactFormSubmit" class="form-button" value="Submit" />
              </li>
              <li>
                  <input type="reset" name="reset" id="submitFormReset" class="form-button alt" value="Clear" />
              </li>
         </ul>
     </div>
  </div>
 </form>
 <form name="checkf" id="checkf">
     <input name="check" id="check" value="1">
 </form>
        </div>
    </div>
</section>
   <script>
       var data=location.search;
 if(data) {
 data=location.search.substring(1);
 data=data.split('&');
 var pairs={};
for(var i=0; i<data.length; i++){
var tmp=data[i].split('=');
pairs[tmp[0]]=tmp[1];
}
var f = document.checkf;
for (var i in pairs) {
if(f.elements[i]) {f.elements[i].value = pairs[i];}
}
}
    </script>

Upvotes: 1

Slim
Slim

Reputation: 1744

If you want to stay on the same page you should use ajax. I would suggest to try the jquery $.ajax call as it seems to be easier.

Here is a simple example:

$.ajax({
    url: "pathToThePHPGoesHere", // Here you have to place the path to the php file
    type: 'GET',
    data: $.extend({
        mailSubject: encodeURI(mailSubjectVar), // 1st variable name and value - you can place the content of your HTML box here
        mailBody: encodeURI(mailBodyVar) // 2nd variable name and value - you can place the content of your HTML box here
    }, tJS.getCommonPostData()),
    dataType: "json",  
    cache: false,
    success: function (responseText, status, xhr) {
       alert("Job done!"); // Here is what happens when the request is executed
    },
    error: function (jqXHR, textStatus, error) {
        tJS.manageError(jqXHR); // show an error message if something goes wrong
    }
});

You will need to decode the variables in your php script.

I'm not a php developer, but your code should look like:

$mailSubject = urldecode($_POST['mailSubject']);
$mailBody = urldecode($_POST['mailBody']);

In the .$ajax call I have encoded the characters, so you can transfer UTF-8, that is why you need to use urldecode in your php.

In order to use the above code, don't forget to include the jquery library in your project.

Upvotes: 1

scottfreeman
scottfreeman

Reputation: 1

Do something like this:

<script type="text/javascript">
    $(document).ready(function() {
        $("#contactFormSubmit").click(function( event ) {
            $.post("contactengine.php", $("#contactForm").serialize(), function(data) {
                $('#contactFormConfirmation').html(data.message).slideDown();
            },'json');
        });
    });
</script>

<?php

//code to send email here...
$success = true;

$result['status'] = "ok";
$result['message'] = "Your email has been sent.";
if (!$success){
    $result['status'] = "error";
    $result['message'] = "Unable to send your message.";
}
echo json_encode($result);
?>

Upvotes: 0

Related Questions