HTML Forum

**lyas** · 07-17-2006, 01:36 PM

Its nothing more than a simple script that someone needs to fill out name,ect...
all lines required... then submit. I have it set to auto respond with an email when form is recieved.
Works great from people using outlook.....

but anyone using aol, walmart, or netzero gets a pop up box for a message which seems to wipe out what ever they put in the original input boxes.

any ideas why it would work great from one addy and not from another?

**pcoptimized** · 07-18-2006, 12:32 AM

What's the code? Where is the script in working form?

**lyas** · 07-18-2006, 05:36 AM

I have the script on...... http://www.birchwreath.com/
When I test it...it works great. Won't let me submit without filling in something on each line. Then sends email with name of each box and the info I typed in.
But people that have tried it that are on netzero and walmart isp's get a pop up box asking for a message to be typed. All I get in the email is what they type in that box, nothing of what they filled into the original boxes.

Thanks for helping. I am at a total loss.

monica

<script>
/*
Check required form elements script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/
function checkrequired(which){
var pass=true
if (document.images){
for (i=0;i<which.length;i++){
var tempobj=which.elements[i]
if (tempobj.name.substring(0,8)=="required"){
if (((tempobj.type=="text"||tempobj.type=="textarea") &&tempobj.value=='')||(tempobj.type.toString().cha rAt(0)=="s"&&tempobj.selectedIndex==-1)){
pass=false
break
}
}
}
}
if (!pass){
alert("One or more of the required elements are not completed. Please complete them, then submit again!")
return false
}
else
return true
}
</script>

<FORM METHOD=POST ACTION="mailto:wreathwholesale@thecountrytree.com?subject= wreath wholesale price request" ENCTYPE="text/plain" onSubmit="return checkrequired(this)">
<H5>Please Fill out the form
to recieve info on where to find our wholesale pricing. Thanks! We look forward to hearing from you!</h5>
Contact name:<br><input type="text" name="required_Contact name" size="25"><br>
Email:<br><input type="text" name="required_email" size="25"><br>
Phone:<br><input type="text" name="required_phone" size="25"><br>
Company Name:<BR><input type=text name="required_CompanyName" size="25"><br>
Address:<BR><input type=text name="required_Address" size="25"><br>
City and State:<BR><input type=text name="required_City and State" size="25"><br>
<input type=submit value="Ok, I'm ready!">
</form>

**mastercomputers** · 05:17 AM

Because you're using mailto, then it's going to be sent via their email client, in which they'd have the ability to alter the contents anyways.

If you don't want to let them do this, then send the information to a mail processing script to handle sending the information or storing it.

I got bored and played around with your code to make a quite simple form, usually I'd store the javascript in it's own external file, as well as the styling. Though I didn't want to spend too much time with the javascript side of things just simple checks, although the email validation check was something I wrote myself, though only to find out after reading the RFC that IP addresses could be used, as well as some email names that slipped through before they limited the characters, so it's not the best, but it does work for most email addresses and may go into the validity more than other solutions.

Anyways, hope you like, and feel free to use it if you like but it may need alterations to fit into your site without conflicting with other elements.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <title>Simple Form</title>
    <style type="text/css">
    <!--
      body {
        font-family: Arial, Helvetica, Verdana, sans-serif;
      }
      p, span {
        font-size: small;
        font-weight: bold;
      }
      label {
        font-size: x-small;
        font-weight: bold;
        text-transform: uppercase;
      }
      span {
        cursor: help;
        color: red;
        background-color: white;
      }
      #submit {
        border: medium outset #aaa;
        background-color: #999;
        color: black;
      }
    -->
    </style>
    <script type="text/javascript">
    //<![CDATA[
    function correctMsg(el) {
      el.removeChild(el.firstChild);
      el.style.cssText = 'color: green';
      el.appendChild(document.createTextNode('* This is correct'));
      return;
    }

    function invalidError(el,type) {
      var error = '';
      el.removeChild(el.firstChild);
      el.style.cssText = 'color: red';

      switch(type) {
        case 'name':
          error = '* Name Required, No Numbers';
          break;
        case 'email':
          error = '* Email Required, Must Be Valid';
          break;
        case 'phone':
          error = '* Phone Required, Numbers Only';
          break;
        case 'address':
          error = '* Address Required';
          break;
        case 'citystate':
          error = '* City/State Required';
          break;
        default:
          error = '*';
          break;
      }

      el.appendChild(document.createTextNode(error));
      return;
    }

    function checkrequired(inputs, spans) {

      if(inputs.item(6).value != "OK, I'm ready!") {
        alert('Error: Must use supplied form.');
        return false;
      }

      var valid = true;
      var numbers_regex = /\d/g
      var email_regex = /^[a-z][a-z0-9_.-]+@[a-z0-9][a-z0-9-]+\.[a-z0-9]+(\.[a-z]+)*$/i
      var contact_name = inputs.item(0).value;
      var contact_span = spans.item(0);
      var email = inputs.item(1).value;
      var email_span = spans.item(1);
      var phone = inputs.item(2).value;
      var phone_span = spans.item(2);
      var company_name = inputs.item(3).value;
      var address = inputs.item(4).value;
      var address_span = spans.item(3);
      var citystate = inputs.item(5).value;
      var citystate_span = spans.item(4);

      if(contact_name == '' || contact_name.match(numbers_regex)) {
        invalidError(contact_span, 'name');
        valid = false;
      }
      else correctMsg(contact_span);

      if(email == '' || !email.match(email_regex)) {
        invalidError(email_span,'email');
        valid = false;
      }
      else correctMsg(email_span);

      if(phone == '' || !phone.match(numbers_regex)) {
        invalidError(phone_span, 'phone')
        valid = false;
      }
      else correctMsg(phone_span);

      if(address == '') {
        invalidError(address_span, 'address');
        valid = false;
      }
      else correctMsg(address_span);

      if(citystate == '') {
        invalidError(citystate_span, 'citystate')
        valid = false;
      }
      else correctMsg(citystate_span);

      var submit = document.getElementById('submit');

      submit.disabled = (valid) ? true : false;


      var body = document.getElementsByTagName('body').item(0);

      if(valid) {
        body.removeChild(body.lastChild);
        body.appendChild(document.createElement('p').appendChild(document.createTextNode('Form sent successfully. Thank you.')));
        submit.style.cssText = 'color: silver';
        submit.value = 'Thank You!';
      }
      else {
       body.removeChild(body.lastChild);
       body.appendChild(document.createElement('p').appendChild(document.createTextNode('Errors in form. Please fix them.')));
      }

      return valid;
    }
    //]]>
    </script>
  </head>
  <body>
    <p>Please fill out the form to find our wholesale pricing.<br />Thank You! We look forward to hearing from you!</p>
    <form  action="mailto:youremail@somewhere.com?subject=Web Form" method="post" enctype="text/plain" onsubmit="javascript:return checkrequired(this.getElementsByTagName('input'),this.getElementsByTagName('span'));">
      <div>
        <label for="contact_name">Contact name:</label><br />
        <input id="contact_name" name="contact_name" type="text" /> <span title="required field">*</span><br />
        <label for="email">Email:</label><br />
        <input id="email" name="email" type="text" /> <span title="required field">*</span><br />
        <label for="phone">Phone:</label><br />
        <input id="phone" name="phone" type="text" /> <span title="required field">*</span><br />
        <label for="company">Company Name:</label><br />
        <input id="company" name="company" type="text" /><br />
        <label for="address">Address:</label><br />
        <input id="address" name="address" type="text" /> <span title="required field">*</span><br />
        <label for="citystate">City and State:</label><br />
        <input id="citystate" name="citystate" type="text" /> <span title="required field">*</span><br />
        <input id="submit" name="submit" type="submit" value="OK, I'm ready!" />
      </div>
    </form>
  </body>
</html>

Cheers,

MC

P.S. By the way I saw no signs of a form on your website, so I can understand a blank textarea that people would have to fill in, where's the form?

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!