SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    calculate a form field using fieldsets

    I created a form today using JavaScript that calculated the number of attendees by 25 - which works fine. but the form looked awful, so i read Cameron Adams "Fancy Form design" which was great but once i made the form look nice the calculation didnt work anymore here is my code. any advice would really be great.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script language="JavaScript"><!--
    function calculateCost(what,ObjCost) {
    var i,
    answer=0,
    answerCost=0;
    for (i=0;what.elements[i];i++) {
    if (what.elements[i].type.toLowerCase() == "text") {
    answerCost += (Number(what.elements[i].value)) * ObjCost;
    answer += Number(what.elements[i].value);
    }
    }
    answerCost.toFixed(2);
    what.answer.value = answer;
    what.answerCost.value = answerCost;
    document.getElementById('total').innerHTML = answer;
    document.getElementById('totalCost').innerHTML = answerCost;
    }
    window.onload = function () {
    calculateCost(document.getElementById('Form2'),25.00);
    }
    //--></script>
    <style type="text/css">
    <!--
    label {
    float:left;
    width:10em;
    margin-right:1em;
    text-align:right;
    font-family: #6E6B98;
    }
    fieldset {
    margin: 1.5em 0 0 0;
    padding: 0;
    }
    fieldset li {
    float:left;
    clear:left;
    padding-bottom: 1em;
    }
    legend {
    margin-left: 1em;
    color: #09034D;
    font-weight: bold;
    font-family:Georgia, "Times New Roman", Times, serif;
    }
    fieldset ol {
    padding: .2em 1em 0 1em;
    list-style: none;
    }
    fieldset li {
    padding-bottom: .5em;
    }
    fieldset.submit {
    float: none;
    width:auto;
    border: 0 none #ffffff;
    padding-left:
    }
    .style1 {
    font-weight: bold;
    font-family: Tahoma;
    color: #09034D;
    font-size: 12px;
    }
    .style2 {
    font-weight: bold;
    font-family: Tahoma;
    color: #09034D;
    font-size: 16px;
    }
    .bodyfont {
    font-family: Tahoma;
    color: #09034D;
    font-size: 12px;
    }
    -->
    </style>

    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style3 {color: #FF0000}
    -->
    </style>
    </head>
    <body>

    <tr>
    <td height="134" colspan="5" valign="top"> <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr>
    <td><form ID="Form2" name="Form2" method="post" action="thankyou.php" >
    <label for="attending">Are you Attending?</label>
    <select name="attending" tabindex="0">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
    </select>
    <input type="hidden" name="answer" ID="Text13">
    <input type="hidden" name="answerCost" ID="Text13">
    <label>Number of Attendees</label>
    <input type="text" id="1" name="Checbox7" onBlur="calculateCost(this.form,25.00)"><br>
    Total Attendees: <span class="style1" id="total" name="total"> </span>
    total Cost: $<span class="style1" id="totalCost" name="total"> </span>
    <fieldset>

    <legend>Member Information </legend>
    <ol>
    <li>
    <label for="name">Member Name/label>
    <input id="name1" name="name1" class="text" type="text" />
    </li>
    <li>
    <label for="company1">Company Name/label>
    <input id="company1" name="company1" class="text" type="text" />
    </li>
    <li>
    <label for="email">Email address/label>
    <input id="email" name="email" class="text" type="text" />
    </li>
    </ol>
    </fieldset>
    <fieldset class="submit">
    <input class="submit" type="submit"
    value="Submit" />
    </fieldset>
    </form></td>
    </tr>
    </table> </tr>

    <tr>
    <td height="1"></td>
    <td width="149"></td>
    <td width="101"></td>
    <td></td>
    <td></td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The closing tags for the label elements aren't properly closed off.
    The tables are all screwed up. You're not allowed forms inside tables anyway, so remove all of the table, tr and td elements.

    Those are the biggest problems.

    Other things you may want to take care of with the html are:
    • The html element should be <html xmlns="http://www.w3.org/1999/xhtml">
    • The character encoding should be included. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    • The language attribute is no longer used. Use type="text/javascript" instead.
    • Attribute names should be in lowercase. This means id, and onblur
    • You have multiple identically named id attributes. id="Text13" That's a big no-no because they are unique identifiers
    • id="1" is not a valid identifier. They can't begin with a number
    • Self-closing elements like input need to be properly closed with a space plus foward-slash. <input attribute="value" /> and <br />
    • The span element doesn't have a name attribute, that's only for form elements.
    • The for attribute in the label elements refer to non-existing identifiers.
    Last edited by paul_wilkins; Dec 13, 2007 at 00:14.

  3. #3
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i tried all of this and still the same result. the one that works is http://www.snecg.org/Untitled-19.php the one that needs to work is
    http://www.snecg.org/Untitled-18.php

    Any more suggestions?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    That was only the html I was commenting on before.

    The major problem is the test, which walks through looking at the type of every form element.

    Some form elements have no type, such as the fieldset, so you need to verify if there is a valid type before checking anything else on it.

    Code JavaScript:
    if (what.elements[i].type && what.elements[i].type.toLowerCase() == "text") {

    If I have time I'll go in to ways to improve the script

  5. #5
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i will try this Thank you so much.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The script really is making a mountain out of a molehill though.

    Why does it search through all form fields for the text entry one? Because you're wanting to run it onload as well from the element itself. Then you can't really use this to reference the form element anymore.
    The way one normally gets around that is to pass a unique id instead.

    Like this, using appropriate identifiers of course:

    Code JavaScript:
    function calculateCost(id, cost) {
    var elAttendees = document.getElementById(id);
    var elTotalAttendees = document.getElementById('total');
    var elTotalCost = document.getElementById('totalCost');
    var totalAttendees = Number(elAttendees.value) + Number(elTotalAttendees.firstChild.nodeValue);
    var totalCost = (totalAttendees * cost).toFixed(2);
    elTotalAttendees.replaceChild(document.createTextNode(totalAttendees), elTotalAttendees.firstChild);
    elTotalCost.replaceChild(document.createTextNode(totalCost), elTotalCost.firstChild);
    }
    window.onload = function () {
    	calculateCost('attendees',25.00);
    }

    and further down

    Code HTML4Strict:
    <input type="text" id="attendees" name="Checkbox7" onblur="calculateCost(this.id, 25.00)" />

  7. #7
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the feedback. This is the first time I do anything like this, and I guess I got in over my head, because it still doesnt work.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The test version worked fine, so it must be something that's happening on our end.

    Please post the code that you're using, and if you post asp code then also please provide some sample variables

  9. #9
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code would be much more readable if you put it in [HIGHLIGHT="HTML4Strict"][/HIGHLIGHT] tags.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •