Start Free Trial

asked on

Live Mail Form

Can someone tell me if this is possible?

There is a <div id="contact"></div>
I would like to have a simple contact form inside this div. When the submit button is pressed, the contents of the "contact" div change from the form to a <p> saying something like "processing...". At this point, the contents of the form will be processed, and if filled out properly, the contact email will be sent. Once the processing is complete, the "contact" div's contents once again changes, this time to say something like "message sent!".

Is the submitting of the form without loading a new page visible to the client as well as the content changing of this div tag possible through the use of javascript with the help of css/php for styling/form processing? If possible, any coding ideas?

Hi D4Ly,

The matter of changing the divs contents is the easy part so I will leave that till last, as for submitting the form without loading another page. My first instinct when reading your question was to go with an active x solution.

If we look at a simple example of a form here:

<form name="form1" onsubmit="processForm1()">
What is your email address?<br>
<input type='text' name='email'>
</form>

Below is the basics of the javascript we will need to use.

<script>
function processForm1()
// gather data from the form and post it to an ASP page
{
var emailAddress = document.form1.email.value
getASPResponse("processtheform.asp?email=" + emailAddress)
}

function getASPResponse(theURL)
//Use active x to read the HTML output of an ASP page
{
var objSrvHTTP;
objSrvHTTP = new ActiveXObject("Msxml2.XMLHTTP.4.0");
objSrvHTTP.open ("GET",theURL,false);
objSrvHTTP.send ("");
var newstr = objSrvHTTP.responseText;
return newstr;
}
</script>

Last of all you need your processing page (Are you using ASP for that?) which would look something like this:

<%
MessageToClient = ""
'Validation code can go here
'Processing code goes here

If MessageToClient = "" Then
Response.write "Message Sent"
Else
Response.write MessageToClient
End If
%>

So what ever the ASP writes to the page will be returned to your Javascript code

As for the changing of the text in the <div id="contact"></div> you would add that into the javascript code like this:

function processForm1()
// gather data from the form and post it to an ASP page
{
var emailAddress = document.form1.email.value
//change contact Div to "processing..."
document.contact.innerHTML = "processing..."
var ASPResp = getASPResponse("processtheform.asp?email=" + emailAddress)
//change contact Div to "message sent" (if sent)
document.contact.innerHTML = ASPResp
}

Hope this helps, I havn't done any coding for three months (been on holiday) so I am a bit scratchy. But let me know if you need anything else.

Reg's,
m8

ASKER

WOW m8rix

Okay! Will this work just the same if my processing page is php, not asp? I will test this out a bit later tonight, but this is wonderful so far!!

Yes this will work for php as well

;)

ASKER

m8-
for this
var ASPResp = getASPResponse("processtheform.asp?email=" + emailAddress)

is there a way to POST the form values to the processing page? I will have a name, email, and message, and assume that sending a potentially large message wouldn't be best for a querystring value. :p

We can't POST using this method, but that's fine, just have to make sure that you URL Encode the values first.

var emailAddress = escape(document.form1.email.value)
var userName = escape(document.form1.name.value)
var theMessage= escape(document.form1.message.value)

var ASPResp = getASPResponse("processtheform.asp?email=" + emailAddress + "&name=" + userName + "&message=" + theMessage)

ASKER

what is the php equivalent to response.write? I don't think its echo, and print won't work either...at least with what i've got here:
http://www.d4ly.com/test5.htm

the php is this:
<?php
print("message sent!!");
?>

ASKER

so, i've made some progress now...but still having some issues. I can't seem to grab the value of the fields in the form... ;p sorry!!

ASKER

and at one point i got some "automation server can't create object" error...

Here is an example of the PHP:

<?php

$name=$_GET["name"];
$email=$_GET["email"];
$message=$_GET["message"];

if($email!="") {
echo 'Sending message!';
} else {
echo 'No email address!';
}
?>

ASKER

any suggestions on fixing the javascript?

(the php file is now just what you posted) thanks!

Another way of doing it is with a hidden iframe which you post your form to.

example:

MAIN PAGE
---------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
      <style type="text/css">
      #contact{
            width:400px;
            height:300px;
            border:1px solid #000000;
      }
      #messageContent{
            display:none;
            width:100%;
            height:100%;
            vertical-align:middle;
            text-align:center;
      }
      #theMessage{
            padding-top:40px;
            vertical-align:middle;
      }
      </style>
      <script type="text/javascript">

      function validateForm(formObj){
            // Validation stuff here

            document.getElementById('formData').style.display='none';
            document.getElementById('messageContent').style.display='block';

            return true;
      }

      </script>
</head>
<body>
<div id="contact">
<div id="formData">
      <form target="formTarget" onsubmit="return validateForm(this)" method="post" action="formDest.html">
      <table border="0">
            <tr>
                  <td>First name</td>
                  <td><input type="text" name="firstname"></td>
            </tr>
            <tr>
                  <td>Last name</td>
                  <td><input type="text" name="lastname"></td>
            </tr>
            <tr>
                  <td><input type="submit" name="send" value="Send"></td>
            </tr>
      </table>
      </form>
</div>
<div id="messageContent">
      <h2 id="theMessage">Sending mail - please wait</h2>
</div>
</div>
<iframe name="formTarget" style="display:none">
</iframe>
</body>
</html>

formDest.html
----------------------------------
This page is the target of the form and will be opened within the hidden iframe once the form is sent. When this page has sent the mail, you could put in this code to dynamically modify the message in the parent page:

<script type="text/javascript">
parent.document.getElementById('theMessage').innerHTML = 'Message sent';
</script>

ASKER

wow...I must absorb this :) thanks!!!

Just ask if you need any help.

btw: The choice of firstname and lastname for the form was just a random choice. I didn't think of a mail form when I wrote that. It should probably have been "Subject", "Body" and "From" or something like that.

Batalf

ASKER

a quick question, at this moment assuming I am using the first implementation, replacing the form contents with a message...say after 'Message sent' is displayed I want the form to be displayed again after a time delay...how do I initially grab the value of innerHTML of the div containing this form?

var oldCont = document.getElementById("formData").innerHTML;
returns an error

var oldCont = document.getElementById("formData").innerHTML.value;
returns udefined

what do i need to add here to retrieve this value?

What is the first implementation? The reason why I ask is that I can't find any field with the id "formData" in m8rix code.

document.getElementById("formData").innerHTML

is the reference to the content of an element with the id "formData", example: <div id="formData">.

If you wan't to show the form again with my code, then you could use this code(From the iframe)

parent.document.getElementById('messageContent').style.display='none';
parent.document.getElementById('formData').style.display='block';

and maybe

parent.document.forms[0].reset();

if you want to clear the form.

Batalf

ASKER

sorry, in m8rix's code, yet ive wrapped the form so that i can throw other content inside of it... ie. "Message Sent!"
so, how might I grab the code inside of this div and save it for later using innerHTML?

<div id="formData">
<form name="form1" onsubmit="processForm1()">
What is your email address?<br>
<input type='text' name='email'>
</form>
</div>

ASKER

(im not ignoring your code...just not willing to give up on what i've started here. I won't let it beat me ;p)

I haven't studied m8rixs code in details, but you should be able to refer to the content of "formData" by using

document.getElementById('formData').innerHTML

Could the problem be that <div id="formData"> no longer exists inside <div id="contact"> because you have replaced the content there with your message?

Batalf

ASKER

Im not sure what the problem is...here's a simple example with the error
http://www.d4ly.com/test5.htm

I think there's an error in your mailForm function.

Try to change it to this:

function mailForm(){
      var oCont = document.getElementById("contact").innerHTML;
      var emailAddress = document.form1.email.value;
      var userName = document.form1.name.value;
      var theMessage= document.form1.message.value;
      document.getElementById("contact").innerHTML = "processing...";
      var PHPResp = getPHPResponse("processtheform.php?email=" + emailAddress + "&name=" + userName + "&message=" + theMessage);
      document.getElementById("contact").innerHTML = PHPResp;
      setTimeout("returnMail('"+oCont+"');",3000);
}

ASKER

AWESOME!

works PERFECT in IE...but why not FF? The rewrite of the form back to the page doesn't occur.

It looks like FF has some problem with the value returned from the function. I get this error.

Error: unterminated string literal
Source File: http://www.d4ly.com/test5.htm
Line: 20, Column: 11
Source Code:
returnMail('

I'm not sure what's causing this. There could be something in the oCont variable.

Try changing

setTimeout("returnMail('"+oCont+"');",3000);

to

setTimeout("returnMail('"+oCont.replace("'","'")+"');",3000);

ASKER

hmm. That doesn't work for me.

I tried something different. It IS the oCont variable. I set its value to "hello" instead of the innerHTML and got these results:

Your suggested timeout replacement scheme:
same error.

Using this: setTimeout("returnMail(\'"+oCont+"\');",3000); (from the first q i had with you today ;p)
works...displaying "hello".

However, neither scheme works for the innerHTML.

ASKER

perhaps there's a way to change the innerHTML back after a timeout WITHOUT a function call? because if I do this, it works great in both from what I can tell

function mailForm(){
var oCont = document.getElementById("contact").innerHTML;
var emailAddress = document.form1.email.value;
var userName = document.form1.name.value;
var theMessage= document.form1.message.value;
document.getElementById("contact").innerHTML = "processing...";
var PHPResp = getPHPResponse("/scripts/processtheform.php?email=" + emailAddress + "&name=" + userName + "&message=" + theMessage);
document.getElementById("contact").innerHTML = PHPResp;
//setTimeout("returnMail(\'"+oCont+"\');",3000);
document.getElementById("contact").innerHTML = oCont;
}

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

THATS IT!!!!

THANK YOU so very much. You amaze me once again!!!!

**bump points** for your effort. VERY much appreciated.

I may have one more in a couple hours...until then!

Great when things finally work:-)

Glad I could help

Batalf

D4Ly,

just so you don't forget - remember to close your questions:-)

See you around!

Batalf