Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
|
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old April 24th, 2008, 11:37 AM
Friend of Wrox
 
Join Date: Jan 2005
Posts: 471
Thanks: 0
Thanked 1 Time in 1 Post
Default Resolved! - Verify Required fields and email form

Hi all -
I'm really new at HTML. I've built a form for customer input. Now I want to check to make sure they've entered required data. If so, I want to send an email to our sales team. If not, notify them of the missing data and focus on that field.

Here's my code:

<html>

<div id=body></div>

<form name="Request">
<form action="mailto:[email protected]" method="POST" enctype="text/plain">

<table border="0" width="24%" cellpadding="0">
<tr>
<td width="1%" valign="left">
<div align="left">Configuration---&nbsp *Required </td>
        <td width="2%" valign="left"><height="20">
         <select name="requiredconfiguration">
         <option selected>Select Configuration</option>
         <option>Basic Configuration</option>
         <option>Standard Configuration</option>
         <option>Advanced Configuration</option>
         <option>Custom Configuration</option>
        </select>
</td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">Company Name---&nbsp *Required </td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="requiredCompany"></td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">Last Name---&nbsp *Required </td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="requiredLastName"></td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">First Name---&nbsp *Required </td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="requiredFirstName"></td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">Title---</td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="Title"></td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">Phone Number---&nbsp *Required </td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="requiredPhone"></td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">Email Address---&nbsp *Required </td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="requiredEmail"></td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">Street Address---&nbsp *Required </td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="requiredAddress"></td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">City---&nbsp *Required </td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="requiredCity"></td>
</tr>
<tr>
<td width="1%" valign="left">
<div align="left">State---&nbsp *Required </td>
        <td width="2%" valign="left"><height="20">
         <select name="requiredstate">
         <option selected>Select State</option>
         <option>Alabama</option>
         <option>Alaska</option>
         <option>Arizona</option>
         <option>Arkansas</option>
         <option>California</option>
         <option>Colorado</option>
         <option>Connecticut</option>
         <option>Delaware</option>
         <option>Florida</option>
         <option>Georgia</option>
         <option>Hawaii</option>
         <option>Idaho</option>
         <option>Illinois</option>
         <option>Indiana</option>
         <option>Iowa</option>
         <option>Kansas</option>
         <option>Kentucky</option>
         <option>Louisiana</option>
         <option>Maine</option>
         <option>Maryland</option>
         <option>Massachusetts</option>
         <option>Michigan</option>
         <option>Minnesota</option>
         <option>Mississippi</option>
         <option>Missouri</option>
         <option>Montana</option>
         <option>Nebraska</option>
         <option>Nevada</option>
         <option>New Hampshire</option>
         <option>New Jersey</option>
         <option>New Mexico</option>
         <option>New York</option>
         <option>North Carolina</option>
         <option>North Dakota</option>
         <option>Ohio</option>
         <option>Oklahoma</option>
         <option>Oregon</option>
         <option>Pennsylvania</option>
         <option>Rhode Island</option>
         <option>South Carolina</option>
         <option>South Dakota</option>
         <option>Tennessee</option>
         <option>Texas</option>
         <option>Utah</option>
         <option>Vermont</option>
         <option>Virginia</option>
         <option>Washington</option>
         <option>West Virginia</option>
         <option>Wisconsin</option>
         <option>Wyoming</option>
         <option>Out of United States</option>
        </select>
</td>
</tr>
    <tr>
     <td height="40" colspan="2">If
        you would like to send us a message or ask us any questions, you may enter
        it here:</td>
    <tr>
     <td colspan="2" valign="top"><strong></strong>
        <textarea name="comments" cols="60" rows="4">
</textarea>
        </td>
    <tr>
     <td height="40" colspan="2" valign="bottom">By
        submitting this information to us you are requesting a sales quote on
        the product listed above. You are not subscribing to any other offers.</td>
    </tr>
</table>
<p>
<input type="submit" value="Submit"
</form>
</html>

Any help would be greatly appreciated!!



dartcoach
__________________
dartcoach
 
Old April 24th, 2008, 11:57 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi there,

HTML by itself can't do that. You'll need to look at other technologies or languages as well.

For client side validation you can use JavaScript. Instead of using action="mailto..." you could also use a server side technology like ASP.NET or PHP which allows you to do much more stuff than with plain HTML alone, including data validation, sending e-mail, database access and much more.

Either way, it's probably a bit too much to explain over a forum topic, so you may want to take a look at a Beginning * book, or Google for JavaScript and validation.

Cheers,

Imar


---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of Beginning ASP.NET 3.5 : in C# and VB, ASP.NET 2.0 Instant Results and Dreamweaver MX 2004
Want to be my colleague? Then check out this post.
 
Old April 24th, 2008, 12:13 PM
Friend of Wrox
 
Join Date: Jan 2005
Posts: 471
Thanks: 0
Thanked 1 Time in 1 Post
Default

Thanks Imar. I've been trying to get a javascript working for the validation, but with no luck.
I have no idea what you're talking about when you say server side technology! This is my first foray into the world
of web development!

Thanks anyway.

dartcoach
 
Old April 24th, 2008, 03:09 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Web pages are generally served by a web server. While a final web page in the browser often contains only plain HTML, CSS (for formatting) and JavaScript, a web page doesn't have to start as a plain HTML page.

To enable web sites to do dynamic stuff (show contents from a database, allow users to search the site, sign up, login etc, send e-mail) you need some intelligence at the server. This is usually referred to as a "server side technology": e.g. a programming environment that lets you create dynamic HTML pages on the fly.

There are many technologies to choose from, including PHP (open source), Cold Fusion(from Macromedia) and ASP / ASP.NET (from Microsoft). For example, the forum page you are reading right now is written in "classic" ASP, or Active Server Pages. While what you see in the browser is static HTML, this page is created from database content using a programming language like VB Script.

Once you start building a web page that is slightly more than a simple hello world page, or one with some static content, you'll need a server technology.

If you're interested, you may want to check out my book Beginning ASP.NET 3.5 that gradually takes you from static HTML into the world of dynamic web pages: http://www.wrox.com/WileyCDA/WroxTit...47018759X.html

Hope this helps a bit. If you need more help with the JavaScript validation, I think you're better off posting this in the JavaScript category here at p2p.wrox.com.

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of Beginning ASP.NET 3.5 : in C# and VB, ASP.NET 2.0 Instant Results and Dreamweaver MX 2004
Want to be my colleague? Then check out this post.
 
Old April 24th, 2008, 03:35 PM
Friend of Wrox
 
Join Date: Jan 2005
Posts: 471
Thanks: 0
Thanked 1 Time in 1 Post
Default

Imar,
Thanks very much!! I've gotten the javascript validating all my fields. Now on to server side stuff to send the form.
What do I have to have my server guy put on the server(or activate on the server - IIS 6.0)?
Then - how the heck do I send the form data to a specific address?

Thanks!

dartcoach
 
Old April 24th, 2008, 03:44 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

A Windows Server running IIS is capable of running all major versions of .NET including the latest 3.5 version.

http://www.microsoft.com/downloads/d...displaylang=en

After installing this, your server admin may also have to configure IIS to work with the right version of ASP.NET

After that, you can create a simple web form (with an ASPX extension) that accepts user input and that sends a messages using classes in the System.Net.Mail namespace. A simple example could look like this:
Code:
MailMessage myMessage = new MailMessage();
myMessage.From = new MailAddress("[email protected]");
myMessage.To.Add(new MailAddress("[email protected]"));
new SmtpClient("Your.Mail.Server").Send(myMessage);
Obviously, there's a lot more to this. My book is a great start, and so is the official ASP.NET learning portal:

http://www.asp.net/learn/
http://quickstarts.asp.net/

Hope this helps,

Imar


---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of Beginning ASP.NET 3.5 : in C# and VB, ASP.NET 2.0 Instant Results and Dreamweaver MX 2004
Want to be my colleague? Then check out this post.
 
Old April 25th, 2008, 08:59 AM
Friend of Wrox
 
Join Date: Jan 2005
Posts: 471
Thanks: 0
Thanked 1 Time in 1 Post
Default

Thanks Imar,
We've got the server set to allow asp. I found some asp code for sending mail using CDO. The asp code, when run, opens the asp editor - nothing else.
I'm on a deadline to get this figured out by 5:00 this afternoon.
Hope someone can lead me down the right path.

Thanks for all your help!


dartcoach
 
Old April 25th, 2008, 10:03 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

How are you requesting that page? It doesn't seem to be processed by IIS....

Imar


---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of Beginning ASP.NET 3.5 : in C# and VB, ASP.NET 2.0 Instant Results and Dreamweaver MX 2004
Want to be my colleague? Then check out this post.
 
Old April 25th, 2008, 10:16 AM
Friend of Wrox
 
Join Date: Jan 2005
Posts: 471
Thanks: 0
Thanked 1 Time in 1 Post
Default

Imar, thanks again - here's the code for my page. It allows me to enter data - verifies but when I hit the send button - nothing happens.

<%

If Request.Form("btnSend").Count > 0 Then

   Set objMessage = CreateObject("CDO.Message")
   objMessage.Subject = "Web NBX V3000 Information Request"
   objMessage.Sender = Request.Form("Email")
   objMessage.To = "[email protected]"
   objMessage.Send
   Response.Redirect("framedatanew.html")
End If
%>


<html dir="ltr" xml:lang="en" lang="en">
<head>
    <title>CIO NBX Information Request Form</title>
    <style type="text/css">
        #errormsg
        {
            border:2px solid #c00;
            padding:5px;
            width:20em;
        }
        .error
        {
            background:#fcc;
        }
    </style>
    <script type="text/javascript">
        function checkform(of)
        {
        // Test if DOM is available and there is an element called required
            if(!document.getElementById || !document.createTextNode){return;}
            if(!document.getElementById('required')){return;}

        // Define error messages and split the required fields
            var errorID='errormsg';
            var errorClass='error'
            var errorMsg='Please enter or change the fields marked with a ';
            var errorImg='alert.gif';
            var errorAlt='Error';
            var errorTitle='This field has an error!';
            var reqfields=document.getElementById('required').valu e.split(',');

        // Cleanup old mess
            // if there is an old errormessage field, delete it
            if(document.getElementById(errorID))
            {
                var em=document.getElementById(errorID);
                em.parentNode.removeChild(em);
            }
            // remove old images and classes from the required fields
            for(var i=0;i<reqfields.length;i++)
            {
                var f=document.getElementById(reqfields[i]);
                if(!f){continue;}
                if(f.previousSibling && /img/i.test(f.previousSibling.nodeName))
                {
                    f.parentNode.removeChild(f.previousSibling);
                }
                f.className='';
            }
        // loop over required fields
            for(var i=0;i<reqfields.length;i++)
            {
        // check if required field is there
                var f=document.getElementById(reqfields[i]);
                if(!f){continue;}
        // test if the required field has an error,
        // according to its type
                switch(f.type.toLowerCase())
                {
                    case 'text':
                        if(f.value=='' && f.id!='email'){cf_adderr(f)}
        // email is a special field and needs checking
                        if(f.id=='email' && !cf_isEmailAddr(f.value)){cf_adderr(f)}
                    break;
                    case 'textarea':
                        if(f.value==''){cf_adderr(f)}
                    break;
                    case 'checkbox':
                        if(!f.checked){cf_adderr(f)}
                    break;
                    case 'select-one':
                        if(!f.selectedIndex && f.selectedIndex==0){cf_adderr(f)}
                    break;
                }
            }
            return !document.getElementById(errorID);

            /* Tool methods */
            function cf_adderr(o)
            {
                // create image, add to and colourise the error fields
                var errorIndicator=document.createElement('img');
                errorIndicator.alt=errorAlt;
                errorIndicator.src=errorImg;
                errorIndicator.title=errorTitle;
                o.className=errorClass;
                o.parentNode.insertBefore(errorIndicator,o);

            // Check if there is no error message
                if(!document.getElementById(errorID))
                {
                // create errormessage and insert before submit button
                    var em=document.createElement('div');
                    em.id=errorID;
                    var newp=document.createElement('p');
                    newp.appendChild(document.createTextNode(errorMsg) )
                    // clone and insert the error image
                    newp.appendChild(errorIndicator.cloneNode(true));
                    em.appendChild(newp);
                    // find the submit button
                    for(var i=0;i<of.getElementsByTagName('input').length;i++)
                    {
                        if(/submit/i.test(of.getElementsByTagName('input')[i].type))
                        {
                            var sb=of.getElementsByTagName('input')[i];
                            break;
                        }
                    }
                    if(sb)
                    {
                        sb.parentNode.insertBefore(em,sb);
                    }
                }
            }
            function cf_isEmailAddr(str)
            {
                return str.match(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/);
            }
        }
    </script>
</head>
<body>
<form action="EmailWithCDO.asp" method="post" enctype="text/plain" onsubmit="return checkform(this);">
    <p>
        <input type="hidden" name="required" id="required" value="configuration,company,lastname,firstname,ph one,email,state" />
    </p>
<table border="0" width="24%" cellpadding="0">
<tr>
<td width="1%" valign="left">
<div align="left">Configuration---&nbsp *Required </td>
        <td width="2%" valign="left"><height="20">
          <select name="configuration" id="configuration">
          <option selected>Select Configuration</option>
          <option>Basic Configuration</option>
          <option>Standard Configuration</option>
          <option>Advanced Configuration</option>
          <option>Custom Configuration</option>
        </select>
</td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">Company Name---&nbsp *Required </td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="Company" id="Company"></td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">Last Name---&nbsp *Required </td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="LastName" id="LastName"></td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">First Name---&nbsp *Required </td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="FirstName" id="FirstName"></td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">Title---</td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="Title" id="Title"></td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">Phone Number---&nbsp *Required </td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="Phone" id="Phone"></td>
</tr>
<tr>
<td width="1%" valign="Left">
<div align="left">Email Address---&nbsp *Required </td>
        <td width="2% valign="Left"><height="20">
        <input type="text" name="Email" id="Email"></td>
</tr>
<tr>
<td width="1%" valign="left">
<div align="left">State---&nbsp *Required </td>
        <td width="2%" valign="left"><height="20">
          <select name="state" id="State">
          <option selected>Select State</option>
          <option>Alabama</option>
          <option>Alaska</option>
          <option>Arizona</option>
          <option>Arkansas</option>
          <option>California</option>
          <option>Colorado</option>
          <option>Connecticut</option>
          <option>Delaware</option>
          <option>Florida</option>
          <option>Georgia</option>
          <option>Hawaii</option>
          <option>Idaho</option>
          <option>Illinois</option>
          <option>Indiana</option>
          <option>Iowa</option>
          <option>Kansas</option>
          <option>Kentucky</option>
          <option>Louisiana</option>
          <option>Maine</option>
          <option>Maryland</option>
          <option>Massachusetts</option>
          <option>Michigan</option>
          <option>Minnesota</option>
          <option>Mississippi</option>
          <option>Missouri</option>
          <option>Montana</option>
          <option>Nebraska</option>
          <option>Nevada</option>
          <option>New Hampshire</option>
          <option>New Jersey</option>
          <option>New Mexico</option>
          <option>New York</option>
          <option>North Carolina</option>
          <option>North Dakota</option>
          <option>Ohio</option>
          <option>Oklahoma</option>
          <option>Oregon</option>
          <option>Pennsylvania</option>
          <option>Rhode Island</option>
          <option>South Carolina</option>
          <option>South Dakota</option>
          <option>Tennessee</option>
          <option>Texas</option>
          <option>Utah</option>
          <option>Vermont</option>
          <option>Virginia</option>
          <option>Washington</option>
          <option>West Virginia</option>
          <option>Wisconsin</option>
          <option>Wyoming</option>
          <option>Out of United States</option>
        </select>
</td>
</tr>
    <tr>
      <td height="40" colspan="2">If
        you would like to send us a message or ask us any questions, you may enter
        it here:</td>
    <tr>
      <td colspan="2" valign="top"><strong></strong>
        <textarea name="comments" id="comments" cols="60" rows="4">
  </textarea>
        </td>
    <tr>
      <td height="40" colspan="2" valign="bottom">By
        submitting this information to us you are requesting a sales quote on
        the configuration listed above. You are not subscribing to any other offers.</td>
    </tr>
</table>
</p>
<p>

    <p>
        <input type="submit" name="btnSend" value="Send information" />
    </p>
</form>
</body>
</html>



Hope you can see what I'm doing wrong!

Thanks!

dartcoach
 
Old April 25th, 2008, 11:25 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

No need to post all the code in your page; that makes it much more difficult to see what's going on.

Anyway, you haven't really answered my questions: How are you requesting that page? It doesn't seem to be processed by IIS....

How you open this page in the browser?

Imar


---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of Beginning ASP.NET 3.5 : in C# and VB, ASP.NET 2.0 Instant Results and Dreamweaver MX 2004
Want to be my colleague? Then check out this post.





Similar Threads
Thread Thread Starter Forum Replies Last Post
how to verify email exists? keyvanjan ASP.NET 2.0 Basics 1 November 30th, 2009 08:20 AM
[Resolved] Use of Required Field Validators snufse ASP.NET 2.0 Basics 5 March 11th, 2008 09:53 AM
Required Fields aRtware Access 2 May 26th, 2006 01:27 PM
how to verify email exists? keyvanjan ASP.NET 1.0 and 1.1 Professional 1 October 15th, 2005 12:06 PM
How to verify if form is shown pavel VB How-To 3 October 1st, 2004 01:10 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.