Question

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.

Answer 1

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>