embedded forms

Raj_IN
Raj_IN used Ask the Experts™
on
Hi experts,

I have a form structure like this:

<form name=one method=post action="my.cfm">
   <input type=text name=a>
  <input type=text name=b>

          <form name=two>
                  <input type=text name=c>
                  <input type=text name=d>
                   <input type=submit onClick="open.window()">
            </form>
    <input type=submit name=click value=click>        
</form>

One form is embedded into the other. When I click the last "click" button, I expect to "post" the values of "a" and "b" to "my.cfm", but much to my discomfort, it does nothing. I can't change the structure of the above forms. Please let me know if there is a way to solve the above

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2004

Commented:
Hi,

The problem here is that you can't nest forms in html, because the 2nd </form> tag will be assumed to belong to the first form. You will need to combine these forms somehow. I can't suggest a code resolution, because I don't know the parameters that require you to have nested forms...
Top Expert 2004

Commented:
Probably something like changing the Ist "submit" button to a "regular" button with an onclick event that calls a js function to pass the form parameters...
Top Expert 2013
Commented:
It does not work becaue it is not valid code.  Do it this way:

<form name=one method=post action="my.cfm">
   <input type=text name=a>
 <input type=text name=b>
<input type="hidden" name="c">
<input type=hidden" name="d">
         <input type=submit name=click value=click
   onClick="this.form.c.value=document.form['two].c.value; this.form.d.value=document.forms['two].d.value; return false;">        
</form>

<form name=two>
                 <input type=text name=c>
                 <input type=text name=d>
                  <input type=submit onClick="open.window()">
</form>
   

Cd&
Top Expert 2004

Commented:
That's interesting, though I assumed that "can't change the structure of the above forms" means that they had to remain embedded - which clearly won't function . Splitting up the forms into 2 separate "non-nested" forms opens up a lot of possibilities, including your example Cd&. I'm hoping that we can get some more background as to why these forms are nested in the first place, and then perhaps work on an alternative. Failing that, and assuming that the asker can break up the forms - then your solution is as good as any that we could come up with...
I don't know if they realize that my 2nd comment was meant to imply that form #2 gets removed completely, and replaced with some other possibility.

Author

Commented:
Thanks COBOL, your answer gave me the direction to look for the solution and I found one using 'onChange' event handler of JavaScript. CSS Layers is one possible solution, but the above seemed a better solution. I kept the last submit button in a separate form tag, and included hidden fields for "a" and "b". Whenever the fields in "a" and "b" are entered, the event handler writes the same value in the hidden fields below. Its a round about way, but serves the purpose.

Thanks again

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial