Help - Search - Members - Calendar
Full Version: Top form in a list doesn't work
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
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.

QUOTE

<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)
pandy
Why do you want to nest them? blink.gif
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. unsure.gif
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.