CodingForums.com - form problems ...

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - form problems ... (http://www.codingforums.com/showthread.php?t=253788)

form problems ...

I have this form I am trying to get right but I am very stuck! I have looked this up all over the Internet and the answers conflict too much, I need your expertise please. My HTML is:

Code:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

   <title>GPS-ware Order Form</title>

   <link href="gps.css" rel="stylesheet" type="text/css" />

   <script type="text/javascript" src="form.js"></script>

</head>

<body>

<form id="orders" method="post" action="done.htm">

   <div id="links">

      <a href="#" class="newgroup">Home Page</a>

      <a href="#">Product Catalog</a>

      <a href="#">Order Form</a>

      <a href="#">Maps Online</a>

      <a href="#">Contact Us</a>

      <a href="#" class="newgroup">Countries</a>

      <a href="#">States</a>

      <a href="#">National Parks</a>

      <a href="#">Hiking Trails</a>

      <a href="#">Cities</a>

      <a href="#">Astronomical</a>

      <a href="#">Natural</a>

      <a href="#" class="newgroup">GoMap 1.0</a>

      <a href="#">Drive Planner 2.0</a>

      <a href="#">Hiker 1.0</a>

      <a href="#">G-Receiver I</a>

      <a href="#">G-Receiver II</a>

      <a href="#">G-Receiver III</a>

      <a href="#" class="newgroup">Downloads</a>

      <a href="#">Tech Support</a>

      <a href="#">FAQs</a>

   </div>

   <div id="main">

      <p id="logo"><img src="gpsware.jpg" alt="GPS-ware" /></p>

      <h1>Order Form</h1>

      <p id="datep">

         <input class="text" id="date" name="date" size="11" value="mm-dd-yyyy"

          tabindex="-1" readonly="readonly" />

      </p>

   <fieldset>

      <legend>Enter the quantity of each item and press the Tab key</legend>

      <table cellspacing="2">

         <tr><th class="label">Product</th><th>Price</th>

             <th>Quantity</th><th>Cost</th></tr>

         <tr>

             <td class="label">GoMap 1.0</td>

             <td><input name="price1" id="price1" size="8" value="19.95" 

                 tabindex="-1" readonly="readonly" />

             </td>

             <td><input name="qty1" id="qty1" size="8" value="0" />

             </td>

             <td><input name="cost1" id="cost1" size="12" value="0.00"

              tabindex="-1" readonly="readonly" />

             </td>

         </tr>

         <tr>

             <td class="label">Drive Planner 2.0</td>

             <td><input name="price2" id="price2" size="8" value="29.95"

              tabindex="-1" readonly="readonly" />

             </td>

             <td><input name="qty2" id="qty2" size="8" value="0" />

             </td>

             <td><input name="cost2" id="cost2" size="12" value="0.00" 

              tabindex="-1" readonly="readonly" />

             </td>

         </tr>

         <tr>

             <td class="label">Hiker 1.0</td>

             <td><input name="price3" id="price3" size="8" value="29.95" 

              tabindex="-1" readonly="readonly" /></td>

             <td><input name="qty3" id="qty3" size="8" value="0" />

             </td>

             <td><input name="cost3" id="cost3" size="12" value="0.00" 

              tabindex="-1" readonly="readonly" />

             </td>

         </tr>

         <tr>

             <td class="label">G-Receiver I</td>

             <td><input name="price4" id="price4" size="8" value="149.50" 

              tabindex="-1" readonly="readonly" /></td>

             <td><input name="qty4" id="qty4" size="8" value="0" />

             </td>

             <td><input name="cost4" id="cost4" size="12" value="0.00" 

              tabindex="-1" readonly="readonly" />

             </td>

         </tr>

         <tr>

            <td class="label">G-Receiver II</td>

            <td><input name="price5" id="price5" size="8" value="199.50" 

              tabindex="-1" readonly="readonly" /></td>

            <td><input name="qty5" id="qty5" size="8" value="0" />

            </td>

            <td><input name="cost5" id="cost5" size="12" value="0.00" 

              tabindex="-1" readonly="readonly" />

            </td>

         </tr>

         <tr>

            <td class="label">G-Receiver III</td>

            <td><input name="price6" id="price6" size="8" value="249.50" 

              tabindex="-1" readonly="readonly" /></td>

            <td><input name="qty6" id="qty6" size="8" value="0" />

            </td>

            <td><input name="cost6" id="cost6" size="12" value="0.00" 

              tabindex="-1" readonly="readonly" />

            </td>

         </tr>

         <tr><td class="col4" colspan="4">&nbsp;</td></tr>

         <tr>

            <td class="col3" colspan="3">Sales Tax (5%)</td>

            <td><input name="tax" id="tax" size="12" value="0.00"

              tabindex="-1" readonly="readonly" />

            </td>

         </tr>

         <tr>

            <td class="col3" colspan="3">

                <select id="shipping" name="shipping">

                <option value="0">Choose a shipping option</option>

                <option value="4.95">Standard (4-6 business days) $4.95</option>

                <option value="8.95">Express (2 days) $8.95</option>

                <option value="12.95">Next Day (1 day) $12.95</option>

                </select>

            </td>

            <td><input name="shipcost" id="shipcost" value="0.00" size="12" 

              tabindex="-1" readonly="readonly" />

            </td>

         </tr>

         <tr>

            <td class="col3" colspan="3">TOTAL</td>

            <td><input name="total" id="total" size="12" value="0.00" 

              tabindex="-1" readonly="readonly" />

            </td>

         </tr>

      </table>

      </fieldset>

      <p id="pbuttons">

         <input type="reset" value="Reset" />

         <input type="submit" value="Submit Order" />

      </p>

   </div>

   </form>

</body>

</html>

and here's the js ...

I accidentally posted that before I was done making it readable. The javascript that I have figured out so far, follows:

Code:

Functions List:



   todayTxt()

      Returns the current date in the format mm-dd-yyyy



   initForm()

      Sets up and initializes the Web form.



   productCosts()

      Returns the total product costs



   shipExpense()

      Stores the value of the selected shipping option



   calcTotal()

      Calculates the total cost of the order



   calcShipping()

      Calculates the total cost of shipping and updates the

      total cost of the order



   calcCost()

      Calculates the cost of each order and updates the total

      cost



   validateForm()

      Validates the form prior to submission



   resetForm()

      Resets the Web form and Web page





*/

window.onload = initForm;



function todayTxt() {

   var Today = new Date();

   return Today.getMonth()+1+"-"+Today.getDate()+"-"+Today.getFullYear();

}



function initForm() {



   document.order.date.value = todayTxt();

   document.order.qty1.focus();

   document.order.qty1.select();



}

I really am trying to figure this out, but, I need help from someone better versed in this crazy language to guide me some please!!! I also know I haven't gotten very far yet because I don't know what do to. :confused:

Pulling out hair!
Janice

Sounds like homework! What are the problems? We are not clairvoyant. Have you tried using your error console? What error messages do you receive? Or are you saying that you want someone to write your Javascript code for you?

I would NEVER ask that!

:eek: I have an error saying document.order is undefined, I was just making screen-shots to explain to you all where I am stuck so I can figure it out and go on. I was trying to figure out how they want the document.order defined. I am not sure what wording to use. :confused:

I know I am just getting started w/ this one, I am trying to fix each problem as I come to them instead of jumping over some to fix others.

document.orders is undefined because you have assigned the id orders to your form, not the name orders.

A form field is addressed as document.formname.elementname.value; or
document.forms[0].elementname.value;

There is not much point in assigning ids to form fields as only fields with a name can be passed to the server when the form is submitted.

Screen shots are of little use if you want us to run your code to diagnose errors. Post the actual (relevant) code (within code tags, please).

thought I had posted code above ??

This is the HTML:

Code:

<?xml version="1.0" encoding="UTF-8" ?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

   <title>GPS-ware Order Form</title>

   <link href="gps.css" rel="stylesheet" type="text/css" />

   <script type="text/javascript" src="form.js"></script>

</head>



<body>

<form id="orders" method="post" action="done.htm">



   <div id="links">

      <a href="#" class="newgroup">Home Page</a>

      <a href="#">Product Catalog</a>

      <a href="#">Order Form</a>

      <a href="#">Maps Online</a>

      <a href="#">Contact Us</a>

      <a href="#" class="newgroup">Countries</a>

      <a href="#">States</a>

      <a href="#">National Parks</a>

      <a href="#">Hiking Trails</a>

      <a href="#">Cities</a>

      <a href="#">Astronomical</a>

      <a href="#">Natural</a>

      <a href="#" class="newgroup">GoMap 1.0</a>

      <a href="#">Drive Planner 2.0</a>

      <a href="#">Hiker 1.0</a>

      <a href="#">G-Receiver I</a>

      <a href="#">G-Receiver II</a>

      <a href="#">G-Receiver III</a>

      <a href="#" class="newgroup">Downloads</a>

      <a href="#">Tech Support</a>

      <a href="#">FAQs</a>

   </div>



   <div id="main">

      <p id="logo"><img src="gpsware.jpg" alt="GPS-ware" /></p>

      <h1>Order Form</h1>

      <p id="datep">

         <input class="text" id="date" name="date" size="11" value="mm-dd-yyyy"

          tabindex="-1" readonly="readonly" />

      </p>



   <fieldset>

      <legend>Enter the quantity of each item and press the Tab key</legend>

      <table cellspacing="2">

         <tr><th class="label">Product</th><th>Price</th>

             <th>Quantity</th><th>Cost</th></tr>

         <tr>

             <td class="label">GoMap 1.0</td>

             <td><input name="price1" id="price1" size="8" value="19.95"

                 tabindex="-1" readonly="readonly" />

             </td>

             <td><input name="qty1" id="qty1" size="8" value="0" />

             </td>

             <td><input name="cost1" id="cost1" size="12" value="0.00"

              tabindex="-1" readonly="readonly" />

             </td>

         </tr>

         <tr>

             <td class="label">Drive Planner 2.0</td>

             <td><input name="price2" id="price2" size="8" value="29.95"

              tabindex="-1" readonly="readonly" />

             </td>

             <td><input name="qty2" id="qty2" size="8" value="0" />

             </td>

             <td><input name="cost2" id="cost2" size="12" value="0.00" 

              tabindex="-1" readonly="readonly" />

             </td>

         </tr>

         <tr>

             <td class="label">Hiker 1.0</td>

             <td><input name="price3" id="price3" size="8" value="29.95" 

              tabindex="-1" readonly="readonly" /></td>

             <td><input name="qty3" id="qty3" size="8" value="0" />

             </td>

             <td><input name="cost3" id="cost3" size="12" value="0.00" 

              tabindex="-1" readonly="readonly" />

             </td>

         </tr>

         <tr>

             <td class="label">G-Receiver I</td>

             <td><input name="price4" id="price4" size="8" value="149.50" 

              tabindex="-1" readonly="readonly" /></td>

             <td><input name="qty4" id="qty4" size="8" value="0" />

             </td>

             <td><input name="cost4" id="cost4" size="12" value="0.00"

              tabindex="-1" readonly="readonly" />

             </td>

         </tr>

         <tr>

            <td class="label">G-Receiver II</td>

            <td><input name="price5" id="price5" size="8" value="199.50"

              tabindex="-1" readonly="readonly" /></td>

            <td><input name="qty5" id="qty5" size="8" value="0" />

            </td>

            <td><input name="cost5" id="cost5" size="12" value="0.00" 

              tabindex="-1" readonly="readonly" />

            </td>

         </tr>

         <tr>

            <td class="label">G-Receiver III</td>

            <td><input name="price6" id="price6" size="8" value="249.50" 

              tabindex="-1" readonly="readonly" /></td>

            <td><input name="qty6" id="qty6" size="8" value="0" />

            </td>

            <td><input name="cost6" id="cost6" size="12" value="0.00" 

              tabindex="-1" readonly="readonly" />

            </td>

         </tr>

         <tr><td class="col4" colspan="4">&nbsp;</td></tr>

         <tr>

            <td class="col3" colspan="3">Sales Tax (5%)</td>

            <td><input name="tax" id="tax" size="12" value="0.00"

              tabindex="-1" readonly="readonly" />

            </td>

         </tr>

         <tr>

            <td class="col3" colspan="3">

                <select id="shipping" name="shipping">

                <option value="0">Choose a shipping option</option>

                <option value="4.95">Standard (4-6 business days) $4.95</option>

                <option value="8.95">Express (2 days) $8.95</option>

                <option value="12.95">Next Day (1 day) $12.95</option>

                </select>

            </td>

            <td><input name="shipcost" id="shipcost" value="0.00" size="12" 

              tabindex="-1" readonly="readonly" />

            </td>

         </tr>

         <tr>

            <td class="col3" colspan="3">TOTAL</td>

            <td><input name="total" id="total" size="12" value="0.00" 

              tabindex="-1" readonly="readonly" />

            </td>

         </tr>

      </table>

      </fieldset>

  

      <p id="pbuttons">

         <input type="reset" value="Reset" />

         <input type="submit" value="Submit Order" />

      </p>



   </div>



   </form>



</body>

</html>

and this is the javascript that I haven't figured out correctly yet:

Code:

   Functions List:



   todayTxt()

      Returns the current date in the format mm-dd-yyyy



   initForm()

      Sets up and initializes the Web form.



   productCosts()

      Returns the total product costs



   shipExpense()

      Stores the value of the selected shipping option



   calcTotal()

      Calculates the total cost of the order



   calcShipping()

      Calculates the total cost of shipping and updates the

      total cost of the order



   calcCost()

      Calculates the cost of each order and updates the total

      cost



   validateForm()

      Validates the form prior to submission



   resetForm()

      Resets the Web form and Web page





*/

window.onload = initForm;



function todayTxt() {

   var Today = new Date();

   return Today.getMonth()+1+"-"+Today.getDate()+"-"+Today.getFullYear();

}

//var document orders = initForm();



var document;//orders = function todayTxt() {

//console.log(Today); }



function initForm() {

   document.orders.date.value = todayTxt();

   document.orders.qty1.focus();

   document.orders.qty1.select();

}

here's the CSS, this was pre-written for me, I don't like the way they run it all together, but, here it is:

Code:

body {background-image: url(border.jpg); background-position:left;

      background-repeat: repeat-y; margin-top:0; padding-top:0}



#links {position: absolute; top: 5px; left: 0px; width: 90px;  

        font-family:Arial, Helvetica, sans-serif; font-size:8pt}



#links a {color:black; text-decoration:none; display: block; margin-left: 10px}

#links a.newgroup {margin-top: 10px}

#links a:hover {color:blue; background-color: white}



#main {position: absolute; top: 5px; left: 120px; width: 530px}

#logo {border-bottom: 2px solid rgb(222,179,126); margin-bottom: 0px}

#main h1 {font-family: Arial, Helvetica, sans-serif; letter-spacing: 7;

          margin-top: 0px; margin-bottom: 0px}

#datep {text-align: right; color: brown; font-size: 8pt; margin: 0px;

        font-family: Arial, Helvetica, sans-serif}

#datep input {text-align: center}



table {width: 520px; font-size: 9pt; margin: 5px}

th {font-family: Arial, Helvetica, sans-serif; text-align: right; padding: 3px;

    background-color: rgb(228,197,166); letter-spacing: 3; font-weight: normal}

th.label {text-align: left}

td {font-size:9pt; font-family: Arial, Helvetica, sans-serif;  

    text-align: right}

.label {text-align: left}

td.col3 {text-align: right; color: brown}

td.col4 {border-bottom: 1px solid rgb(102,102,102)}



legend {font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: brown}

input {text-align: right; font-size: 9pt}

select {font-size: 9pt}

#total {background-color: ivory}





#pbuttons {text-align: center; margin-top: 5px}

#pbuttons input {margin: 0px 10px; background-color: rgb(228,197,166);

                 letter-spacing: 2; width: 120px; text-align: center}

I do not see any Javascript in your post - just HTML, and a list of the Javascript functions which you have not written.

I now see you are using XHTML - the name attribute of form is in fact now deprecated, so you should use
document.forms[0].elementname.value;

Quite a few of your questions could be answered by using the search feature of the forum. For example, only the other day at
http://www.codingforums.com/showthread.php?t=253698
I posted a script to return the current date in the format mm-dd-yyyy (or whatever you require).

If you are not asking for people to write your code for you, please explain what you are asking for.

That part was pre-assigned. I am trying to figure out how to word it to define the "document.orders" part so Firebug will let me go on to the next part.

Quote:

Originally Posted by Philip M (Post 1202852)

I spent an hour reading posts and searching here before asking. None of them were about this part. :(

Quote:

Originally Posted by Philip M (Post 1202848)

In the HTML that was provided for me, the name and id are there, *scratching head in puzzlement*

Code:

<input name="price1" id="price1" size="8" value="19.95"

                 tabindex="-1" readonly="readonly" />

Quote:

Originally Posted by jdpaul (Post 1202858)

In the HTML that was provided for me, the name and id are there, *scratching head in puzzlement*

Code:

<input name="price1" id="price1" size="8" value="19.95"

                 tabindex="-1" readonly="readonly" />

Well, as I say, there is little point in assigning an id to a form field (although it does not hurt so long as you have assigned a name as well).

If you are saying that the HTML is not your work but was provided for you (as was the css), then what part of this is your work?

document.orders will not work because the browser is looking for a form with the name orders.

People here are very willing to help you correct/improve the scripts you have written, but are less keen to do the whole thing for you.

Quote:

Originally Posted by Philip M (Post 1202852)

I am trying to understand how to write the code to define the part that was provided .. and get rid of the errors so my pages work correctly. I have looked at stuff all over the net. I need someone to help me understand what is being asked for in the Firebug error and then I hope to continue to learn and finish this particular piece. STill :confused:

Code:

window.onload = initForm;



function todayTxt() {

   var Today = new Date();

   return Today.getMonth()+1+"-"+Today.getDate()+"-"+Today.getFullYear();

}

//var document orders = initForm(); this didn't work :(



var document;//orders = function todayTxt() {

//console.log(Today); } nor this! :P



function initForm() {

   document.orders.date.value = todayTxt();

   document.orders.qty1.focus();

   document.orders.qty1.select();

}

Quote:

Originally Posted by Philip M (Post 1202861)

I have to do the JavaScript. I am just not sure how to do this part. I have learned a bunch of XHTML and CSS as you can see in the Index. Janice's JavaScript I am a 52 yr. old twice over cancer survivor working on a new career. I am NOT one of the kids coming here to leech off of your knowledge, I promise!