Top form in a list doesn't work Options

[DeaPeaJay]

Ok, this is really weird.

http://wcso.exit42design.com/test/test/classSchedule/

I have a table generated with PHP and a button called "Show Attendees" for each row. The weird thing is that the top form button doesn't work, but all the ones underneath it do.

<tr>
<td>
<input type='checkbox' name='ClassID0921' />
</td>
<td>ClassID092</td>
<td class='TRAFFIC'>TRAFFIC</td>
<td>09/21/2006</td>
<td class='alternate'>6:00PM</td>
<td class='number'>25</td>
<td class='alternate'><form action='http://wcso.exit42design.com/test/test/classSchedule/ClassID092/' method='post'>
<div>
<input type='submit' name='SAClassID092' value='Show Attendees' />
</div>
</form></td>
</tr><tr>
<td>
<input type='checkbox' name='ClassID1022' />
</td>
<td>ClassID102</td>
<td class='HANDGUN'>HANDGUN</td>
<td>10/22/2006</td>
<td class='alternate'>6:00PM</td>
<td class='number'>25</td>
<td class='alternate'><form action='http://wcso.exit42design.com/test/test/classSchedule/ClassID102/' method='post'>
<div>
<input type='submit' name='SAClassID102' value='Show Attendees' />
</div>
</form></td>
</tr>

So basically, the top form there doesn't work, and the ones below it do. As you can tell, I'm hiding the variable that the form is actually submitting in the action (in red). All I need is that URL to be entered in the browser, and I need an actual button to do it. Maybe there's a a better way to do this. If you can help, thanks! =)

[DeaPeaJay]

Ok, I've been debugging and I've determind that my problem is in nested forms. This is what I have essentially.

CODE

                
<form method="post">

    With selected:
    <input type="submit" name="formAction" value="Delete" />
    <input type="submit" name="formAction" value="Edit" />
    <input type="submit" name="formAction" value="Add" />
    

    <input type='checkbox' name='ClassID0921' />
        
        <form action='http://wcso.exit42design.com/test/test/classSchedule/ClassID092/' method='post'>
            <input type='submit' name='SAClassID092' value='Show Attendees' />
        </form>
        
    <input type='checkbox' name='ClassID1022' />
        
        <form action='http://wcso.exit42design.com/test/test/classSchedule/ClassID102/' method='post'>
            <input type='submit' name='SAClassID102' value='Show Attendees' />
        </form>
        
    <input type='checkbox' name='ClassID1203' />
        
        <form action='http://wcso.exit42design.com/test/test/classSchedule/ClassID120/' method='post'>
            <input type='submit' name='SAClassID120' value='Show Attendees' />
        </form>
        
    <input type='checkbox' name='ClassID1104' />
    
        <form action='http://wcso.exit42design.com/test/test/classSchedule/ClassID110/' method='post'>
            <input type='submit' name='SAClassID110' value='Show Attendees' />
        </form>

</form>            

http://wcso.exit42design.com/test.html You can see it there, not working.

So, can you simply not nest forms?

[DeaPeaJay]

Ok, I don't like what the W3C has to say about nested forms

http://www.w3.org/MarkUp/html3/forms.html

But I've decided that they're wrong, and that they do work in all browsers, including IE6 if I'm not mistaken. You just need a "</form>" tag somewhere in between the nested forms in order for them to work =D

This is an outright shameless hack, but I'm out of options here.

http://wcso.exit42design.com/test2.html (this one has the hack that makes them work)

This post has been edited by DeaPeaJay: Oct 20 2006, 04:42 PM

[pandy]

Why do you want to nest them?

[Darin McGrew]

Okay, I'm confused. If you put a </form> tag between nested forms, then they aren't really nested any longer, are they?

No, you can't nest forms. But see also the FAQ entries Can I have two or more Submit buttons in the same form? and Can I have two or more actions in the same form?

[DeaPeaJay]

Technically, they're not nested anymore, at least that's what the browser thinks. I've decided to do it like this

CODE

<form method="post" action ="bla">
      <form>
      </form>

      <form method="post" action="bla2">
      </form>

      <form method="post" action="bla3">
      </form>

</form>

The problem with having the server side deciding which action to perform is that I'm generating a dynamic table with an unknown amount of rows, and a "show details" button that is essentially acting as a link. Basically it's a link that looks like a form button. I had it set up as a link before, but my team wanted me to change it to look like a form button, so that it would look more consistent with *another* submit button below it.

It's hard to explain, but you can see it all on that first link I gave. http://wcso.exit42design.com/test/test/classSchedule/
just click "Show attendees" on the *first* row, and then 'Show Details' after that.

[DeaPeaJay]

GAH, I've discovered my hack doesn't work. It disables the outer form. Ok, I'll admit defeat and just tell my team to deal with the text links.

[Darin McGrew]

CSS can be used to style the text links however you want them, although if they look like submit buttons, then users will expect them to behave like submit buttons. And if submit buttons look like links, then users will expect them to behave like links.