send the values of two boxes

[dotJoon]

<form action='action.cfm'>

<input type='submit' value='twoBoxes'>

<form></form> / delimiter

<form action='action.cfm'>
<input type='text' name='box1' value=''>
<input type='submit'>
</form>

<form action='action.cfm'>
<input type='text' name='box2' value=''>
<input type='submit'>
</form>
</form>

I like to make the code above functions like the follow.

(1) If a user enters his comment in box1 and submit box1 button, it goes to action page with the value of box1.

(2) If a user enters his comment in box2 and submit box2 button, it goes to action page with the value of box2.

(3) If a user enters his comment in box1 and box2, and He submits two boxes button, it goes to action page with the value of box1 and the value of box2.




The code above works fine in functioning of (1) and (2), but it doens't work fine in functioning of (3).

In function of (3), the code above goes to action pages WITHOUT the value of box1 and the value of box2.


How can I make it funnctioning (1), (2) and (3) in a same page?

[Mittineague]

I haven't looked at ColdFusion since 4.0 a few years ago. But I have never seen nested form tags before. Perhaps you could have 1 form and go to various action pages depending on what inputs have been used. i.e.
not empty

[AutisticCuckoo]

Forms must not contain other forms, directly or indirectly. What you have is invalid HTML and what browsers choose to do with it is anybody's guess.

I recommend that you always validate your markup before you start any form of trouble-shooting. It can save a lot of time and headache.

[paul_wilkins]

It is possible to get the desired technique to work, by copying the second form values into hidden variables in the first form.

<form id="box1" method="get" action='action.cfm'>
<input type='text' name='box1' value=''>
<input type='submit'>
</form>
 
<form id="box2" action='action.cfm'>
<input type='text' name='box2' value=''>
<input type='submit'>
</form>

This script adds a button and a hidden field, and tells the second form to copy its field over to the hidden one.

It's a first draft, so is ripe for plenty of refactoring.

var form = document.getElementById('box1');
var hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'box2';
form.appendChild(hiddenInput);
var button = document.createElement('input');
button.type = 'button';
button.value = 'twoBoxes';
button.onclick = function () {
	var form = document.getElementById('box1');
    form.submit();
}
form.parentNode.insertBefore(button, form);
var form2 = document.getElementById('box2');
form2.elements.box2.onchange = function () {
	var form = document.getElementById('box1');
	form.elements.box2.value = this.value;
}

[C. Ankerstjerne]

That implies javascript to be activated, or the form will fail.

Here's what I would do (in PHP, change to your language of choice). Code is not tested:

<form id="form" method="get" action="action.php">
  <fieldset>
    <legend>Boxes</legend>
    <label>
      Box 1
      <input type="text" name="box_1">
    </label>
    <label>
      Box 2
      <input type="text" name="box_2">
    </label>
  </fieldset>
</form>

if($_GET["box_1"] != "") {
  $box_1 = $_GET["box_1"];
}
if($_GET["box_2"] != "") {
  $box_2 = $_GET["box_2"];
}
 
 
if(($box_1) && (!$box_2)) {
  // Process 1
}
else if((!$box_1) && ($box_2)) {
  // Process 2
}
else if(($box_1) && ($box_2)) {
  // Process both
}