Form Undefined 2

[Mugs321]

Hey all,
I'm creating forms (one for each record) dynamically using asp. The forms are named and id'd as "attemptForm_{attemptID}".

My problem is that the first records (always the first and only the first) returns an error when I try to submit it.

If I use document.attemptForm_123.submit() the browser says that "document.attemptForm_123 is null or not an object".

If I use getElementById('attemptForm_123').submit() it says "Object doesn't support this property or method".

Below is the is the html, as it appears in the source, for the first (doesn't work) and second (works perfect) forms:

(sorry if it's ugly)

<form id="attemptForm_12859" name="attemptForm_12859" action="javascript:doPopup2('../Engraph/scr_mark_exam_e.asp?', 800, 600, 1);" style='margin:0px;'> 

<input type=hidden name=attemptID value=12859>
<input type=hidden name=loginID value=161>

<tr style='font-weight: bold; background-color:#EFE7DC;'>
<td valign=top nowrap style='padding: 2px 15px; '>555-A458-IA-54</td>
<td valign=top nowrap style='padding: 2px 15px; '>Blow, Joe</td>
<td valign=top align=center nowrap style='padding: 2px 15px; '>e</td>
<td valign=top nowrap style='padding: 2px 15px; '>10-Sept-2007</td>
<td valign=top align=center nowrap style='padding: 2px 15px; '>N/A</td>
<td valign=top align=center nowrap style='padding: 2px 15px; '>N/A</td>
<td valign=top align=center nowrap style='padding: 2px 5px; '>
<a href='#'>
<img alt='Mark' src='../../../images/ok_16x16.gif' onClick="document.attemptForm_12859.submit();">
</a>
</td>
<td valign=top align=center nowrap style='padding: 2px 5px; '>
<a href='#'>
<img alt='View' src='../../../images/view_16x16.gif'>
</a>
</td>
<td valign=top align=center nowrap style='padding: 2px 5px; '>
<a href='#'>
<img alt='Print' src='../../../images/print_16x16.gif' disabled>
</a>
</td>
<td valign=top align=center nowrap style='padding: 2px 5px; '>
<a href='#'>
<img alt='Delete' src='../../../images/delete_16x16.gif'>
</a>
</td>
</tr>
</form>

<form id="attemptForm_12873" name="attemptForm_12873" action="javascript:doPopup2('../Engraph/scr_mark_exam_e.asp?', 800, 600, 1);" style='margin:0px;'> 

<input type=hidden name=attemptID value=12873>
<input type=hidden name=loginID value=161>

<tr style='font-weight: bold; background-color:#EBE1D3;'>
<td valign=top nowrap style='padding: 2px 15px; '>555-A458-IA-54</td>
<td valign=top nowrap style='padding: 2px 15px; '>Blow, Joe</td>
<td valign=top align=center nowrap style='padding: 2px 15px; '>e</td>
<td valign=top nowrap style='padding: 2px 15px; '>18-Sept-2007</td>
<td valign=top align=center nowrap style='padding: 2px 15px; '>N/A</td>
<td valign=top align=center nowrap style='padding: 2px 15px; '>N/A</td>
<td valign=top align=center nowrap style='padding: 2px 5px; '>
<a href='#'>
<img alt='Mark' src='../../../images/ok_16x16.gif' onClick="document.attemptForm_12873.submit();">
</a>
</td>
<td valign=top align=center nowrap style='padding: 2px 5px; '>
<a href='#'>
<img alt='View' src='../../../images/view_16x16.gif'>
</a>
</td>
<td valign=top align=center nowrap style='padding: 2px 5px; '>
<a href='#'>
<img alt='Print' src='../../../images/print_16x16.gif' disabled>
</a>
</td>
<td valign=top align=center nowrap style='padding: 2px 5px; '>
<a href='#'>
<img alt='Delete' src='../../../images/delete_16x16.gif'>
</a>
</td>
</tr>
</form>

 

[cLFlaVA]

Are you using [tt]document.getElementById('...')[/tt] or just [tt]getElementById('...')[/tt]? Only the former will work properly.

Do you definitely have all unique IDs?



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Mugs321]

I was using document.getElementById('...') as you've said, however I just tested without document. and the same problem arises. First one produces an error, second+ work fine.

Yes, all IDs are from an identity column in my table. Completely unique.

As a footnote, the two examples I provided were from an exam which only had two attempts. Those two forms are the only attemptForm_# forms on the page.

 

[cLFlaVA]

does your document validate?



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[j4606]

Maybe its your action tag. Action specifies a target. You should probobly try calling a javascript onlick and moving the script out of the action tag.

 

[Mugs321]

cLFlaVA:
There is no validation. The hidden elements are the sole elements in the form (I did it this way so I didn't have to pass any info thru the QueryString)

j4606:
I've already tried removing the javascript call from my action parameter... same problem, #1 doesn't work, #2+ is fine.

 

[cLFlaVA]

Mugs,

"There is no validation" makes no sense.

Validate your entire HTML document utilizing the link I provided above. One of the reasons your code is not working is because you have mal-formed HTML, improperly nested tags, etc. We can't be much help if you only provide tidbits of "sample" information that may or may not be valid markup.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Mugs321]

Sorry c,
When you said validate, I thought you were askin if there was any javascript validation being run.

The validator has some complaints. Most are for javascript, 'nowrap' and ' '. There aren't any for mal-formed HTML.

Running a couple of tests revealed the following:

alert(document.getElementById('attemptForm_123').name)
=
attemptForm_123
---
alert(document.getElementById('attemptForm_123').id)
=
attemptForm_123
---
alert(document.getElementById('attemptForm_123').noteName)
=
FORM
---
alert(typeof(document.getElementById('attemptForm_123'))
=
[object]

 

[tsuji]

If it only failed for the first form, I would have no doubt the name of the form is actually not attemptForm_12859. Generate the onclick with this.
[tt]
<a href='#'>
<img alt='Mark' src='../../../images/ok_16x16.gif' onClick="alert(escape(document.forms[0].name));">
</a>
[/tt]
Look at the display and compare with what you expect (attemptForm_12859). I think there might be a surprise.

 

[cLFlaVA]

there must be tons of other errors. no tags should lie between a <table> and <tr> tag, for example (except the <col> and <colgroup> variety).

try opening and closing your tags outside the table element, which would mean creating a table for each form.

also, you have an anchor tag with a # as a href, and then inside that you have an image with an onclick event. this is most certainly confusing for browsers, as a # will bring you to the top of the screen.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Mugs321]

tsuji:
While the name of my form was as it should have been, your code did help. I slightly modified your debug solution to read alert(document.forms.length);

It showed me that I was short by one form (obviously the first attempt record) which set me well on my way to solving the problem.

cLFlaVA:
The only problem with "opening and closing your tags outside the table element" is that the entire page is a table with multiple nested tables. Placing the form outside any tables would be impossible. Unless, of course, I misunderstood you.

In regards to the href="#", I'm guessing you're suggesting I remove the anchor and add something like style="cursor: pointer;" to the img tag to mimic a link?

All:
The solution was found by moving my form element from just inside the <table> tag to inside of the <td> tag. Everything works dandy now.

Huge thanks to all who helped with the troubleshooting!!

 

[Mugs321]

Oops, just re-read your last post cLFlaVA.... You were bang on.

 

[cLFlaVA]

yes. definitely don't use anchor tags just to achieve the effect of a "pointer" cursor. that's what CSS is all about.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]