1 Replies - 721 Views - Last Post: 21 October 2013 - 10:13 PM

#1 jakev383  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 41
  • Joined: 27-May 08

Help with multiple forms on a single page and submission

Posted 21 October 2013 - 07:24 PM

Hello all - I found some code on the interwebs that I'd like to utilize, but am unsure as to where to put the submit function in the form. I imagine I cannot have multiple submit entries to call different PHP backend scripts unless I am missing something.
So this code will allow the form to change depending on the option selected from the dropdown box:
<html>


<center>
<h2>Which type of template do you want?</h2>
<form>
<select id = "opts" onchange = "showForm()">
<option value = "0">Select Option</option>
<option value = "1">Form 1</option>
<option value = "2">Form 2</option>
<option value = "3">Form 3</option>
</select>

<div id = "f1" style="display:none">
<form name= "form1">
Content of Form 1
</form>
</div>

<div id = "f2" style="display:none">
<form name= "form2">
Content of Form 2
</form>
</div>

<div id = "f3" style="display:none">
<form name= "form3">
Content of Form 3
</form>
</div>

<script type = "text/javascript">
function showForm(){
var selopt = document.getElementById("opts").value;
if (selopt == 1) {
document.getElementById("f1").style.display="block";
document.getElementById("f2").style.display="none";
document.getElementById("f3").style.display="none";
}
if (selopt == 2) {
document.getElementById("f2").style.display="block";
document.getElementById("f1").style.display="none";
document.getElementById("f3").style.display="none";
}
if (selopt == 3) {
document.getElementById("f3").style.display="block";
document.getElementById("f2").style.display="none";
document.getElementById("f1").style.display="none";
}

}

</script>
</form>
</center>

</html>



Can I do something like this?

<div id = "f1" style="display:none">
<form name="form1" action="1.php" method="post">
<p><label for="ts">enter some stuff here: </label><br /><textarea id="ts" rows="10" cols="150"  name="ts"></textarea></p>
        <p><label for="logs">enter some log entries: </label><input id="logs" type="text" value="" name="logs" size="60"/></p>
<p><input class="submit" type="submit" name="submit" value="Submit Form" /></p>
</form>
</div>

<div id = "f2" style="display:none">
<form name= "form2" action="2.php" method="post">
<p><label for="ts">enter some stuff here: </label><br /><textarea id="ts" rows="10" cols="150"  name="ts"></textarea></p>
        <p><label for="logs">enter some log entries: </label><input id="logs" type="text" value="" name="logs" size="60"/></p>
<p><input class="submit" type="submit" name="submit" value="Submit Form" /></p>
</form>
</div>

<div id = "f3" style="display:none">
<form name= "form3" action="2.php" method="post">
<p><label for="new">tell me some new stuff: </label><br /><textarea id="new" rows="10" cols="150"  name="new"></textarea></p>
        <p><label for="logs">Some more log entries: </label><input id="logs" type="text" value="" name="logs" size="60"/></p>
<p><input class="submit" type="submit" name="submit" value="Submit Form" /></p>
</form>
</div>



If I need to submit the entire form to a single php script and process it in the backend, I'm okay with that, if that's the answer. I need to keep the ability to change the form displayed with the div tags however.
Can someone point me in the right direction and educate me on why the method I use above (with multiple submits) does not work as I was expecting it to?
Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Help with multiple forms on a single page and submission

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Help with multiple forms on a single page and submission

Posted 21 October 2013 - 10:13 PM

first two general problems
- code block 1: there are nested forms. thatís not only invalid HTML, it is a certain source for problems.
- code block 2: while valid from the HTML side, you can only submit in a form whatís between <form> and </form>, nothing that is outside of that.

if you need the whole page submitted (to different URLs) consider using AJAX. there you have much more control of where you can submit to. the disadvantage, if your browser does not support the FormData object, you need to collect the data manually.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1