Solved

Webpage Not Working in IE

Posted on 2014-01-18
27
349 Views
Last Modified: 2014-01-27
I know this is a long shot, but I am desperate. I have a membership form that has been working for many years. There have been no changes made to it for three months, and those were minor. Late yesterday problems surfaced. The first notification came from a member using Windows7 and IE8.

The form is set up to accept one to five memberships. After one is entered, the member can "Add to Cart", the form is initialized, and then the member can enter the next membership. I am using IE11. When I tested to recreate the problem, one membership is successfully entered. As soon as I try to key the first character for the second membership, IE stops working. Error message says a problem caused the page to stop working correctly. I tried the same test in Firefox and Chrome, and they both work correctly. It would appear that something has changed in IE very recently. I don't have a clue as to where to start looking.

Link: http://www.lightningclass.org/membership/joinRenew/membershipOptions.asp
Click "Active Membership" and the membership form will be displayed.
Any suggestions would be greatly appreciated.
0
Comment
Question by:slegy
  • 13
  • 11
  • 2
  • +1
27 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39791188
There is something wrong with your js logic in a few places.  On chrome, every time I submit the form it asks to to select the membership type.  I am also a little worried about your cart total.  That should not be a form field and instead should be calculated. I hope you are not using that.

My suggestion is to ditch the fancy shmancy javascript form validation unless you are getting hundreds of applications per minute.  Ultimately you have to validate serverside anyway and the only reason for the js validation is to cut back on calls to the server and db.  My guess is you don't have to worry about a large volume of people submitting your form.

So on the server side...
<%
dim errMsg,errCount
errMsg=""
errCount=0
If request.form("membershipType")="slct" then
     errMsg=errMsg&"<p>Please select a membership type</p>"
     errCount=cdbl(errCount)+1
end if

If request.form("firstname")="" then
     errMsg=errMsg&"<p>Please add your First Name</p>"
     errCount=cdbl(errCount)+1
end if
If request.form("LastName")="" then
     errMsg=errMsg&"<p>Please add your Last Name</p>"
     errCount=cdbl(errCount)+1
end if
If request.form("Email")="" then
     errMsg=errMsg&"<p>Please add your Email</p>"
     errCount=cdbl(errCount)+1
end if
' do this for each item you want to check

' Check for errCount and if 0 process form
if errCount=0 then
  ' Update your db and go to next page
else
  ' Send back to form page.  If this is on a different page, store the errMsg in a session("errMsg").   You can also store each form input in a session variable and use that to prefill in the form items that are filled out.

end if

%>

Open in new window

Assuming the form is bad and you bring the user back to the form page.  In the body section
<%
 if session("errMsg")<>"" then
     response.write "<script>alert('"&session("errMsg")&"')</script>"
end if
%>

Open in new window

I think your onchnage event for the type is doing something odd too.
0
 

Author Comment

by:slegy
ID: 39791236
I really appreciate your looking at this so thoroughly. This form has been running without issue for over 5 years. As far as I know, it was running without issue up until yesterday. The organization is smack in the middle of a membership drive, so this couldn't have happened at a worse time. As a result, I don't have the luxury of a major rewrite today.

If you were being asked for a membership type on the second membership, that is because one has to be selected in order to know what the charges are. It is a drop-down menu. The cart total is a running calculated total.

The mystery is that in IE it works the first time through. For the second membership, it's OK with the cursor in "Title," then the browser stops when the cursor goes to "First Name." I removed the onchange code to see if that is the problem, but it's not. I tested in Chrome again, and it is working perfectly.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39791289
I did try it with chrome and it 'worked' but as somebody that never use the site before it was confusing.  When I clicked add to cart, I would add some type of modal that alerts me my data has been accepted and 2 buttons to add more or proceed to check out.  

The last time, I was getting errors that had to do the drop down and now I don't.

In any case, I put your code through http://www.jslint.com/ and there are a bunch of errors.  Some minor like spaces but take care of those anyway.  Keep fixing your code until you get the green light on this.  It may not solve the problem but it is the first thing I would do in trouble shooting.
0
 
LVL 50

Expert Comment

by:jcimarron
ID: 39791373
slegy--
Since you say the problem started only yesterday, run a System Restore from a date before the problem started.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39791387
jcimarron, this is for a webserver.  There are obvious issues with the javascript here and running a system restore on a webserver could prove to be very dangerous.   What is the basis for your answer?  Maybe I am missing something.
0
 

Author Comment

by:slegy
ID: 39791414
I have to abandon this for today. I can't be sure the last time it worked. The last update was in November and that was just to convert the names, addresses, etc. to title case. Also, the majority of members probably only enter one membership. I will try to check out the javascript errors, as this form is being updated as we speak and I would like to correct them. But I can't believe that is the problem since it works perfectly in Firefox and Chrome. And this isn't just a scripting error. It's stopping the browser. Are there any clues we can gleen from this?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39791432
I can't right away. Maybe somebody more versed in javascript can.  I have to go through the process of debugging to figure this out. There could have been a browser update that is effecting this.  As I said, when I first tried it, it kept giving me an error and I couldn't do anything in chrome.    I do know it is purely a javascript thing.  It is possible your code got you by and now it doesn't.    I know from working with js if everything is not perfect, a seemingly small error in one place throws everything off.  So... start cleaning up so it passes jslint first.  If it still does not work, at least that has been eliminated.   I could have written the form input serverside by now though....

Good luck.  And please don't do a system restore on  your webserver.
0
 
LVL 78

Expert Comment

by:David Johnson, CD, MVP
ID: 39791436
Seems to work fine now
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39791445
fyi, I received an email confirmation from trying out the form.

When I typed in the form my own payment amount ($0 or $1), the email came through as total payment based on the amount I entered regardless if I made a payment to paypal.  The other emails I received did show the $45.  

Your total payment due should always be a calculated amount based on the products purchased.  And the amount for each product (that you send to your payment processor) should not be in your code.  In this case, when I submitted the total paid of $0 and was directed to paypal, the correct amount was shown.  But then the email I get shows total dues and total payment when I did not make a payment.
0
 

Author Comment

by:slegy
ID: 39794370
Back to get this fixed. Keep in mind that the form always works the first time through. If you enter a membership and then click "Add to Cart", the information is saved, the fields are cleared, and the member can add a second membership. It occurred to me that possibly the way the form fields are being reinitialized may be the cause of the problem:
document.membershipApp.firstName.value = "";

I tried setting the value to "Null", but that kills the form. I also tried:
document.getElementById("firstName").value = "";
That doesn't fix the problem.

I did do some checking on the javascript errors. Most of them indicated that the variable definitions should be at the top of a function. It seems that if this were causing problems, the form would not work on the first membership.
0
 

Author Comment

by:slegy
ID: 39794560
Here's an interesting development. I replaced all the code in the clearForm function with:

      document.getElementById("membershipApp").reset();

Now on the second membership I can enter name, suffix, etc., address. Then randomly the browser stops working between city and email address.
0
 
LVL 50

Expert Comment

by:jcimarron
ID: 39794590
slegy--Out of curiosity--what version of Windows Server are you running?
0
 

Author Comment

by:slegy
ID: 39794626
Server 2003.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:slegy
ID: 39795601
Well, there is an update to this painful saga. I've worked with some other members today who've run some tests on their systems. The membership form runs successfully in IE8, IE9 and IE10. I'm running IE11, and the form errors out both on localhost and on the server. Does anyone know anything about IE11 that could be the cause of the problem?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39795681
I have heard the issues in ie11.  I am not a windows guy but try to see if you can force ie10

<meta http-equiv="X-UA-Compatible" content="IE=10" />

The reason it may have worked prior and not now is ie could have updated?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39795709
Slegy I would also try a new form just to test with and just one field and only enough javascript to make that one field work.   I have heard issues with ie11, but I keep going back to your javascript is very buggy as you saw when you ran it through http://www.jslint.com/.  

My first step in troubleshooting is to eliminate all possible issues I do have control over and the js code is the main item.

One possible issue is your title case conversion.  Cathel can probably talk to this better. I know he has seen this as a bug in ie11 previously.  fyi, when I run just this code through lint it throws errors.
String.prototype.toTitleCase = function() {
    var i, str, lowers, uppers;
    str = this.replace(/([^\W_]+[^\s-]*) */g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });

Open in new window

0
 

Author Comment

by:slegy
ID: 39795736
I spent quite a bit of time with lint this morning and found it very frustrating. It appears to flag code that I can't find a problem with. Many of the functions in the form were copied from the web, so there could be problems. This morning I looked at several toTitleCase functions, and the one that I'm using appears exactly the same on two different sites. I'm in a terrible time crunch right now, but I will try to do as you suggest. I do understand that that is the only way to narrow down the problem. FYI, it is very strange. After I put in the reset statement, I can make some entries for the second membership, but it is random as to which one it fails on...back at it tomorrow! (I'm really not liking IE)
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39795847
I know you said you did not want to spend time to rewrite this but given that tomorrow you are going on 3 days of banging your head against the wall... maybe it is time.

> Many of the functions in the form were copied from the web

This is one of the big issues with php and wordpress. A lot of people just copy and paste code they found without every know what it does, then you hear all the bad things about the language or the project when really it is many people getting into what appears to be an easy language.

Take into consideration when you did grab that code.  What version of each browser was out and how much has changed? and how much faster things are changing now then 5 years ago.

This is a good time to rewrite your code for both server side and client side.  Your own programming skills I am sure have changed as well and perhaps there is some better logic to use.

My suggestion is to only use client side script on this form for things like calculating the total.  Make the form easier for the user like give cues that something has happened (adding people).  Things like converting your text to upper case or camel case can all be easily done server side as well as final check for every field you will add to your database.

As it happens, I am working on a form for a client of mine that has a similar function as far as adding multiple people to one form.  I will put a sample up on jsbin for you.  Let's also switch to jquery 1.1x as that should be more cross compatible with ie 7 through 11.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39795884
To start, I cleaned up your html on the form.  There were some tags that were not matched up and I am converting some of your fields that will get calculated via jquery.

On the server side, all qty and amounts need to be calculated before being updated to the database.  The jquery calculations are only for the web user.  

http://jsbin.com/padasQ_28342201/1/edit

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<meta charset=utf-8 />
<title>padas Q_28342201</title>
</head>
<body>
 <form action="" method="get" name="membershipApp" id="membershipApp">
  <div id="summaryInfo">
    <!-- your date should be the default date in the database.  No need to add a date.  We will keep it as a hidden field -->
    <!-- <label for="currentDate">Submission Date:</label>-->
    <!-- use your asp date function <%=date%> -->
    <input type="hidden" value="<%=date%>" name="currentDate" id="currentDate" />
    <!-- cart total should be a calculated field -->
    <!-- <label for="cartTotal"> Cart Total:</label>
    <input name="cartTotal" type="text" id="cartTotal" size="8" maxlength="8" /> -->
    <div id="cartTotal"><!-- let jquery inject this info --></div>
    <br />
    <!-- duplicate <label for="membershipType"></label> -->
    <label for="membershipType">Membership Type:</label>
    <select name="membershipType" size="1" id="membershipType">
      
      <!-- we can  use the attribute data-price in our jquery to grab the price for calculation.  You still need to tally the final price server side -->
      
      <option value="slct" selected="selected">Select Membership Type</option>
      <option value="acef" data-price="45">Active Membership with eFlashes and Yearbook on CD $45</option>
      <option value="asef" data-price="26">Associate Membership with eFlashes and Yearbook on CD $26</option>
      <option value="cref" data-price="10">Crew Membership with eFlashes $10</option>
      <!-- prfl errors on your page when selected and not sure what the actual price is -->
      <option value="prfl" data-price="5">Printed Flashes Subscription $5</option>
    </select>
    <!-- make hidden field -->
    <!-- <label for="membershipDues"><br />
      Membership/Subscription:</label>-->
    <input name="membershipDues" type="hidden" id="membershipDues" size="8" maxlength="5" />
    <br />
    # Printed Flashes:
    <select name="flashes" id="flashes" tabindex="1">
      <option value="0" data-price="0"  selected="selected">0</option>
      <option value="1" data-price="20">1</option>
      <option value="2" data-price="40">2</option>
      <option value="3" data-price="60">3</option>
      <option value="4" data-price="80">4</option>
      <option value="5" data-price="100">5</option>
      <option value="6" data-price="120">6</option>
      <option value="7" data-price="140">7</option>
      <option value="8" data-price="160">8</option>
      <option value="9" data-price="180">9</option>
    </select>
    each copy $20<br />
    <label># Printed Yearbooks:
      <select name="yearbooks" id="yearbooks" tabindex="2">
        <option value="0" data-price="0"  selected="selected">0</option>
        <option value="1" data-price="25">1</option>
        <option value="2" data-price="50">2</option>
        <option value="3" data-price="75">3</option>
        <option value="4" data-price="100">4</option>
        <option value="5" data-price="125">5</option>
        <option value="6" data-price="150">6</option>
        <option value="7" data-price="175">7</option>
        <option value="8" data-price="200">8</option>
        <option value="9" data-price="225">9</option>
      </select>
    </label>
    each copy $25 <br />
    #Undesignated Crew:
    <label>
      <select name="undesigCrew" id="undesigCrew" tabindex="3">
        <option value="0" data-price="0" selected="selected">0</option>
        <option value="1" data-price="10">1</option>
        <option value="2" data-price="20">2</option>
        <option value="3" data-price="30">3</option>
        <option value="4" data-price="40">4</option>
        <option value="5" data-price="50">5</option>
        <option value="6" data-price="60">6</option>
        <option value="7" data-price="70">7</option>
        <option value="8" data-price="80">8</option>
        <option value="9" data-price="90">9</option>
      </select>
    </label>
    each card $10 </div>
  <fieldset id="personalInfo">
    <legend><span class="legend">Personal Information—</span><!-- extra closing span</span> --><span class="smallRed">*Indicates required field for Active and Associate Membership </span></legend>
    <div id="perInfo">
      <label for="title">Title:</label>
      <input name="title" type="text" id="title" tabindex="4" size="3" maxlength="4"  />
      <label for="firstName">First Name:</label>
      <span class="smallRed">*</span>
      <input name="firstName" type="text" id="firstName" tabindex="5" size="12" maxlength="18"  />
      <label for="midInit">Initial:</label>
      <input name="midInit" type="text" id="midInit" tabindex="6" size="2" maxlength="1"  />
      <label for="lastName">Last Name:<span class="smallRed">*</span><!-- extra span</span> --></label>
      <input name="lastName" type="text" id="lastName" tabindex="7" size="16" maxlength="24" />
      <br />
      <label for="suffix">Suffix:</label>
      <input name="suffix" type="text" id="suffix" tabindex="8" size="5" maxlength="5" />
      &nbsp;&nbsp;
      <label for="sex">Sex:</label>
      <select name="sex" size="1" id="sex" tabindex="9">
        <option value="F">Female</option>
        <option value="M">Male</option>
      </select>
      &nbsp;&nbsp;&nbsp;
      <label for="birthYear">Year of Birth:</label>
      <input name="birthYear" type="text" id="birthYear" tabindex="10" size="4" maxlength="4" />
      <label for="nickname">Nickname:</label>
      <input name="nickname" type="text" id="nickname" tabindex="11" size="12" maxlength="12" />
      <br />
      <label for="address">Address1:</label>
      <span class="smallRed">*</span>
      <input name="address" type="text" id="address" tabindex="12" title="*Address:" size="30" maxlength="50" />
      <label for="address2"> Address2:</label>
      <input name="address2" type="text" id="address2" tabindex="13" size="30" maxlength="50"  />
      <br />
      <label for="city">City:<span class="smallRed">*</span></label>
      <input name="city" type="text" id="city" tabindex="14" title="*City:" size="16" maxlength="16" />
      <label for="stateProvince">State/Province:</label>
      <select name="stateProvince" id="stateProvince" tabindex="15">
        <option value="AA" selected="selected" >Select a State</option>
        <option value="AB"  >Alberta</option>
        <option value="AK"  >Alaska</option>
        <option value="AL"  >Alabama</option>
        <option value="AR"  >Arkansas</option>
        <option value="AZ"  >Arizona</option>
        <option value="BC"  >British Columbia</option>
        <option value="CA"  >California</option>
        <option value="CO"  >Colorado</option>
        <option value="CT"  >Connecticut</option>
        <option value="DC"  >District of Columbia</option>
        <option value="DE"  >Deleware</option>
        <option value="FL"  >Florida</option>
        <option value="GA"  >Georgia</option>
        <option value="HI"  >Hawaii</option>
        <option value="IA"  >Iowa</option>
        <option value="ID"  >Idaho</option>
        <option value="IL"  >Illinois</option>
        <option value="IN"  >Indiana</option>
        <option value="KS"  >Kansas</option>
        <option value="KY"  >Kentucky</option>
        <option value="LA"  >Louisiana</option>
        <option value="MA"  >Massachusetts</option>
        <option value="MB"  >Manitoba</option>
        <option value="MD"  >Maryland</option>
        <option value="ME"  >Maine</option>
        <option value="MI"  >Michigan</option>
        <option value="MN"  >Minnesota</option>
        <option value="MO"  >Missouri</option>
        <option value="MS"  >Mississippi</option>
        <option value="MT"  >Montana</option>
        <option value="NB"  >New Brunswick</option>
        <option value="NC"  >North Carolina</option>
        <option value="ND"  >North Dakota</option>
        <option value="NE"  >Nebraska</option>
        <option value="NH"  >New Hampshire</option>
        <option value="NJ"  >New Jersey</option>
        <option value="NL"  >Newfoundland/Labrador</option>
        <option value="NM"  >New Mexico</option>
        <option value="NS"  >Nova Scotia</option>
        <option value="NU"  >Nunavut Territory</option>
        <option value="NV"  >Nevada</option>
        <option value="NY"  >New York</option>
        <option value="OH"  >Ohio</option>
        <option value="OK"  >Oklahoma</option>
        <option value="ON"  >Ontario</option>
        <option value="OR"  >Oregon</option>
        <option value="PA"  >Pennsylvania</option>
        <option value="PE"  >Prince Edward Island</option>
        <option value="QC"  >Quebec</option>
        <option value="RI"  >Rhode Island</option>
        <option value="SC"  >South Carolina</option>
        <option value="SD"  >South Dakota</option>
        <option value="SK"  >Saskatchewan</option>
        <option value="TN"  >Tennessee</option>
        <option value="TX"  >Texas</option>
        <option value="UT"  >Utah</option>
        <option value="VA"  >Virginia</option>
        <option value="VT"  >Vermont</option>
        <option value="WA"  >Washington</option>
        <option value="WI"  >Wisconsin</option>
        <option value="WV"  >West Virginia</option>
        <option value="WY"  >Wyoming</option>
        <option value="YT"  >Yukon Territory</option>
      </select>
      <br />
      <label for="country">Country:<span class="smallRed">*</span></label>
      <select name="country" id="country" tabindex="16">
        <option value="AS"  >American Samoa</option>
        <option value="AR"  >Argentina</option>
        <option value="AU"  >Australia</option>
        <option value="AT"  >Austria</option>
        <option value="BS"  >Bahamas</option>
        <option value="BE"  >Belgium</option>
        <option value="BJ"  >Benin</option>
        <option value="BM"  >Bermuda</option>
        <option value="BR"  >Brazil</option>
        <option value="CA"  >Canada</option>
        <option value="KY"  >Cayman Islands</option>
        <option value="CL"  >Chile</option>
        <option value="CO"  >Colombia</option>
        <option value="DK"  >Denmark</option>
        <option value="EC"  >Ecuador</option>
        <option value="ET"  >Ethiopia</option>
        <option value="FI"  >Finland</option>
        <option value="FR"  >France</option>
        <option value="DE"  >Germany</option>
        <option value="GB"  >Great Britain</option>
        <option value="GR"  >Greece</option>
        <option value="GU"  >Guam</option>
        <option value="GT"  >Guatemala</option>
        <option value="IE"  >Ireland</option>
        <option value="IT"  >Italy</option>
        <option value="JM"  >Jamaica</option>
        <option value="JP"  >Japan</option>
        <option value="LV"  >Latvia</option>
        <option value="LI"  >Liechtenstein</option>
        <option value="LT"  >Lithuania</option>
        <option value="LU"  >Luxembourg</option>
        <option value="MX"  >Mexico</option>
        <option value="NL"  >Netherlands</option>
        <option value="NZ"  >New Zealand</option>
        <option value="NI"  >Nicaragua</option>
        <option value="NE"  >Niger</option>
        <option value="NG"  >Nigeria</option>
        <option value="NO"  >Norway</option>
        <option value="PE"  >Peru</option>
        <option value="PT"  >Portugal</option>
        <option value="PR"  >Puerto Rico</option>
        <option value="ZA"  >South Africa</option>
        <option value="ES"  >Spain</option>
        <option value="SE"  >Sweden</option>
        <option value="CH"  >Switzerland</option>
        <option value="UG"  >Uganda</option>
        <option value="UK"  >United Kingdom</option>
        <option value="US" selected="selected" >United States</option>
        <option value="VE"  >Venezuela</option>
      </select>
      <label for="zipCode">Zip:<span class="smallRed">*</span></label>
      <input name="zipCode" type="text" id="zipCode" tabindex="17" size="10" maxlength="10" />
      <br />
      <label for="homePhone"><!-- extra span </span> -->Home Phone:<span class="smallRed">*</span></label>
      <input name="homePhone6" type="text" id="homePhone" tabindex="18" size="12" maxlength="18" />
      <label for="workPhone"> Work Phone:</label>
      <input name="workPhone" type="text" id="workPhone" tabindex="19" size="12" maxlength="18" />
      <label for="mobilePhone"> MobilePhone:</label>
      <input name="mobilePhone" type="text" id="mobilePhone" tabindex="20" size="12" maxlength="18" />
      <br />
      <label for="mailfrom">Home Email:<span class="smallRed">*</span></label>
      <input name="mailfrom" type="text" id="mailfrom" tabindex="21" size="32"  maxlength="80" />
      <label for="workEmail">Work Email:</label>
      <input name="workEmail" type="text" id="workEmail" tabindex="22" size="32"  maxlength="80" />
      <br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <label for="bgRecipient">Boat Grant Recipient Year:</label>
      <input name="bgRecipient" type="text" id="bgRecipient" tabindex="23" size="4"  maxlength="4" />
      <label for="bgMentor">Boat Grant Mentor Year:</label>
      <input name="bgMentor" type="text" id="bgMentor" tabindex="24" size="4"  maxlength="4" />
      <br />
    </div>
  </fieldset>
  <fieldset id="boatInfo">
    <legend class="boatlegend"><br />
    <span class="legend">Boat Information</span><br />
    </legend>
    <div id="boat">
      <label for="boatNo">Boat#:</label>
      <input name="boatNo" type="text" id="boatNo" tabindex="25" size="8" maxlength="5" />
      <label for="boatName"> Boat Name:</label>
      <input name="boatName" type="text" id="boatName" tabindex="26" size="24" maxlength="24" />
      <br />
      <label for="boatNo2">Boat2#:</label>
      <input name="boatNo6" type="text" id="boatNo2" tabindex="27" size="8" maxlength="5" />
      <label for="boatName2"> Boat2 Name:</label>
      <input name="boatName2" type="text" id="boatName2" tabindex="28" size="24" maxlength="24" />
      <br />
      <label for="boatNo3">Boat3#:</label>
      <input name="boatNo3" type="text" id="boatNo3" tabindex="29" size="8" maxlength="5" />
      <label for="boatName3"> Boat3 Name:</label>
      <input name="boatName3" type="text" id="boatName3" tabindex="30" size="24" maxlength="24" />
      <br />
      <br />
    </div>
  </fieldset>
  <fieldset id="districtInfo">
    <legend class="districtlegend"><br />
    <span class="legend">Location/Offices</span><br />
    </legend>
    <div id="location">
      <label for="district">District:</label>
      <select name="district" id="district" tabindex="31" title="District">
        <option value="AA" selected="selected" > Select a District</option>
        <option value="AR"  >Argentina</option>
        <option value="AU"  >Australia</option>
        <option value="BR"  >Brazil</option>
        <option value="CA"  >California</option>
        <option value="CC"  >Central Canada</option>
        <option value="CH"  >Switzerland</option>
        <option value="CL"  >Chile</option>
        <option value="CN"  >Central Atlantic</option>
        <option value="CO"  >Colombia</option>
        <option value="CR"  >Connecticut/Rhode Island</option>
        <option value="CY"  >Central New York</option>
        <option value="DX"  >Dixie</option>
        <option value="EC"  >Ecuador</option>
        <option value="FI"  >Finland</option>
        <option value="FL"  >Florida</option>
        <option value="GR"  >Greece</option>
        <option value="IE"  >Ireland</option>
        <option value="IN"  >Indiana</option>
        <option value="IT"  >Italy</option>
        <option value="LE"  >Lake Erie</option>
        <option value="LI"  >Long Island</option>
        <option value="ME"  >Metropolitan</option>
        <option value="MI"  >Michigan</option>
        <option value="MV"  >Mississippi Valley</option>
        <option value="MW"  >Midwest</option>
        <option value="MX"  >Mexico</option>
        <option value="NE"  >New England</option>
        <option value="NG"  >Nigeria</option>
        <option value="OH"  >Ohio</option>
        <option value="PN"  >Pacific Northwest</option>
        <option value="SE"  >Southeastern</option>
        <option value="SO"  >Southern</option>
        <option value="SV"  >St Lawrence Valley</option>
        <option value="TX"  >Texas</option>
        <option value="UN"  >Unaffiliated</option>
        <option value="US"  >US@Large</option>
      </select>
      <label for="districtOffice"> District Office Held:</label>
      <input name="districtOffice" type="text" id="districtOffice" tabindex="32" size="20" maxlength="20" />
      <br />
      <label for="fleetNo">Fleet#:</label>
      <select name="fleetNo" id="fleetNo" tabindex="33" title="Fleet">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="19">19</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="31">31</option>
        <option value="34">34</option>
        <option value="35">35</option>
        <option value="36">36</option>
        <option value="42">42</option>
        <option value="46">46</option>
        <option value="47">47</option>
        <option value="50">50</option>
        <option value="51">51</option>
        <option value="53">53</option>
        <option value="54">54</option>
        <option value="62">62</option>
        <option value="70">70</option>
        <option value="71">71</option>
        <option value="73">73</option>
        <option value="74">74</option>
        <option value="75">75</option>
        <option value="77">77</option>
        <option value="85">85</option>
        <option value="90">90</option>
        <option value="108">108</option>
        <option value="109">109</option>
        <option value="110">110</option>
        <option value="112">112</option>
        <option value="115">115</option>
        <option value="121">121</option>
        <option value="126">126</option>
        <option value="127">127</option>
        <option value="129">129</option>
        <option value="134">134</option>
        <option value="135">135</option>
        <option value="145">145</option>
        <option value="146">146</option>
        <option value="147">147</option>
        <option value="150">150</option>
        <option value="151">151</option>
        <option value="154">154</option>
        <option value="164">164</option>
        <option value="166">166</option>
        <option value="167">167</option>
        <option value="169">169</option>
        <option value="173">173</option>
        <option value="178">178</option>
        <option value="179">179</option>
        <option value="180">180</option>
        <option value="187">187</option>
        <option value="189">189</option>
        <option value="192">192</option>
        <option value="194">194</option>
        <option value="196">196</option>
        <option value="198">198</option>
        <option value="204">204</option>
        <option value="215">215</option>
        <option value="216">216</option>
        <option value="225">225</option>
        <option value="226">226</option>
        <option value="228">228</option>
        <option value="233">233</option>
        <option value="251">251</option>
        <option value="252">252</option>
        <option value="253">253</option>
        <option value="257">257</option>
        <option value="262">262</option>
        <option value="265">265</option>
        <option value="266">266</option>
        <option value="270">270</option>
        <option value="273">273</option>
        <option value="274">274</option>
        <option value="279">279</option>
        <option value="283">283</option>
        <option value="286">286</option>
        <option value="287">287</option>
        <option value="298">298</option>
        <option value="301">301</option>
        <option value="303">303</option>
        <option value="314">314</option>
        <option value="318">318</option>
        <option value="325">325</option>
        <option value="326">326</option>
        <option value="328">328</option>
        <option value="329">329</option>
        <option value="332">332</option>
        <option value="335">335</option>
        <option value="338">338</option>
        <option value="348">348</option>
        <option value="358">358</option>
        <option value="365">365</option>
        <option value="372">372</option>
        <option value="374">374</option>
        <option value="387">387</option>
        <option value="388">388</option>
        <option value="391">391</option>
        <option value="401">401</option>
        <option value="405">405</option>
        <option value="415">415</option>
        <option value="424">424</option>
        <option value="427">427</option>
        <option value="429">429</option>
        <option value="430">430</option>
        <option value="431">431</option>
        <option value="435">435</option>
        <option value="440">440</option>
        <option value="442">442</option>
        <option value="446">446</option>
        <option value="447">447</option>
        <option value="449">449</option>
        <option value="453">453</option>
        <option value="456">456</option>
        <option value="462">462</option>
        <option value="463">463</option>
        <option value="466">466</option>
        <option value="481">481</option>
        <option value="484">484</option>
        <option value="486">486</option>
        <option value="488">488</option>
        <option value="490">490</option>
        <option value="491">491</option>
        <option value="493">493</option>
        <option value="501">501</option>
        <option value="502">502</option>
        <option value="506">506</option>
        <option value="507">507</option>
        <option value="508">508</option>
        <option value="509">509</option>
        <option value="510">510</option>
        <option value="511">511</option>
        <option value="512">512</option>
        <option value="513">513</option>
        <option value="514">514</option>
        <option value="515">515</option>
        <option value="516">516</option>
        <option value="518">518</option>
        <option value="519">519</option>
        <option value="520">520</option>
        <option value="521">521</option>
        <option value="522">522</option>
        <option value="523">523</option>
        <option value="524">524</option>
      </select>
      <label for="fleetOffice"> Fleet Office Held:</label>
      <input name="fleetOffice" type="text" id="fleetOffice" tabindex="34" size="20" maxlength="20"  />
      <label for="govBoardOffice"><br />
        Governing Board Position:</label>
      <input name="govBoardOffice" type="text" id="govBoardOffice" tabindex="35" size="20"  maxlength="20"  />
      <br />
      <br />
      <label for="note">Note to Class Office:</label>
      <textarea name="note" id="note" cols="45" rows="2" tabindex="36"></textarea>
    </div>
  </fieldset>
  <div id="donationHdr"><span class="hpnewsHlt"><strong><em>Support the ILCA - Make a Donation</em></strong></span><br />
    <span class="hpsubHeaders"><strong>The International Lightning Class is a 501(c) organization and all donations are tax deductible.</strong></span><br />
    Donations at the Supporting Membership level and higher will receive a Gold Circle, a special decal<br />
    which goes over your regular boat decal, to acknowledge your generous support of the ILCA.<br />
    <br />
  </div>
  <fieldset id="donationInfo">
    <legend class="donationlegend"> <span class="legend">You Can Make a Difference</span><br />
    </legend>
    <div id="fundBox">
      <div id="donationDescr">The ILCA Fund was established in 1982 as a way to ensure and enhance the long-term operations of our class. The ILCA Fund is directed by a committee of five ILCA members. </div>
      <div id="fund">
        <label for="ilcaFund">ILCA Fund:</label>
        <input name="ilcaFund" type="text" id="ilcaFund" tabindex="37" value="0.00" size="6" maxlength="8" />
      </div>
    </div>
    <div id="fundBox">
      <div id="donationDescr">The Helen and Jay Limbaugh Fund was established in 1999. Its purpose is to further an appreciation of the joys of Lightning sailing among Junior and Active Members of the International Lightning Class Association. </div>
      <div id="fund">
        <label for="limbFund"> Helen &amp; Jay Limbaugh Fund:</label>
        <input name="limbFund" type="text" id="limbFund" tabindex="38" value="0.00" size="6" maxlength="8" />
      </div>
    </div>
    <div id="fundBox">
      <div id="donationDescr">The Mary Huntsman Lightning History Fund   was formed in 2004. Its primary objective is to help recover Lightning   memorabilia and properly preserve Class heritage.</div>
      <div id="fund">
        <label for="huntFund"> Mary Huntsman Fund:</label>
        <input name="huntFund" type="text" id="huntFund" tabindex="39" value="0.00" size="6" maxlength="8" />
      </div>
    </div>
    <div id="fundBox">
      <div id="donationDescr">The Boat Grant Program is designed to fund   young sailors who want to experience the high level of competition offered by   the ILCA. The  goal is to expose more youth racers to the ILCA circuit.</div>
      <div id="fund">
        <label for="boatGrant"> Boat Grant Program:</label>
        <input name="boatGrant" type="text" id="boatGrant" tabindex="40" value="0.00" size="6" maxlength="8" />
      </div>
    </div>
  </fieldset>
</form>
</body>
</html>
  

Open in new window


I will post the calculations and some basic client side validation next.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39795965
Here is your updated form with jquery instead of javascript.   http://jsbin.com/padasQ_28342201/2/

Please test it on your ie11 browser. Right now this is just calculating the amounts client side.  Next step is to submit the form to your server side asp page.

$(function () {
    // called when the page loads
    var membershipType = '';
    var subscriptionAmt = 0;
    var memberTotal = 0; //total this person
    var memberDonation = 0; //total donation
    var grandTotal = 0; //total all people


    // get member type and amount
    $('select#membershipType').change(function () {
        membershipType = $(this).val();
        subscriptionAmt = $(this).attr('data-price');

        getMembertotal(); // calc total due

    });

    // printed flashes
    var flashesTotal = 0;
    $('#flashes').change(function () {
        flashesTotal = $(this).attr('data-price');
        getMembertotal(); // calc total due
    });


    //printed year books
    var yearbooksTotal = 0;
    $('#yearbooks').change(function () {
        yearbooksTotal = $(this).attr('data-price');
        getMembertotal(); // calc total due
    });
    // Undesignated crew
    var undesigCrewTotal = 0;
    $('#undesigCrew').change(function () {
        undesigCrewTotal = $(this).attr('data-price');
        getMembertotal(); // calc total due
    });

    $('.memberDonation').change(function () {
        getMembertotal();
    });


    // function to calc member total
    function getMembertotal() {
        memberTotal = $('#membershipType').find('option:selected').attr('data-price');
        memberTotal = parseInt(memberTotal, 10) + parseInt($('#flashes').find('option:selected').attr('data-price'), 10);
        memberTotal = parseInt(memberTotal, 10) + parseInt($('#yearbooks').find('option:selected').attr('data-price'), 10);

        memberTotal = parseInt(memberTotal, 10) + parseInt($('#undesigCrew').find('option:selected').attr('data-price'), 10);

        // figure donatino amount
        memberDonation = parseInt(isNumeric($('#ilcaFund').val()), 10) + parseInt(isNumeric($('#limbFund').val()), 10) + parseInt(isNumeric($('#huntFund').val()), 10) + parseInt(isNumeric($('#boatGrant').val()), 10);
     
    memberTotal = parseInt(memberTotal, 10) + parseInt(memberDonation, 10);

        $('#cartTotal').html('Total: $' + memberTotal);
    }


    // test if number
    function isNumeric(num) {
        if (!isNaN(num)) {
            return (num);
        } else {
            return ('0');
        }
    }


});

Open in new window

<!DOCTYPE html>
<html>
<head>
  <style>
    #cartTotal{font-size:18px;font-weight:bold;}
  </style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<meta charset=utf-8 />
<title>padas Q_28342201</title>
</head>
<body>
 <form action="" method="get" name="membershipApp" id="membershipApp">
  <div id="summaryInfo">
    <!-- your date should be the default date in the database.  No need to add a date.  We will keep it as a hidden field -->
    <!-- <label for="currentDate">Submission Date:</label>-->
    <!-- use your asp date function <%=date%> -->
    <input type="hidden" value="<%=date%>" name="currentDate" id="currentDate" />
    <!-- cart total should be a calculated field -->
    <!-- <label for="cartTotal"> Cart Total:</label>
    <input name="cartTotal" type="text" id="cartTotal" size="8" maxlength="8" /> -->
    <div id="cartTotal"><!-- let jquery inject this info --></div>
    <br />
    <!-- duplicate <label for="membershipType"></label> -->
    <label for="membershipType">Membership Type:</label>
    
    <select name="membershipType"  id="membershipType">
      
      <!-- we can  use the attribute data-price in our jquery to grab the price for calculation.  You still need to tally the final price server side -->
      
      <option value="slct" selected="selected">Select Membership Type</option>
      <option value="acef" data-price="45">Active Membership with eFlashes and Yearbook on CD $45</option>
      <option value="asef" data-price="26">Associate Membership with eFlashes and Yearbook on CD $26</option>
      <option value="cref" data-price="10">Crew Membership with eFlashes $10</option>
      <!-- prfl errors on your page when selected and not sure what the actual price is -->
      <option value="prfl" data-price="5">Printed Flashes Subscription $5</option>
    </select>
    <!-- make hidden field -->
    <!-- <label for="membershipDues"><br />
      Membership/Subscription:</label>-->
    <input name="membershipDues" type="hidden" id="membershipDues" size="8" maxlength="5" />
    <br />
    # Printed Flashes:
    <select name="flashes" id="flashes" tabindex="1">
      <option value="0" data-price="0"  selected="selected">0</option>
      <option value="1" data-price="20">1</option>
      <option value="2" data-price="40">2</option>
      <option value="3" data-price="60">3</option>
      <option value="4" data-price="80">4</option>
      <option value="5" data-price="100">5</option>
      <option value="6" data-price="120">6</option>
      <option value="7" data-price="140">7</option>
      <option value="8" data-price="160">8</option>
      <option value="9" data-price="180">9</option>
    </select>
    each copy $20<br />
    <label># Printed Yearbooks:
      <select name="yearbooks" id="yearbooks" tabindex="2">
        <option value="0" data-price="0"  selected="selected">0</option>
        <option value="1" data-price="25">1</option>
        <option value="2" data-price="50">2</option>
        <option value="3" data-price="75">3</option>
        <option value="4" data-price="100">4</option>
        <option value="5" data-price="125">5</option>
        <option value="6" data-price="150">6</option>
        <option value="7" data-price="175">7</option>
        <option value="8" data-price="200">8</option>
        <option value="9" data-price="225">9</option>
      </select>
    </label>
    each copy $25 <br />
    #Undesignated Crew:
    <label>
      <select name="undesigCrew" id="undesigCrew" tabindex="3">
        <option value="0" data-price="0" selected="selected">0</option>
        <option value="1" data-price="10">1</option>
        <option value="2" data-price="20">2</option>
        <option value="3" data-price="30">3</option>
        <option value="4" data-price="40">4</option>
        <option value="5" data-price="50">5</option>
        <option value="6" data-price="60">6</option>
        <option value="7" data-price="70">7</option>
        <option value="8" data-price="80">8</option>
        <option value="9" data-price="90">9</option>
      </select>
    </label>
    each card $10 </div>
  <fieldset id="personalInfo">
    <legend><span class="legend">Personal Information—</span><!-- extra closing span</span> --><span class="smallRed">*Indicates required field for Active and Associate Membership </span></legend>
    <div id="perInfo">
      <label for="title">Title:</label>
      <input name="title" type="text" id="title" tabindex="4" size="3" maxlength="4"  />
      <label for="firstName">First Name:</label>
      <span class="smallRed">*</span>
      <input name="firstName" type="text" id="firstName" tabindex="5" size="12" maxlength="18"  />
      <label for="midInit">Initial:</label>
      <input name="midInit" type="text" id="midInit" tabindex="6" size="2" maxlength="1"  />
      <label for="lastName">Last Name:<span class="smallRed">*</span><!-- extra span</span> --></label>
      <input name="lastName" type="text" id="lastName" tabindex="7" size="16" maxlength="24" />
      <br />
      <label for="suffix">Suffix:</label>
      <input name="suffix" type="text" id="suffix" tabindex="8" size="5" maxlength="5" />
      &nbsp;&nbsp;
      <label for="sex">Sex:</label>
      <select name="sex" size="1" id="sex" tabindex="9">
        <option value="F">Female</option>
        <option value="M">Male</option>
      </select>
      &nbsp;&nbsp;&nbsp;
      <label for="birthYear">Year of Birth:</label>
      <input name="birthYear" type="text" id="birthYear" tabindex="10" size="4" maxlength="4" />
      <label for="nickname">Nickname:</label>
      <input name="nickname" type="text" id="nickname" tabindex="11" size="12" maxlength="12" />
      <br />
      <label for="address">Address1:</label>
      <span class="smallRed">*</span>
      <input name="address" type="text" id="address" tabindex="12" title="*Address:" size="30" maxlength="50" />
      <label for="address2"> Address2:</label>
      <input name="address2" type="text" id="address2" tabindex="13" size="30" maxlength="50"  />
      <br />
      <label for="city">City:<span class="smallRed">*</span></label>
      <input name="city" type="text" id="city" tabindex="14" title="*City:" size="16" maxlength="16" />
      <label for="stateProvince">State/Province:</label>
      <select name="stateProvince" id="stateProvince" tabindex="15">
        <option value="AA" selected="selected" >Select a State</option>
        <option value="AB"  >Alberta</option>
        <option value="AK"  >Alaska</option>
        <option value="AL"  >Alabama</option>
        <option value="AR"  >Arkansas</option>
        <option value="AZ"  >Arizona</option>
        <option value="BC"  >British Columbia</option>
        <option value="CA"  >California</option>
        <option value="CO"  >Colorado</option>
        <option value="CT"  >Connecticut</option>
        <option value="DC"  >District of Columbia</option>
        <option value="DE"  >Deleware</option>
        <option value="FL"  >Florida</option>
        <option value="GA"  >Georgia</option>
        <option value="HI"  >Hawaii</option>
        <option value="IA"  >Iowa</option>
        <option value="ID"  >Idaho</option>
        <option value="IL"  >Illinois</option>
        <option value="IN"  >Indiana</option>
        <option value="KS"  >Kansas</option>
        <option value="KY"  >Kentucky</option>
        <option value="LA"  >Louisiana</option>
        <option value="MA"  >Massachusetts</option>
        <option value="MB"  >Manitoba</option>
        <option value="MD"  >Maryland</option>
        <option value="ME"  >Maine</option>
        <option value="MI"  >Michigan</option>
        <option value="MN"  >Minnesota</option>
        <option value="MO"  >Missouri</option>
        <option value="MS"  >Mississippi</option>
        <option value="MT"  >Montana</option>
        <option value="NB"  >New Brunswick</option>
        <option value="NC"  >North Carolina</option>
        <option value="ND"  >North Dakota</option>
        <option value="NE"  >Nebraska</option>
        <option value="NH"  >New Hampshire</option>
        <option value="NJ"  >New Jersey</option>
        <option value="NL"  >Newfoundland/Labrador</option>
        <option value="NM"  >New Mexico</option>
        <option value="NS"  >Nova Scotia</option>
        <option value="NU"  >Nunavut Territory</option>
        <option value="NV"  >Nevada</option>
        <option value="NY"  >New York</option>
        <option value="OH"  >Ohio</option>
        <option value="OK"  >Oklahoma</option>
        <option value="ON"  >Ontario</option>
        <option value="OR"  >Oregon</option>
        <option value="PA"  >Pennsylvania</option>
        <option value="PE"  >Prince Edward Island</option>
        <option value="QC"  >Quebec</option>
        <option value="RI"  >Rhode Island</option>
        <option value="SC"  >South Carolina</option>
        <option value="SD"  >South Dakota</option>
        <option value="SK"  >Saskatchewan</option>
        <option value="TN"  >Tennessee</option>
        <option value="TX"  >Texas</option>
        <option value="UT"  >Utah</option>
        <option value="VA"  >Virginia</option>
        <option value="VT"  >Vermont</option>
        <option value="WA"  >Washington</option>
        <option value="WI"  >Wisconsin</option>
        <option value="WV"  >West Virginia</option>
        <option value="WY"  >Wyoming</option>
        <option value="YT"  >Yukon Territory</option>
      </select>
      <br />
      <label for="country">Country:<span class="smallRed">*</span></label>
      <select name="country" id="country" tabindex="16">
        <option value="AS"  >American Samoa</option>
        <option value="AR"  >Argentina</option>
        <option value="AU"  >Australia</option>
        <option value="AT"  >Austria</option>
        <option value="BS"  >Bahamas</option>
        <option value="BE"  >Belgium</option>
        <option value="BJ"  >Benin</option>
        <option value="BM"  >Bermuda</option>
        <option value="BR"  >Brazil</option>
        <option value="CA"  >Canada</option>
        <option value="KY"  >Cayman Islands</option>
        <option value="CL"  >Chile</option>
        <option value="CO"  >Colombia</option>
        <option value="DK"  >Denmark</option>
        <option value="EC"  >Ecuador</option>
        <option value="ET"  >Ethiopia</option>
        <option value="FI"  >Finland</option>
        <option value="FR"  >France</option>
        <option value="DE"  >Germany</option>
        <option value="GB"  >Great Britain</option>
        <option value="GR"  >Greece</option>
        <option value="GU"  >Guam</option>
        <option value="GT"  >Guatemala</option>
        <option value="IE"  >Ireland</option>
        <option value="IT"  >Italy</option>
        <option value="JM"  >Jamaica</option>
        <option value="JP"  >Japan</option>
        <option value="LV"  >Latvia</option>
        <option value="LI"  >Liechtenstein</option>
        <option value="LT"  >Lithuania</option>
        <option value="LU"  >Luxembourg</option>
        <option value="MX"  >Mexico</option>
        <option value="NL"  >Netherlands</option>
        <option value="NZ"  >New Zealand</option>
        <option value="NI"  >Nicaragua</option>
        <option value="NE"  >Niger</option>
        <option value="NG"  >Nigeria</option>
        <option value="NO"  >Norway</option>
        <option value="PE"  >Peru</option>
        <option value="PT"  >Portugal</option>
        <option value="PR"  >Puerto Rico</option>
        <option value="ZA"  >South Africa</option>
        <option value="ES"  >Spain</option>
        <option value="SE"  >Sweden</option>
        <option value="CH"  >Switzerland</option>
        <option value="UG"  >Uganda</option>
        <option value="UK"  >United Kingdom</option>
        <option value="US" selected="selected" >United States</option>
        <option value="VE"  >Venezuela</option>
      </select>
      <label for="zipCode">Zip:<span class="smallRed">*</span></label>
      <input name="zipCode" type="text" id="zipCode" tabindex="17" size="10" maxlength="10" />
      <br />
      <label for="homePhone"><!-- extra span </span> -->Home Phone:<span class="smallRed">*</span></label>
      <input name="homePhone6" type="text" id="homePhone" tabindex="18" size="12" maxlength="18" />
      <label for="workPhone"> Work Phone:</label>
      <input name="workPhone" type="text" id="workPhone" tabindex="19" size="12" maxlength="18" />
      <label for="mobilePhone"> MobilePhone:</label>
      <input name="mobilePhone" type="text" id="mobilePhone" tabindex="20" size="12" maxlength="18" />
      <br />
      <label for="mailfrom">Home Email:<span class="smallRed">*</span></label>
      <input name="mailfrom" type="text" id="mailfrom" tabindex="21" size="32"  maxlength="80" />
      <label for="workEmail">Work Email:</label>
      <input name="workEmail" type="text" id="workEmail" tabindex="22" size="32"  maxlength="80" />
      <br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <label for="bgRecipient">Boat Grant Recipient Year:</label>
      <input name="bgRecipient" type="text" id="bgRecipient" tabindex="23" size="4"  maxlength="4" />
      <label for="bgMentor">Boat Grant Mentor Year:</label>
      <input name="bgMentor" type="text" id="bgMentor" tabindex="24" size="4"  maxlength="4" />
      <br />
    </div>
  </fieldset>
  <fieldset id="boatInfo">
    <legend class="boatlegend"><br />
    <span class="legend">Boat Information</span><br />
    </legend>
    <div id="boat">
      <label for="boatNo">Boat#:</label>
      <input name="boatNo" type="text" id="boatNo" tabindex="25" size="8" maxlength="5" />
      <label for="boatName"> Boat Name:</label>
      <input name="boatName" type="text" id="boatName" tabindex="26" size="24" maxlength="24" />
      <br />
      <label for="boatNo2">Boat2#:</label>
      <input name="boatNo6" type="text" id="boatNo2" tabindex="27" size="8" maxlength="5" />
      <label for="boatName2"> Boat2 Name:</label>
      <input name="boatName2" type="text" id="boatName2" tabindex="28" size="24" maxlength="24" />
      <br />
      <label for="boatNo3">Boat3#:</label>
      <input name="boatNo3" type="text" id="boatNo3" tabindex="29" size="8" maxlength="5" />
      <label for="boatName3"> Boat3 Name:</label>
      <input name="boatName3" type="text" id="boatName3" tabindex="30" size="24" maxlength="24" />
      <br />
      <br />
    </div>
  </fieldset>
  <fieldset id="districtInfo">
    <legend class="districtlegend"><br />
    <span class="legend">Location/Offices</span><br />
    </legend>
    <div id="location">
      <label for="district">District:</label>
      <select name="district" id="district" tabindex="31" title="District">
        <option value="AA" selected="selected" > Select a District</option>
        <option value="AR"  >Argentina</option>
        <option value="AU"  >Australia</option>
        <option value="BR"  >Brazil</option>
        <option value="CA"  >California</option>
        <option value="CC"  >Central Canada</option>
        <option value="CH"  >Switzerland</option>
        <option value="CL"  >Chile</option>
        <option value="CN"  >Central Atlantic</option>
        <option value="CO"  >Colombia</option>
        <option value="CR"  >Connecticut/Rhode Island</option>
        <option value="CY"  >Central New York</option>
        <option value="DX"  >Dixie</option>
        <option value="EC"  >Ecuador</option>
        <option value="FI"  >Finland</option>
        <option value="FL"  >Florida</option>
        <option value="GR"  >Greece</option>
        <option value="IE"  >Ireland</option>
        <option value="IN"  >Indiana</option>
        <option value="IT"  >Italy</option>
        <option value="LE"  >Lake Erie</option>
        <option value="LI"  >Long Island</option>
        <option value="ME"  >Metropolitan</option>
        <option value="MI"  >Michigan</option>
        <option value="MV"  >Mississippi Valley</option>
        <option value="MW"  >Midwest</option>
        <option value="MX"  >Mexico</option>
        <option value="NE"  >New England</option>
        <option value="NG"  >Nigeria</option>
        <option value="OH"  >Ohio</option>
        <option value="PN"  >Pacific Northwest</option>
        <option value="SE"  >Southeastern</option>
        <option value="SO"  >Southern</option>
        <option value="SV"  >St Lawrence Valley</option>
        <option value="TX"  >Texas</option>
        <option value="UN"  >Unaffiliated</option>
        <option value="US"  >US@Large</option>
      </select>
      <label for="districtOffice"> District Office Held:</label>
      <input name="districtOffice" type="text" id="districtOffice" tabindex="32" size="20" maxlength="20" />
      <br />
      <label for="fleetNo">Fleet#:</label>
      <select name="fleetNo" id="fleetNo" tabindex="33" title="Fleet">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="19">19</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="31">31</option>
        <option value="34">34</option>
        <option value="35">35</option>
        <option value="36">36</option>
        <option value="42">42</option>
        <option value="46">46</option>
        <option value="47">47</option>
        <option value="50">50</option>
        <option value="51">51</option>
        <option value="53">53</option>
        <option value="54">54</option>
        <option value="62">62</option>
        <option value="70">70</option>
        <option value="71">71</option>
        <option value="73">73</option>
        <option value="74">74</option>
        <option value="75">75</option>
        <option value="77">77</option>
        <option value="85">85</option>
        <option value="90">90</option>
        <option value="108">108</option>
        <option value="109">109</option>
        <option value="110">110</option>
        <option value="112">112</option>
        <option value="115">115</option>
        <option value="121">121</option>
        <option value="126">126</option>
        <option value="127">127</option>
        <option value="129">129</option>
        <option value="134">134</option>
        <option value="135">135</option>
        <option value="145">145</option>
        <option value="146">146</option>
        <option value="147">147</option>
        <option value="150">150</option>
        <option value="151">151</option>
        <option value="154">154</option>
        <option value="164">164</option>
        <option value="166">166</option>
        <option value="167">167</option>
        <option value="169">169</option>
        <option value="173">173</option>
        <option value="178">178</option>
        <option value="179">179</option>
        <option value="180">180</option>
        <option value="187">187</option>
        <option value="189">189</option>
        <option value="192">192</option>
        <option value="194">194</option>
        <option value="196">196</option>
        <option value="198">198</option>
        <option value="204">204</option>
        <option value="215">215</option>
        <option value="216">216</option>
        <option value="225">225</option>
        <option value="226">226</option>
        <option value="228">228</option>
        <option value="233">233</option>
        <option value="251">251</option>
        <option value="252">252</option>
        <option value="253">253</option>
        <option value="257">257</option>
        <option value="262">262</option>
        <option value="265">265</option>
        <option value="266">266</option>
        <option value="270">270</option>
        <option value="273">273</option>
        <option value="274">274</option>
        <option value="279">279</option>
        <option value="283">283</option>
        <option value="286">286</option>
        <option value="287">287</option>
        <option value="298">298</option>
        <option value="301">301</option>
        <option value="303">303</option>
        <option value="314">314</option>
        <option value="318">318</option>
        <option value="325">325</option>
        <option value="326">326</option>
        <option value="328">328</option>
        <option value="329">329</option>
        <option value="332">332</option>
        <option value="335">335</option>
        <option value="338">338</option>
        <option value="348">348</option>
        <option value="358">358</option>
        <option value="365">365</option>
        <option value="372">372</option>
        <option value="374">374</option>
        <option value="387">387</option>
        <option value="388">388</option>
        <option value="391">391</option>
        <option value="401">401</option>
        <option value="405">405</option>
        <option value="415">415</option>
        <option value="424">424</option>
        <option value="427">427</option>
        <option value="429">429</option>
        <option value="430">430</option>
        <option value="431">431</option>
        <option value="435">435</option>
        <option value="440">440</option>
        <option value="442">442</option>
        <option value="446">446</option>
        <option value="447">447</option>
        <option value="449">449</option>
        <option value="453">453</option>
        <option value="456">456</option>
        <option value="462">462</option>
        <option value="463">463</option>
        <option value="466">466</option>
        <option value="481">481</option>
        <option value="484">484</option>
        <option value="486">486</option>
        <option value="488">488</option>
        <option value="490">490</option>
        <option value="491">491</option>
        <option value="493">493</option>
        <option value="501">501</option>
        <option value="502">502</option>
        <option value="506">506</option>
        <option value="507">507</option>
        <option value="508">508</option>
        <option value="509">509</option>
        <option value="510">510</option>
        <option value="511">511</option>
        <option value="512">512</option>
        <option value="513">513</option>
        <option value="514">514</option>
        <option value="515">515</option>
        <option value="516">516</option>
        <option value="518">518</option>
        <option value="519">519</option>
        <option value="520">520</option>
        <option value="521">521</option>
        <option value="522">522</option>
        <option value="523">523</option>
        <option value="524">524</option>
      </select>
      <label for="fleetOffice"> Fleet Office Held:</label>
      <input name="fleetOffice" type="text" id="fleetOffice" tabindex="34" size="20" maxlength="20"  />
      <label for="govBoardOffice"><br />
        Governing Board Position:</label>
      <input name="govBoardOffice" type="text" id="govBoardOffice" tabindex="35" size="20"  maxlength="20"  />
      <br />
      <br />
      <label for="note">Note to Class Office:</label>
      <textarea name="note" id="note" cols="45" rows="2" tabindex="36"></textarea>
    </div>
  </fieldset>
  <div id="donationHdr"><span class="hpnewsHlt"><strong><em>Support the ILCA - Make a Donation</em></strong></span><br />
    <span class="hpsubHeaders"><strong>The International Lightning Class is a 501(c) organization and all donations are tax deductible.</strong></span><br />
    Donations at the Supporting Membership level and higher will receive a Gold Circle, a special decal<br />
    which goes over your regular boat decal, to acknowledge your generous support of the ILCA.<br />
    <br />
  </div>
  <fieldset id="donationInfo">
    <legend class="donationlegend"> <span class="legend">You Can Make a Difference</span><br />
    </legend>
    <div id="fundBox">
      <div id="donationDescr">The ILCA Fund was established in 1982 as a way to ensure and enhance the long-term operations of our class. The ILCA Fund is directed by a committee of five ILCA members. </div>
      <div id="fund">
        <label for="ilcaFund">ILCA Fund:</label>
        <input name="ilcaFund" type="text" id="ilcaFund" tabindex="37" value="0.00" size="6" maxlength="8" />
      </div>
    </div>
    <div id="fundBox">
      <div id="donationDescr">The Helen and Jay Limbaugh Fund was established in 1999. Its purpose is to further an appreciation of the joys of Lightning sailing among Junior and Active Members of the International Lightning Class Association. </div>
      <div id="fund">
        <label for="limbFund"> Helen &amp; Jay Limbaugh Fund:</label>
        <!-- added class memberDonation to input for jquery cacl -->
        <input class="memberDonation" name="limbFund" type="text" id="limbFund" tabindex="38" value="0.00" size="6" maxlength="8" />
      </div>
    </div>
    <div id="fundBox">
      <div id="donationDescr">The Mary Huntsman Lightning History Fund   was formed in 2004. Its primary objective is to help recover Lightning   memorabilia and properly preserve Class heritage.</div>
      <div id="fund">
        <label for="huntFund"> Mary Huntsman Fund:</label>
        <input class="memberDonation" name="huntFund" type="text" id="huntFund" tabindex="39" value="0.00" size="6" maxlength="8" />
      </div>
    </div>
    <div id="fundBox">
      <div id="donationDescr">The Boat Grant Program is designed to fund   young sailors who want to experience the high level of competition offered by   the ILCA. The  goal is to expose more youth racers to the ILCA circuit.</div>
      <div id="fund">
        <label for="boatGrant"> Boat Grant Program:</label>
        <input class="memberDonation" name="boatGrant" type="text" id="boatGrant" tabindex="40" value="0.00" size="6" maxlength="8" />
      </div>
    </div>
  </fieldset>
</form>
</body>
</html>
  

Open in new window

We can submit the form via jquery ajax with code similar to below.  If your asp page can return some data such as "success" or error message and the total, we can capture that for the next person in the same session.
$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});

Open in new window

Put your asp code on a separate page and remove all html except return two div's.
<div id="total"><%=totalamount%></div> and <div id="message"><%=message%></div><div id="tracking_id"><%=tracking_id%></div> where totalamount is tracking a running total.  If the front end form submits $50 the first time, the total to return (assuming meets your server side validation) would be $50.  Then the $50 is captured back on the front end we can send a message "Verified form $50".  That can be part of the <%=message%>  The tracking_id would be something you want to return to the form so you can remember it on the 2nd trip.

Do you need help with the server side?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39795971
Remember when you run the page live to put the jquery portion between <script></script> tags in the head section or just above the closing body tag.
0
 

Author Comment

by:slegy
ID: 39797059
New development. Brief preramble...I was explaining my web development problems to friends over the weekend as an explanation of why I had to cancel social events - page good in Firefox and Chrome, not in IE. Same friend tried yesterday to book a Rick Steves tour, using IE11, and some of the functionality did not work. He called the company and they told him to put the browser in compatibility mode. He did, and it still didn't work, but he was able to do everything he needed in Chrome (sound familiar?). It seemed like a long shot, but I'd come across discussions of compatibility mode while searching for a solution, so decided to give it a try. Voila! The membership forms works perfectly!

Here is what I found:
Compatibility View was introduced in Internet Explorer 8 to help existing content continue to work with Internet Explorer 7, while developers updated their content to support modern interoperable web standards. Since then, the Internet Explorer web platform, and the web itself, have changed so that most public web content looks for standards-based features instead of Internet Explorer 7-compatible behavior.

Thanks to these changes, Internet Explorer 11’s latest standards mode is more compatible with the web than ever before. As a result, Internet Explorer 11 simplifies web page compatibility for users by removing the Compatibility View button and reducing the number of compatibility options in the F12 tools for developers.

There might be extenuating circumstances in your company, which require you to continue to use Compatibility View. In this situation, this process should be viewed strictly as a workaround. You should work with the website vendor to make sure that the affected pages are updated to match the latest web standards. The functionality described here is currently deprecated and will be removed at a time in the future.

So I guess that explains it. It must have been very recent that my system was updated to IE11. It will be a massive job to plow through all the code, but as Scott indicated, it will have to be reduced to the lowest common denominator and then built upon until I find out what IE doesn't like. Meanwhile, the membership process is moving ahead with no complaints so far.
0
 

Author Comment

by:slegy
ID: 39797655
Scott - have been reading through all your responses. Thank you so much. I can't get back to this for a day or two, but will follow all your suggestions.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39798190
I understand the compatibility view thing. I try and avoid all of that and just make it work.  Cathel gave me the idea for jquery and I think it will be the most cross browser as long as you stay in the version 1.1x.  Version 2 is virtually the same but without older ie support.

The form as it is in the last link simply has some cleaned up html (I commented on most everything I did) and I used jquery to program a total to show up at the top.  Now it is a matter of submitting the data.

Just let us know if you want to take this deeper.
0
 

Author Comment

by:slegy
ID: 39798257
Thank you so much. I'm overwhelmed at this point with trying to get some upgrades in. And I'd never seen an error like this before. It was my first (and only) website, and that code was written over 5 years ago, so it is no wonder that it is a little messy and outdated. Give me a day or so to see if I have a last question.
0
 

Author Closing Comment

by:slegy
ID: 39813830
You have been absolutely terrific and I thank you so much. Since I last posed here, I've run into a couple of website that don't work because of IE - most likely 11. I tried your suggestion for the meta tab (<meta http-equiv="X-UA-Compatible" content="IE=10" />) and all is working well for now. I'm up to my eyes in alligators trying to get major changes in, so am taking the easy route out for now. Your code is greatly appreciated, and I will make extensive use of it in the rewrite. Thank you again.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39813869
Glad it worked out slegy.  After the initial member drive when you are not hectic, it would be good to take that apart and put it back together.  

Glad it worked!
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now