Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 9309
  • Last Modified:

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

thanks in advance
0
GiantMatrix
Asked:
GiantMatrix
  • 2
  • 2
  • 2
  • +1
2 Solutions
 
PhilHowCommented:
Is invalid.  You no can nest form tag.  You write valid code you no have so much problem.
0
 
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>
     {$MEMBERSITES}        
</select>

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
0
 
bubbledragonCommented:
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="">
</form>

<select name="memsites" id="memsites" onChange="dropdown1.memsites.value = this.value; dropdown1.submit();">
<option value="">(Select One)</option>
     {$MEMBERSITES}        
</select>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

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");
    if(theSelect.options[theSelect.selectedIndex].value!=-1)
    {
          var temp=theSelect.options[theSelect.selectedIndex].value.split("-----");
          document.getElementById("fieldA").value=temp[0];
          document.getElementById("fieldB").value=temp[1];
          document.getElementById("fieldC").value=temp[2];
     }
}
</script>

...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();
while(results.next())
{%>
      <option value="<%=results.getString("fieldA")+"-----"+results.getString("fieldB")+"-----"+results.getString("fieldC")%>"><%=results.getString("alpha_name")%></option>
<%}results.close();%>
</select>

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

Cheers,

Jesse
0
 
bubbledragonCommented:
This will post all data within Main Form. You can reassign the data after execute dropdown menu page.

<SCRIPT>
function f_dummy(dataForm, actionForm) {
      actionForm.innerHTML = dataForm.innerHTML;
      actionForm.submit();      
}
</SCRIPT>

<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>
     {$MEMBERSITES}        
</select>
</form>
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now