need help using javascript for the first time 1

cdunavent · Aug 26, 2005

Hi guys:

This is my first attempt to add javascript to a webpage. The page I
have created is located at

http://www.frontiernet.net/~cdunavent/.

What
I would like to do is add up the points that players have selected (you
can see what I am talking about on the page...in the cell, I made a
note of where the total should be) as they make their selections. For
example, if a player chooses 3 points for the first game, the 7 points
for the scond game, I would like the "TOTAL" cell to automatically
display "10" Can someone help me out with this? I am totally new to
this!!

Thanks!!!

-cd

Lrnmore · Aug 26, 2005

cd,

You can run through your fields by checking the name, if the field name contains "pts" then add it to a "running" total.

Like:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title></title>
<script type="text/javascript">
function doTotal(form){
var totalBox = form.elements['sum'];
var totalPts = 0;
    for(var j = 0; j < form.elements.length; j++){
    var field = form.elements[j];
        if(field.name.indexOf("pts") > -1 && (parseInt(field.value, 10))){
        totalPts += parseInt(field.value, 10);
        }
    }
totalBox.value = totalPts;    
}
</script>  
</head>
<body>
<table border="1">
    <tr>
      <td><form name="mnf">b</td>
      <td> Chicago at Washington </td>
      <td><select name="b-pick" id="b-pick"><option value="Chicago">Chicago</option><option value="Washington">Washington</option><option selected="selected">Make Pick</option></select></td>
      <td><select name="b-pts" id="b-pts" onchange="doTotal(this.form)"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option selected="selected">.</option></select></td>

    </tr>
    <tr>
      <td>c</td>
      <td> Cincinnati at Cleveland </td>
      <td><select name="c-pick" id="c-pick"><option value="Cincinnati">Cincinnati</option><option value="Cleveland">Cleveland</option><option selected="selected">Make Pick</option></select></td>
      <td><select name="c-pts" id="c-pts" onchange="doTotal(this.form)"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option selected="selected">.</option></select></td>

    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>
      <p align="right"><b>TOTAL:</b></p></td>
      <td>
      <p align="right"><input type="text" name="sum" size="4"></form></p></td>
    </tr>


 </table>
</body>
</html>

Shout back it you have any questions, lots of helpful folks here.

P.S. Your "html" page structure needs a good tweaking.

You don't want to have more than one of these in any "page".

Code:

<html>
  <head>
  </head>
  <body>
  </body>
</html>

Thanks,
--Mark

cdunavent · Aug 27, 2005

You nailed it, Mark. Exactly what I was looking for. Any chance I can add some sort of error control, so that if the person does not have a total of 136, it notifies them????

-cd

cdunavent · Aug 27, 2005

Might be easier to see what I mean (about the total of 136) if you look at the updated page at

http://www.frontiernet.net/~cdunavent/

Thanks,

-cd

Lrnmore · Aug 27, 2005

Make a couple of adjustments here(to the above test page)..

This is our new "script":

Code:

<script type="text/javascript">
var allBoxes;

function doTotal(form){
allBoxes = 0;
var totalBox = form.elements['sum'];
var totalPts = 0;
    for(var j = 0; j < form.elements.length; j++){
    var field = form.elements[j];
        if(field.name.indexOf("pts") > -1 && (parseInt(field.value, 10))){
        allBoxes++;
        totalPts += parseInt(field.value, 10);
        }
    }
totalBox.value = totalPts;    
}
function ckForm(){
 /* the 2 on the following line is what you'll adjust(136) */
         if(allBoxes == 2) { 
         alert("You have selected all (" + allBoxes + ") of the boxes.");
         return true;
         }
         else {
         alert("Hurry up and finish already,\n"+
         "Somebody else wants to use the page.");
         return false;
         }
}
</script>

Add an "onsubmit" check to your opening form tag:

Code:

<form name="mnf" onsubmit="return ckForm()">

Add this row to the bottom of our table:

Code:

    <tr>
    <td colspan="4"><input type="submit"></form></td>
    </tr>

Notice that the "closing" </form> tag needs relocating.

Thanks,
--Mark

Lrnmore · Aug 27, 2005

Don't forget to move your original closing "</form>" tag...

Your submit button won't work...

Thanks,
--Mark

cdunavent · Aug 27, 2005

I moved the </form>, but submit button still does not work????

-cd

Lrnmore · Aug 27, 2005

Look right around here:

Code:

     <p align="right"><b>TOTAL (<font color="#FF0000">should equal 136</font>):</b></p></td>
      <td height="22">
      <p align="right"><input name="sum" size="4" style="float: left"></form></p></td>

That closing form tag is messing you up.

Thanks,
--Mark

Lrnmore · Aug 27, 2005

Sorry, I was focused on our changes...

But your problems start here:

Code:

<form action="[URL unfurl="true"]http://www.hform.com/handler.cgi?10283044"[/URL] method="POST">
  </form> *1
  </p>
<table border="1" height="695">

<tr>
      <td height="19"><form name="mnf"> *2 <b>Game</b></td>

Code:

      <td height="22">
      <p align="right"><input name="sum" size="4" style="float: left"></form> *4 </p></td>

*1)Closed your real form.
*2)Used the opening form tag from our test page.
3)To validate your form you'll need to add that "onsubmit" handler.
*4)That closing form tag needs the axe.

Here's a good tutorial on HTML forms.

http://webdesign.about.com/cs/forms/a/aaformstut1.htm

Thanks,
--Mark

cdunavent · Aug 27, 2005

I think I got it. Seems to be working great!!!! I owe ya one, Mark.

Now...since you seem to be on top of things, let me run this past you to see if it is doable:

Imagine all of the numbers at the top from 1 to 16 ...
1 2 3 4 5 6 ... etc. Could you make them change color when selected. For example, say they all start out red and turn green as you make picks. When done, if all are green, you know there are no errors.

-cd

Lrnmore · Aug 27, 2005

Ahh, the list grows...

BTW, nice that you've indented your source code.

Sure you can do that.

Add an ID to each table row and an "argument" to our "doTotal".

Code:

<tr id="a">
      <td height="22">a</td>
      <td align="left" height="22"> Chicago at Washington </td>
      <td height="22"><select name="a-pick" id="a-pick">
          <option value="Chicago">Chicago</option>
          <option value="Washington">Washington</option>

          <option selected="selected">Make Pick</option>
      </select></td>
      <td height="22"><select name="a-pts" id="a-pts" onchange="doTotal(this.form, 'a')">

Add a style class in your style definitions:

Code:

.picked { background: #D6DEE4; }

Our new doTotal looks like:

Code:

function doTotal(form, row_id){
allBoxes = 0;
var totalBox = form.elements['sum'];
var totalPts = 0;
    for(var j = 0; j < form.elements.length; j++){
    var field = form.elements[j];
        if(field.name.indexOf("pts") > -1 && (parseInt(field.value, 10))){
        allBoxes++;
        totalPts += parseInt(field.value, 10);
        }
    }
totalBox.value = totalPts;
document.getElementById(row_id).className = 'picked';    
}

I think that'll do, let us know if it doesn't work right.

Thanks,
--Mark

cdunavent · Aug 27, 2005

OK...I'm gonna try this. Only thing that I am not sure about is where (exactly) does .picked { background: #D6DEE4; } go? Where are the "style definitions"???

-cd

Lrnmore · Aug 27, 2005

You have a style set in your document but I see you're not using it.

This link will help alot:
Style Elements

Remove the current style set and put this in your page right after your "title" tag set.

Your page will look like this:

Code:

  <title>2005 Regular Season Pool with Suicide </title>
<style type="text/css">
.picked { background: #D6DEE4; }
</style>

Thanks,
--Mark

cdunavent · Aug 28, 2005

OK..I followed your directions. The latest code can be seen here

http://www.frontiernet.net/~cdunavent/index2.html

I am getting a javascript error that is basically complaining about line 21, row_id is not defined.

-cd

Lrnmore · Aug 28, 2005

Here's a little present with all the changes made.

http://www.geocities.com/lrnmoretktps/tktps.txt

Thanks,
--Mark

cdunavent · Aug 29, 2005

Thanks, Mark!!!!

-cd

Lrnmore · Aug 29, 2005

You're Welcome.

Glad it was helpful.

-Mark

cdunavent · Sep 3, 2005

Mark...only problem I see with this is that if someone makes a mistake with their picks, and decides to hit the reset button at the bottom, the reset only clears the fields where they have made their picks. It does not reset the original color of the fields back to white.

?????

-cd

Lrnmore · Sep 3, 2005

Form's have an "onreset" event handler.

Add this to your opening form tag:

Code:

onreset="initForm()"

And this function:

Code:

function initForm(){
var trows = document.getElementsByTagName('tr');
allBoxes = 0;
         for(var j = 0; j < trows.length; j++){
         (trows[j].className == 'picked')? trows[j].className = '' : '';
         }
}

HTML Reference:
Forms

I've uploaded the page with the changes in case you get stuck.

I've put together some links that I've found helpful here.

Thanks,
--Mark

cdunavent · Sep 3, 2005

Dude...you are totally "The Man".

-cd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

need help using javascript for the first time 1

IS-IT--Management

Technical User

IS-IT--Management

IS-IT--Management

Technical User

Technical User

IS-IT--Management

Technical User

Technical User

IS-IT--Management

Technical User

IS-IT--Management

Technical User

IS-IT--Management

Technical User

IS-IT--Management

Technical User

IS-IT--Management

Technical User

IS-IT--Management

Similar threads

Log in

Part and Inventory Search

Sponsor