Form inside form question

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 can someone please tell me what I am missing here?

thanks in advance
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Is invalid.  You no can nest form tag.  You write valid code you no have so much problem.
GiantMatrixAuthor Commented:
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>
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Uhhh, ultimatly you should consider NOT posting your form every time each of the dropdowns change, interested?
GiantMatrixAuthor Commented:
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 :)



Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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>
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.