We help IT Professionals succeed at work.

Form inside form question

GiantMatrix asked
Medium Priority
Last Modified: 2008-01-09
Hi All,

I have a big form which contains 2 smaller forms. This big form is used to post data to database using PHP while the other smaller forms are used to refresh page when drop down menus are changed.

Now whenever I add the 2 smaller forms inside my main form, the main form design look so strange as if all cells are mixed up....so can someone please tell me what I am missing here?

thanks in advance
Watch Question

Is invalid.  You no can nest form tag.  You write valid code you no have so much problem.


Hi PhilHow,

Ok please consider this case and tell me what your opinion is/ what I shall do:

What if I have for example 2 drop down menus inside the main form and I need that based on the visitor selection of the first drop down menu that I go and search database for some records and fill the second drop down menu.

So I guess the least I would do is the following code for the first drop down menu:

<select name="memsites" id="memsites" onChange="form1.submit();">
<option value="">(Select One)</option>

But here i will have a problem which is I won't be able to differentiate between when the main form is being posted and when this drop down menu onchange event fire.

So do you have any suggestions, how I can differentiate between when the visitor change the drop down select and when the main form is posted?

P.S. I am using this form with PHP and MySQL
You can create a form with hidden fields outside the main form for handling. View the form name is dropdown1, then search the database.

<form name="dropdown1" action=".." method="post">
<input type="hidden" name="memsites" value="">

<select name="memsites" id="memsites" onChange="dropdown1.memsites.value = this.value; dropdown1.submit();">
<option value="">(Select One)</option>

Uhhh, ultimatly you should consider NOT posting your form every time each of the dropdowns change, interested?


Hi jessegivy,

I am interested in anything that can allow me to:

Based on the visitor selection of the first drop down menu, I go and search database for some records and fill the second drop down menu WITHOUT loosing the other form data.

So can this be done?

Thanks in advance for your help

What you want to do is query the database at the bottom of your page, after the closing </html> tag, collect ALL the records with one fail swoop, and store said records in a multidimensional javascript array.

Or if you prefer, a simpler version would be to use a delimiter in the value property of the select element and query for everything when you create the dynamic select box for which you want to maintain the data.  

The multidimensional javascript array is cleaner, but can be a serious headache depending on what kind of relationships you've got going on so I'll show the value attribute idea here, if you'd like the other one let me know (no promises;).

The following script goes in the head section of your jsp/html file:
<script type="text/javascript">
function alphabetChanged()
    var theSelect=document.getElementById("alphabet");
          var temp=theSelect.options[theSelect.selectedIndex].value.split("-----");

...then somewhere in your html (jsp):
<input type="text" id="fieldA">
<input type="text" id="fieldB">
<input type="text" id="fieldC">
<select id="alphabet" onChanged="alphabetChanged()">
   <option value="-1"></option>
<%results=conn.prepareStatement("SELECT alpha_name,fieldA,fieldB,fieldC FROM great_table").executeQuery();
      <option value="<%=results.getString("fieldA")+"-----"+results.getString("fieldB")+"-----"+results.getString("fieldC")%>"><%=results.getString("alpha_name")%></option>

...sorry, no time to test, I do this all day and all night, so it should work for ya.  Hope you get the idea :)



Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
This will post all data within Main Form. You can reassign the data after execute dropdown menu page.

function f_dummy(dataForm, actionForm) {
      actionForm.innerHTML = dataForm.innerHTML;

<form name="dropdown1" action="getDropMenu2" method="post"></form>

<form name="form1" action="SavedData" method="post">
<input type="textbox" name="text1">
<input type="textbox" name="text2">
<select name="memsites" id="memsites" onChange="f_dummy(this.form, document.getElementById('dropdown1'))">
<option value="">(Select One)</option>
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.