AJAX

Question on submitting form info. to an email.

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2009

Posts: 5

Reputation: Matsui is an unknown quantity at this point

Solved Threads: 0

Matsui

Offline

Newbie Poster

Question on submitting form info. to an email.

Jul 21st, 2009

i know that there is a mailto: script to use but it is unsecure and all that, so what would be the best way to go about sending form information to an email address in javascript?

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Question on submitting form info. to an email.

Jul 21st, 2009

Javascript can filter all the information you need along with your form mailer. But securing those data with this script, is not advisable. Try PHP instead..

•

Join Date: Jul 2009

Posts: 5

Reputation: Matsui is an unknown quantity at this point

Solved Threads: 0

Matsui

Offline

Newbie Poster

Re: Question on submitting form info. to an email.

Jul 21st, 2009

•

Originally Posted by essential

Javascript can filter all the information you need along with your form mailer. But securing those data with this script, is not advisable. Try PHP instead..

I have only been learning this kind on my own for the past month or so. How would i use PHP in it. I will put in some of what i have:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<script type="text/javascript" language="JavaScript">
//
 
// Function for Form F2
 
function checkTotal() {
document.listForm.total.value = '';
var sum = 0;
for (i=0;i<document.listForm.choice.length;i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseInt(document.listForm.choice[i].value);
}
}
document.listForm.total.value = sum;
}
 
</script>
 
</HEAD>
<BODY bgcolor="beige">
 
<form name="listForm">
<input type="checkbox" name="choice" value="30" onclick="javascript: checkTotal(listForm)"/> (30.00)<br>
<input type="checkbox" name="choice" value="20" onclick="javascript: checkTotal(listForm)"/> (20.00)/each<br>
<input type="checkbox" name="choice" value="0" onclick="javascript: checkTotal(listForm)"/> (free)<br>
<input type="checkbox" name="choice" value="0" onclick="javascript: checkTotal(listForm)"/> (free)<br>
<input type="checkbox" name="choice" value="12" onclick="javascript: checkTotal(listForm)"/>(free)<br>
Total: <input type="text" size="5" name="total" value="20"/>
</form>
<script type="text/javascript" language="JavaScript">
//

// Function for Form F2

function checkTotal() {
document.listForm.total.value = '';
var sum = 0;
for (i=0;i<document.listForm.choice.length;i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseInt(document.listForm.choice[i].value);
}
}
document.listForm.total.value = sum;
}

</script>

</HEAD>
<BODY bgcolor="beige">

<form name="listForm">
<input type="checkbox" name="choice" value="30" onclick="javascript<b></b>: checkTotal(listForm)"/> (30.00)<br>
<input type="checkbox" name="choice" value="20" onclick="javascript<b></b>: checkTotal(listForm)"/> (20.00)/each<br>
<input type="checkbox" name="choice" value="0" onclick="javascript<b></b>: checkTotal(listForm)"/> (free)<br>
<input type="checkbox" name="choice" value="0" onclick="javascript<b></b>: checkTotal(listForm)"/> (free)<br>
<input type="checkbox" name="choice" value="12" onclick="javascript<b></b>: checkTotal(listForm)"/>(free)<br>
Total: <input type="text" size="5" name="total" value="20"/>
</form>

Thank you for your help!!

Last edited by peter_budo; Jul 22nd, 2009 at 2:31 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

•

Join Date: Jul 2009

Posts: 5

Reputation: Matsui is an unknown quantity at this point

Solved Threads: 0

Matsui

Offline

Newbie Poster

Re: Question on submitting form info. to an email.

Jul 21st, 2009

•

Originally Posted by essential

Javascript can filter all the information you need along with your form mailer. But securing those data with this script, is not advisable. Try PHP instead..

i have attached the html document form that i am working with and needing to do the mailing with; it is in word doc though (but it is out of notepad originally).

Attached Files

formcode.doc (31.0 KB, 0 views)

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Question on submitting form info. to an email.

Jul 21st, 2009

Hi Matsui,

That problem is that i cannot perform actual run in PHP. I only provide solutions in which i can run first, and that's probably with JavaScript.

I'll provide you with a brief example of validating forms fields using javascript.

But im kinda busy right now, so i'll just post back later...

essential

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Question on submitting form info. to an email.

Jul 22nd, 2009

Hi Matsui,

here's a little exercise for you, in where you can apply some experiments on the form elements using different approaches.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
body { background-color : beige; }
fieldset {
  padding : 1em; }
form {
  margin : 0;
}
 
ul {
  list-style : none;
  margin : 1em 0 0 0;
  padding : 0; }
li {
  margin-bottom : .500em; }
 
/* ]]> */
</style> 
<script type="text/javascript">
// <![CDATA[
var modern = Boolean(( !!document.all === true && !!!document.getElementById ) ? 0 : 1 ); /* 
  -Checks whether the browser is IE based or not.
  -Primitive values return stricter results over the statement. */
 
var checkTotal = function() {
   var dom = 0;
   var eLen;
   var form; // Declare form variable
   try { // Evaluating form variable with a couple statements, so that we can make it available for all types of browser.
      dom = 1;
      form = document.listForm; // DOM form manipulation.
   } // If the try {...} statement fails, catch( error ).
   catch( e ) { // catching errors, from the try statement
 
   // OBJECT Detection
   if ( modern ) // Check if it does support the getElementById method.
      form = document.getElementById( "listForm" );
   else // referred as IE
      form = document.all.listForm;
   } // The form has been clarified.
 
 
   if ( form ) { // See if we get some result over the form. If it does, then we can start performing validations on the fields'.
      if ( dom ) { // Lets  walk the DOM.
      form.total.value = "";
      eLen = form.elements.length; // Getting all the numbers of elements inside the form.
         for ( i = 0; i < eLen; ++i ) { // loop around the entire elements.
            if ( form.elements[ i ].type === "checkbox" ) { // if the type of element belongs to checkbox group.
            form.elements[ i ].onclick = ( function() { // Installing onclick event and skipping the inline callback to your form.
              var sum = this.value * 1;
              var amount = form.total.value * 1;
 
// A shorthand staments
              form.total.value = (( this.checked ) ? amount + sum : amount - sum ); // if this checkbox is checked add its value to the form total, otherwise subtract it to the form "total" field.
              form.total.value = (( form.total.value * 1 ) ? form.total.value : "" ); // if current value is not equal to 0, then show the value, or show nothing.
            } ); 
            continue; // skip the incrementing procedure if the type of element is different from "checkbox" class.
            }
         } delete i; // clears up the i variable.
         return
      } alert( "To be continue!" );
   }
};
onload = checkTotal; // Initiating function.
 
// ]]>
</script>
</head>
<body>
<div id="main">
 
<form id="listForm" name="listForm" action="#">
<fieldset><legend>Test Form</legend>
<ul>
<li><label for="c0"><input type="checkbox" id="c0" name="choice" value="30" /> (30.00)</label></li>
<li><label for="c1"><input type="checkbox" id="c1" name="choice" value="20" /> (20.00)/each</label></li>
<li><label for="c2"><input type="checkbox" id="c2" name="choice" value="0" /> (free)</label></li>
<li><label for="c3"><input type="checkbox" id="c3" name="choice" value="0" /> (free)</label></li>
<li><label for="c4"><input type="checkbox" id="c4" name="choice" value="0" /> (free)</label></li>
<li><label for="total"><input type="text" id="total" name="total" value="20" size="6" maxlength="6" /> free</label></li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
body { background-color : beige; }
fieldset {
  padding : 1em; }
form {
  margin : 0;
}

ul {
  list-style : none;
  margin : 1em 0 0 0;
  padding : 0; }
li {
  margin-bottom : .500em; }

/* ]]> */
</style> 
<script type="text/javascript">
// <![CDATA[
var modern = Boolean(( !!document.all === true && !!!document.getElementById ) ? 0 : 1 ); /* 
  -Checks whether the browser is IE based or not.
  -Primitive values return stricter results over the statement. */

var checkTotal = function() {
   var dom = 0;
   var eLen;
   var form; // Declare form variable
   try { // Evaluating form variable with a couple statements, so that we can make it available for all types of browser.
      dom = 1;
      form = document.listForm; // DOM form manipulation.
   } // If the try {...} statement fails, catch( error ).
   catch( e ) { // catching errors, from the try statement
   
   // OBJECT Detection
   if ( modern ) // Check if it does support the getElementById method.
      form = document.getElementById( "listForm" );
   else // referred as IE
      form = document.all.listForm;
   } // The form has been clarified.


   if ( form ) { // See if we get some result over the form. If it does, then we can start performing validations on the fields'.
      if ( dom ) { // Lets  walk the DOM.
      form.total.value = "";
      eLen = form.elements.length; // Getting all the numbers of elements inside the form.
         for ( i = 0; i < eLen; ++i ) { // loop around the entire elements.
            if ( form.elements[ i ].type === "checkbox" ) { // if the type of element belongs to checkbox group.
            form.elements[ i ].onclick = ( function() { // Installing onclick event and skipping the inline callback to your form.
              var sum = this.value * 1;
              var amount = form.total.value * 1;

// A shorthand staments
              form.total.value = (( this.checked ) ? amount + sum : amount - sum ); // if this checkbox is checked add its value to the form total, otherwise subtract it to the form "total" field.
              form.total.value = (( form.total.value * 1 ) ? form.total.value : "" ); // if current value is not equal to 0, then show the value, or show nothing.
            } ); 
            continue; // skip the incrementing procedure if the type of element is different from "checkbox" class.
            }
         } delete i; // clears up the i variable.
         return
      } alert( "To be continue!" );
   }
};
onload = checkTotal; // Initiating function.

// ]]>
</script>
</head>
<body>
<div id="main">

<form id="listForm" name="listForm" action="#">
<fieldset><legend>Test Form</legend>
<ul>
<li><label for="c0"><input type="checkbox" id="c0" name="choice" value="30" /> (30.00)</label></li>
<li><label for="c1"><input type="checkbox" id="c1" name="choice" value="20" /> (20.00)/each</label></li>
<li><label for="c2"><input type="checkbox" id="c2" name="choice" value="0" /> (free)</label></li>
<li><label for="c3"><input type="checkbox" id="c3" name="choice" value="0" /> (free)</label></li>
<li><label for="c4"><input type="checkbox" id="c4" name="choice" value="0" /> (free)</label></li>
<li><label for="total"><input type="text" id="total" name="total" value="20" size="6" maxlength="6" /> free</label></li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>

sorry but i am unable to open your attached file, i can only attend on the codes that is posted here.

P.S. it's always nice to submit your form using a function, so that you can prevent the user of getting the form to be submitted with a non-validated entry, if they have turned off the javascript support on their browser. Doing it with a fuction submitted form will ensure that you wont get any spam in form mailer...

essential