Forms within forms?

[Mitthrawnuruodo]

I have a client who wants me to make a few corrections - some large some small - on their website. One of the small jobs, or so I thought, was to clean up a combined registration/login page, which now has two forms, the login form above the registration form.

Now, the client has made a very specific direction on how he wants the page (which is built up with a table layout, which I'm hesitant to touch at this point), very much like this:

---------------------
| Registration form |
| ...               |
|         ----------|
|         | login  ||
|         | form   ||
|         | ...    ||
|         ----------|
| o lorem ipsum     |
---------------------

But, since there's a couple of check boxes from the registration form at the bottom of the page, I then have to nest the login form within the registration form, and - as far as I know - that will not work as intended, and the test I've done seem to confirm this...

So, questions (if answer is 'no', move on to next question ):

- Is there a way to make "nested" forms, at all?

- Any bright ideas on (simple) workarounds?

- Any ideas on workarounds, possible involving divs instead of the (outer) table?

- Or is the best way just to move the frelling login form or check-boxes?

This conundrum is forcing me to get a third cup of coffee this morning, and I usually stop at two, even after an allnighter...

 

[dcv]

Off the top of my head... use iframes?? It's been a while since I've coded anything like that but if I think of anything useful I'll let you know!

 

[elppa]

Can't do forms in forms, won't work.

I know the page is built with tables, but my first thought would be this:

You could probably do something with an absolutely positioned div inside a relatively position div.

<div style="position:relative;">

    <div style="position:absolute; top, left etc...">
        <form id="form1">
        </form>
    </div>

    <form id="form2">
    </form>

</div>

Obviously the style won't be inline, I've just done it like that for this example.

I think you know far more about CSS than me (from reading other posts) so apologies if this next bit sounds condescending! Basically the inner div will take it's top / left co-ordinates from the position of the outer div.

The problem is you have to make sure the outer div will be taller than the inner div.

 

[tschoftner]

Hi there!
i am not sure whether this will work; but you could try and make the one more important form in a php-file and include the login-form from another php-file with "include ()" or "require_once";
just a thought though!
rulez!!

 

[elppa]

Hi there!
i am not sure whether this will work; but you could try and make the one more important form in a php-file and include the login-form from another php-file with "include ()" or "require_once";
just a thought though!
rulez!!

It would work, but it wouldn't solve this problem because you'd still have nested <form> tags.

 

[Winterfell]

The only way I can see this working is by using CSS like elppa suggested.

Just have the larger form (container form) on the page, and then use a floating div to position the smaller form within it. This way the form elements are not truly nested, but will give the appearance of being so.