php generated html needs simple javascript function, yet my javascriptsux

[mk]

Greetings all - im new to this newsgroup so pls dont flame me :p
I need some help! Please view the html below in a browser. Or goto this
url -http://firebrain.co.uk/java-problem.htm

(Assuming you have seen the rendered code)
Basically I need the X buttons to change all the values of each textbox
to zero either in the col or row depending on which button is clicked.

Function summery:
If you click on a X button on the right hand side of the table it resets
all the textboxes in that row. And if you click one of the X buttons
along the base of the table it will reset all the textfields in the column.

I hope the way I named my fields can be for>looped in javascript :)

If you have not seen the HTML in a browser yet please do so because im
sure there is a very easy solution to my problem.

Please please please - this is for a client and im running low on time
Any help would be much appreciated! Any questions just ask

Please reply to this message or (preferably) send me an email to
ja********@firebrain.co.uk

Thank you

--------------------------------------

<form name='availability'>
<p><table cellpadding=3>
<tr>
<td rowspan=2 valign=bottom id='greybg'><b>Dates</b></td>
<td colspan=5 id='purpbg'><b>Building One</b></td>
<td colspan=3 id='purp2bg'><b>Building Two</b></td>
</tr>

<tr>
<td id='purpbg' valign=top style='font-size:7pt;'>Studio Apartment</td>
<td id='purpbg' valign=top style='font-size:7pt;'>Executive Studio
Apartment</td>
<td id='purpbg' valign=top style='font-size:7pt;'>One Bedroom Apartment</td>
<td id='purpbg' valign=top style='font-size:7pt;'>Executive One Bedroom
Apartment</td>
<td id='purpbg' valign=top style='font-size:7pt;'>Two Bedroom Apartment</td>
<td id='purp2bg' valign=top style='font-size:7pt;'>One Bedroom
Apartment</td>
<td id='purp2bg' valign=top style='font-size:7pt;'>Two Bedroom
Apartment</td>
<td id='purp2bg' valign=top style='font-size:7pt;'>Executive Two Bedroom
Apartment</td>

<td id='greybg'><b>Close Out</b></td>
</tr>
<tr>
<td id='r2'><small><b>2006-07-27</b><br>Thursday 27th, July
2006</small></td>
<td id='r2' align=center>
<input name='slots[2006-07-27][1]' type='text' value='1' size=2>
</td>
<td id='r2' align=center>
<input name='slots[2006-07-27][2]' type='text' value='1' size=2>
</td>
<td id='r2' align=center>
<input name='slots[2006-07-27][3]' type='text' value='0' size=2>
</td>
<td id='r2' align=center>

<input name='slots[2006-07-27][4]' type='text' value='1' size=2>
</td>
<td id='r2' align=center>
<input name='slots[2006-07-27][5]' type='text' value='0' size=2>
</td>
<td id='r2' align=center>
<input name='slots[2006-07-27][6]' type='text' value='0' size=2>
</td>
<td id='r2' align=center>
<input name='slots[2006-07-27][7]' type='text' value='0' size=2>
</td>
<td id='r2' align=center>
<input name='slots[2006-07-27][8]' type='text' value='0' size=2>
</td>
<td id='r3' align=center>
<input name='close[2006-07-27]' type='button' value='X' size=2>
</td>

</tr>
<tr>
<td id='r1'><small><b>2006-07-28</b><br>Friday 28th, July 2006</small></td>
<td id='r1' align=center>
<input name='slots[2006-07-28][1]' type='text' value='1' size=2>
</td>
<td id='r1' align=center>
<input name='slots[2006-07-28][2]' type='text' value='1' size=2>
</td>
<td id='r1' align=center>
<input name='slots[2006-07-28][3]' type='text' value='1' size=2>
</td>
<td id='r1' align=center>
<input name='slots[2006-07-28][4]' type='text' value='0' size=2>
</td>

<td id='r1' align=center>
<input name='slots[2006-07-28][5]' type='text' value='1' size=2>
</td>
<td id='r1' align=center>
<input name='slots[2006-07-28][6]' type='text' value='0' size=2>
</td>
<td id='r1' align=center>
<input name='slots[2006-07-28][7]' type='text' value='0' size=2>
</td>
<td id='r1' align=center>
<input name='slots[2006-07-28][8]' type='text' value='0' size=2>
</td>
<td id='r3' align=center>
<input name='close[2006-07-28]' type='button' value='X' size=2>
</td>
</tr>
<tr>

<td id='r2'><small><b>2006-07-29</b><br>Saturday 29th, July
2006</small></td>
<td id='r2' align=center>
<input name='slots[2006-07-29][1]' type='text' value='1' size=2>
</td>
<td id='r2' align=center>
<input name='slots[2006-07-29][2]' type='text' value='1' size=2>
</td>
<td id='r2' align=center>
<input name='slots[2006-07-29][3]' type='text' value='0' size=2>
</td>
<td id='r2' align=center>
<input name='slots[2006-07-29][4]' type='text' value='0' size=2>
</td>
<td id='r2' align=center>
<input name='slots[2006-07-29][5]' type='text' value='0' size=2>

</td>
<td id='r2' align=center>
<input name='slots[2006-07-29][6]' type='text' value='0' size=2>
</td>
<td id='r2' align=center>
<input name='slots[2006-07-29][7]' type='text' value='0' size=2>
</td>
<td id='r2' align=center>
<input name='slots[2006-07-29][8]' type='text' value='0' size=2>
</td>
<td id='r3' align=center>
<input name='close[2006-07-29]' type='button' value='X' size=2>
</td>
</tr>
<tr>
<td id='r1'><small><b>2006-07-30</b><br>Sunday 30th, July 2006</small></td>

<td id='r1' align=center>
<input name='slots[2006-07-30][1]' type='text' value='1' size=2>
</td>
<td id='r1' align=center>
<input name='slots[2006-07-30][2]' type='text' value='0' size=2>
</td>
<td id='r1' align=center>
<input name='slots[2006-07-30][3]' type='text' value='0' size=2>
</td>
<td id='r1' align=center>
<input name='slots[2006-07-30][4]' type='text' value='0' size=2>
</td>
<td id='r1' align=center>
<input name='slots[2006-07-30][5]' type='text' value='0' size=2>
</td>
<td id='r1' align=center>
<input name='slots[2006-07-30][6]' type='text' value='0' size=2>

</td>
<td id='r1' align=center>
<input name='slots[2006-07-30][7]' type='text' value='0' size=2>
</td>
<td id='r1' align=center>
<input name='slots[2006-07-30][8]' type='text' value='0' size=2>
</td>
<td id='r3' align=center>
<input name='close[2006-07-30]' type='button' value='X' size=2>
</td>
</tr>
<tr>
<td id='greybg'><b>Close Out</b></td>
<td id='r3' align=center>
<input type='button' name='closeRange[0]' value='X'>
</td>

<td id='r3' align=center>
<input type='button' name='closeRange[1]' value='X'>
</td>
<td id='r3' align=center>
<input type='button' name='closeRange[2]' value='X'>
</td>
<td id='r3' align=center>
<input type='button' name='closeRange[3]' value='X'>
</td>
<td id='r3' align=center>
<input type='button' name='closeRange[4]' value='X'>
</td>
<td id='r3' align=center>
<input type='button' name='closeRange[5]' value='X'>
</td>
<td id='r3' align=center>
<input type='button' name='closeRange[6]' value='X'>

</td>
<td id='r3' align=center>
<input type='button' name='closeRange[7]' value='X'>
</td>
<td id='r3'>&nbsp;</td>
</tr>
<tr><td height=100 id='r1' valign=middle align=center colspan=10><input
type='submit' accesskey='s' name='apply_changes' value='Apply
Changes'></td></tr>
</table>
</form>

[Randy Webb]

mk said the following on 7/27/2006 4:46 PM:

Greetings all - im new to this newsgroup so pls dont flame me :p

It is not a person's newness to this group that gets them flamed, it is
the behavior and/or expectations of people that get them flamed.

I need some help! Please view the html below in a browser. Or goto this
url -http://firebrain.co.uk/java-problem.htm

It's not a Java-problem but ok.

(Assuming you have seen the rendered code)
Basically I need the X buttons to change all the values of each textbox
to zero either in the col or row depending on which button is clicked.

Ok, loop through the form, check for the indexOf your identifying string.

Function summery:
If you click on a X button on the right hand side of the table it resets
all the textboxes in that row. And if you click one of the X buttons
along the base of the table it will reset all the textfields in the column.

I hope the way I named my fields can be for>looped in javascript :)

All form elements can be for>looped, irrelevant of the names. Your
naming convention make it simpler, somewhat, but the naming convention
could be better. column1row1 and so on, so that the name tells you the
column and the row it is in.

If you have not seen the HTML in a browser yet please do so because im
sure there is a very easy solution to my problem.

There is, I gave it above. Search the archives on how to do it.

Please please please - this is for a client and im running low on time

Is your client going to pay me for writing the code for the project?

Any help would be much appreciated! Any questions just ask
Please reply to this message or (preferably) send me an email to
ja********@firebrain.co.uk

Don't ask, and definitely don't expect, an email reply. You ask in
Usenet, you get answered in Usenet.

P.S. You only need one function, not two, to do what you want to do.

Here is you a start:

function resetColOrRow(identifier,formRef){
totalElements = formRef.length;
for (i=0;i<totalElements;i++){
if (formRef.elements[i].name.indexOf(identifier) != -1)
formRef.elements[i].value = 0;
}
}

And call it as such:
resetColOrRow('[1]',this.form)
resetColOrRow('[2006-07-29]',this.form)

Where the first parameter to the function call is the unique part of the
element name you want to match.

It can be made more efficient, I just don't feel like it right now. It
should be tested as well.

There is a bug in that code, related to your HTML as much as to my code,
I will leave that as an exercise for you to discover.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[RobG]

mk wrote:

Greetings all - im new to this newsgroup so pls dont flame me :p
I need some help! Please view the html below in a browser. Or goto this
url -http://firebrain.co.uk/java-problem.htm

(Assuming you have seen the rendered code)
Basically I need the X buttons to change all the values of each textbox
to zero either in the col or row depending on which button is clicked.

Function summery:
If you click on a X button on the right hand side of the table it resets
all the textboxes in that row. And if you click one of the X buttons
along the base of the table it will reset all the textfields in the column.

I hope the way I named my fields can be for>looped in javascript :)

If you have not seen the HTML in a browser yet please do so because im
sure there is a very easy solution to my problem.

Randy gave you one algorithm, another is if the button is in the last
cell of a row, clear the row - otherwise clear the column. Very simple
logic that is dependent on your table structure rather than names/ids.

The implementation would be marginally easier if colgroup or col
elements had a nodeList of the TD elements that belonged to them ...
but no such luck.

--
Rob

[mk]

RobG wrote:

mk wrote:

>>Greetings all - im new to this newsgroup so pls dont flame me :p
I need some help! Please view the html below in a browser. Or goto this
url -http://firebrain.co.uk/java-problem.htm

(Assuming you have seen the rendered code)
Basically I need the X buttons to change all the values of each textbox
to zero either in the col or row depending on which button is clicked.

Function summery:
If you click on a X button on the right hand side of the table it resets
all the textboxes in that row. And if you click one of the X buttons
along the base of the table it will reset all the textfields in the column.

I hope the way I named my fields can be for>looped in javascript :)

If you have not seen the HTML in a browser yet please do so because im
sure there is a very easy solution to my problem.

Randy gave you one algorithm, another is if the button is in the last
cell of a row, clear the row - otherwise clear the column. Very simple
logic that is dependent on your table structure rather than names/ids.

The implementation would be marginally easier if colgroup or col
elements had a nodeList of the TD elements that belonged to them ...
but no such luck.

thanks :)

[mk]

Randy Webb wrote:

mk said the following on 7/27/2006 4:46 PM:

>Greetings all - im new to this newsgroup so pls dont flame me :p

It is not a person's newness to this group that gets them flamed, it is
the behavior and/or expectations of people that get them flamed.

>I need some help! Please view the html below in a browser. Or goto
this url -http://firebrain.co.uk/java-problem.htm

It's not a Java-problem but ok.

>(Assuming you have seen the rendered code)
Basically I need the X buttons to change all the values of each
textbox to zero either in the col or row depending on which button is
clicked.

Ok, loop through the form, check for the indexOf your identifying string.

>Function summery:
If you click on a X button on the right hand side of the table it
resets all the textboxes in that row. And if you click one of the X
buttons along the base of the table it will reset all the textfields
in the column.

I hope the way I named my fields can be for>looped in javascript :)

All form elements can be for>looped, irrelevant of the names. Your
naming convention make it simpler, somewhat, but the naming convention
could be better. column1row1 and so on, so that the name tells you the
column and the row it is in.

>If you have not seen the HTML in a browser yet please do so because im
sure there is a very easy solution to my problem.

There is, I gave it above. Search the archives on how to do it.

>Please please please - this is for a client and im running low on time

Is your client going to pay me for writing the code for the project?

>Any help would be much appreciated! Any questions just ask
Please reply to this message or (preferably) send me an email to
ja********@firebrain.co.uk

Don't ask, and definitely don't expect, an email reply. You ask in
Usenet, you get answered in Usenet.

P.S. You only need one function, not two, to do what you want to do.

Here is you a start:

function resetColOrRow(identifier,formRef){
totalElements = formRef.length;
for (i=0;i<totalElements;i++){
if (formRef.elements[i].name.indexOf(identifier) != -1)
formRef.elements[i].value = 0;
}
}

And call it as such:
resetColOrRow('[1]',this.form)
resetColOrRow('[2006-07-29]',this.form)

Where the first parameter to the function call is the unique part of the
element name you want to match.

It can be made more efficient, I just don't feel like it right now. It
should be tested as well.

There is a bug in that code, related to your HTML as much as to my code,
I will leave that as an exercise for you to discover.

Thank you

[mk]

Randy Webb wrote:

mk said the following on 7/27/2006 4:46 PM:

>Greetings all - im new to this newsgroup so pls dont flame me :p

It is not a person's newness to this group that gets them flamed, it is
the behavior and/or expectations of people that get them flamed.

>I need some help! Please view the html below in a browser. Or goto
this url -http://firebrain.co.uk/java-problem.htm

It's not a Java-problem but ok.

>(Assuming you have seen the rendered code)
Basically I need the X buttons to change all the values of each
textbox to zero either in the col or row depending on which button is
clicked.

Ok, loop through the form, check for the indexOf your identifying string.

>Function summery:
If you click on a X button on the right hand side of the table it
resets all the textboxes in that row. And if you click one of the X
buttons along the base of the table it will reset all the textfields
in the column.

I hope the way I named my fields can be for>looped in javascript :)

All form elements can be for>looped, irrelevant of the names. Your
naming convention make it simpler, somewhat, but the naming convention
could be better. column1row1 and so on, so that the name tells you the
column and the row it is in.

>If you have not seen the HTML in a browser yet please do so because im
sure there is a very easy solution to my problem.

There is, I gave it above. Search the archives on how to do it.

>Please please please - this is for a client and im running low on time

Is your client going to pay me for writing the code for the project?

>Any help would be much appreciated! Any questions just ask
Please reply to this message or (preferably) send me an email to
ja********@firebrain.co.uk

Don't ask, and definitely don't expect, an email reply. You ask in
Usenet, you get answered in Usenet.

P.S. You only need one function, not two, to do what you want to do.

Here is you a start:

function resetColOrRow(identifier,formRef){
totalElements = formRef.length;
for (i=0;i<totalElements;i++){
if (formRef.elements[i].name.indexOf(identifier) != -1)
formRef.elements[i].value = 0;
}
}

And call it as such:
resetColOrRow('[1]',this.form)
resetColOrRow('[2006-07-29]',this.form)

Where the first parameter to the function call is the unique part of the
element name you want to match.

It can be made more efficient, I just don't feel like it right now. It
should be tested as well.

There is a bug in that code, related to your HTML as much as to my code,
I will leave that as an exercise for you to discover.

excellent "starter" function - it turned out to do the entire job very
nicely indeed :) you were correct about the html bug(s) - i found there
were 2 - first was the fact i gave the buttons a name in the same format
as the textboxes (therefore the button would change to 0 also lol) and
secondly my naming convention for the bottom row of buttons changed the
col values to the left (i.e. -1) of the reference

everything fixed now and working perfectly here is the final code if
anyone is interested:

<script language="JavaScript">
function resetColOrRow(identifier,formRef){
totalElements = formRef.length;
newVal=prompt("Please enter new value for entire row/col","0");
if(!newVal.match(/^\d+$/)){
alert("Was not a number");
}else if(newVal.length>2){
alert("Number was too long");
}else{
for (i=0;i<totalElements;i++){
if (formRef.elements[i].name.indexOf(identifier) != -1)
formRef.elements[i].value = newVal;
}
}
}
</script>

Thanks again :)