CODEWITHSUNDEEP
javascripthtml
WillHaack
WillHaack

Reputation: 596

HTML Nested Form Problem

I'm making a web page using CGI scripting which has a form users need to fill out. The general layout is:

<form>
textfield (username)
textfield (password)
textfield (email)
submit button
</form>

What I would like to do is add a button that checks to see if the username they've entered is available. My problem is the way I'm trying to go about doing this is by writing:

<form>
<form>
textfield (username)
submit button
</form>
textfield (password)
textfield (email)
submit button
</form>

This doesn't work, the submit button instead submits the outer form. Here are the things I've considered trying but have not worked:

  1. Put a form at the end of the first form. Problem: I have no idea how to align the "validate" button next to the username text field button without making it float which causes a bunch of other issues with the page.

  2. Put values on the submit buttons and make the submit do different things based on which button was clicked. Problem: the web page that I want to make a "POST" request to is different based off which button is pressed. Seeing as I put the action="mypage.cgi" in the portion of the code, and not the button portion, I don't know how to make it go to different sites based on which button I press.

Upvotes: 2

Views: 1321

Answers (4)

Anupam
Anupam

Reputation: 41

The approach that I have used for nested forms is to use tag instead of tag, and then appending the form tags at the time of clicking submit buttons.

I have written a small JQ Plugin-'dynaForm' for the same, and its very easy to implement. Please refer to ==> http://anupampdhyy.wordpress.com/2014/09/29/dynaform/

and

you can also watch a demo for same at : https://www.youtube.com/watch?v=CFQia8EsoPQ&feature=youtu.be

I hope this helps you to implement nested forms in your HTML code. :)

Upvotes: 1

Andrey
Andrey

Reputation: 1818

First of all it is a good idea to give all forms names.
So you can easily distinguish between forms.

Next, attach onClick even to each button that would call a function with a different paramenter: 1,2,3. Each button would send its own parameter. In the function you just look at the paramenter and submit appropraite form.

<form name='form1'>
....
<button type="button" onClick=doIt(1);>Submit</button>
</form>

<form name='form2'>
....
<button type="button" onClick=doIt(2);>Submit</button>
</form>

<form name='form3'>
....
<button type="button" onClick=doIt(3);>Submit</button>
</form>

<script>
function doIt(formid)
{
   if(formid==1)
   {
      document.form1.submit();
   }
   if(formid==2)
   {
      document.form2.submit();
   }

...
}
</script>

Upvotes: 4

NorS
NorS

Reputation: 158

You probably need to make two different form actions, so that you don't submit two completly different values.

Upvotes: 0

Daniel A. White
Daniel A. White

Reputation: 190925

Have multiple submit buttons with different names. Check for each on the post back.

Upvotes: 3

Related Questions