Announcement

**JamesOxford** · Aug 23, 2011, 12:47 AM

This is more PHP related than HTML related. I know PHP though, so I can answer your question. Using PHP, you are always going to have to reload the page because it is a server side language. It doesn't have to go to another page though. There are a couple of options. The easiest would be to have it open a new page, kind of like a popup. You can make it so that it resizes to a smaller window, but this will just open a new, full size page. Change the form line to the code below for this solution.

Code:

<form id= "form" method="POST" name="form" action="mailer.php" target="_blank">

The other option is to include the PHP code in the HTML file (you would actually need to rename it to a PHP file), add an if statement, and adjust the action attribute in the form to submit to itself. So to change the action attribute change the form line to

PHP Code:


<form id= "form" method="POST" name="form" action="<?php echo $_SERVER['PHP_SELF'] . "&action=sendmail ?>" >

Next you need to include the mailer script. Add to somewhere in the head, or below body; it doesn't really matter as long as there are no duplicate HTML tags.

PHP Code:


<?php include_once("mailer.php"); ?>

finally, modify the PHP script to include an if statement. It uses a get method, by adding "action=sendmail" to the end of the url. The new php file code is below.

PHP Code:


<?php
 if(isset($_GET['action'])===TRUE && $_GET['action']=='sendmail'){
$to = "[email protected]";
$subject = "ABCs of UFOs";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];

$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";

echo "Data has been submitted to $to!";

mail($to, $subject, $body);
} ?>

Give this a try. Should work; I didn't debug it though, so if there is an issue post back.

**eabigelow** · Aug 23, 2011, 11:00 PM

Hi, James--

Thanks very much for this. I did give it a try, but no go.

Here is what I have for the HTML and PHP codes. Did I do this correctly?

With this in the header: <?php include_once("mailer3.php"); ?>

<body>
<script type="text/javascript">
function submitform()
{
document.forms["form"].submit();
}
</script>
<form id= "form" method="POST" name="form" action="<?php echo $_SERVER['PHP_SELF'] . "&action=sendmail ?>" >
Name:
<input type="text" name="name" size="19"><br>
<br>
E-Mail:
<input type="text" name="email" size="19"><br>
<br>

Message:<br>
<textarea rows="9" name="message" cols="30"></textarea><br>
<br>

<a href="javascript: submitform()" >Searchthis</a>

</form>

</body>

And this for the PHP (which is named mailer3.php) and uploaded separately:

<?php
if(isset($_GET['action'])===TRUE && $_GET['action']=='sendmail'){
$to = "[email protected]";
$subject = "ABCs of UFOs";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];

$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";

echo "Data has been submitted to $to!";

mail($to, $subject, $body);
} ?>

**beautifulday** · Aug 24, 2011, 10:03 AM

I'm also working on a form with a similar problem, so I'm interested to see the answer to this.

**teedoff** · Aug 24, 2011, 10:34 AM

Here is a simple example of a form that submits data using ajax so the page doesnt reload. You can change it up to use for your needs.

Code:

<html> 
 <head>
  <title>Break Neck Pizza Delivery</title>
  <link rel="stylesheet" type="text/css" 
        href="breakneck.css" media="screen" />
  <script language="javascript" type="text/javascript">
   var request = null;

   try {
     request = new XMLHttpRequest();
   } catch (trymicrosoft) {
     try {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (othermicrosoft) {
       try {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (failed) {
         request = null;
       }
     }
   }

   if (request == null)
     alert("Error creating request object!");

   function getCustomerInfo() {
     var phone = document.getElementById("phone").value;
     var url = "lookupCustomer.php?phone=" +
               escape(phone);
     request.open("GET", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }

   function updatePage() {
     if (request.readyState == 4) {
       /* Get the response from the server */
       var customerAddress = request.responseText;

       /* Update the HTML web form */
       document.getElementById("address").value =
         customerAddress;
     }
   }
  </script>
 </head>

 <body onLoad="document.forms[0].reset();">
  <p><img src="breakneck-logo.gif" alt="Break Neck Pizza" /></p>
  <form method="POST" action="placeOrder.php">
   <p>Enter your phone number:
    <input type="text" size="14" 
           name="phone" id="phone" onChange="getCustomerInfo();" />
   </p>
   <p>Type your order in here:</p>
   <p><textarea name="order" id="order"
                rows="6" cols="50"></textarea></p>
   <p>Your order will be delivered to:</p>
   <p><textarea name="address" id="address"
                rows="4" cols="50"></textarea></p>
   <p><input type="submit" id="submit"
             value="Order Pizza" /></p>
  </form>
 </body>
</html>

**eabigelow** · Aug 24, 2011, 05:22 PM

Thanks for the example, Teed, but I was hoping to hold onto my original code and javascript link to submit the form.

I am still working on this, or more exactly, not getting anywhere... Any ideas out there on how I could fix this script to make it NOT leave the page and also use the js link to submit?:

With this in the header: <?php include_once("mailer3.php"); ?>

<body>
<script type="text/javascript">
function submitform()
{
document.forms["form"].submit();
}
</script>
<form id= "form" method="POST" name="form" action="<?php echo $_SERVER['PHP_SELF'] . "&action=sendmail ?>" >
Name:
<input type="text" name="name" size="19"><br>
<br>
E-Mail:
<input type="text" name="email" size="19"><br>
<br>

Message:<br>
<textarea rows="9" name="message" cols="30"></textarea><br>
<br>

<a href="javascript: submitform()" >Submit This</a>

</form>

</body>

And this for the PHP (which is named mailer3.php) and uploaded separately:

<?php
if(isset($_GET['action'])===TRUE && $_GET['action']=='sendmail'){
$to = "[email protected]";
$subject = "ABCs of UFOs";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];

$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";

echo "Data has been submitted to $to!";

mail($to, $subject, $body);
} ?>

**eabigelow** · Aug 25, 2011, 12:10 PM

OK--It seems that AJAX is the way to go. Thanks for all the help!

**teedoff** · Aug 25, 2011, 12:21 PM

Originally posted by eabigelow View Post

OK--It seems that AJAX is the way to go. Thanks for all the help!

lol yep!

There are tons of ajax tuts on the web as well.

Like this one: http://www.simonerodriguez.com/ajax-...ubmit-example/

**eabigelow** · Aug 28, 2011, 01:29 AM

Problem resolved. Thanks!

Announcement

edit contact form so that it does not reload page?

edit contact form so that it does not reload page?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment