Hello,

I am trying to create an order form that allows a user to customize a fire ring by choosing the number of segments in the ring and the designs on each segment. When the 'Submit' button is pressed, the form returns to the same page and the page checks to see if any data has been added to the POST array. Once it finds data, it overwrites the form and displays a message to the user saying that the order is complete and then lists the details of the order.

The problem is that the design selections for each individual segment are not being passed to the POST array. I am able to retrieve the radio button selection for the number of segments from the array, but not the radio button selections for each individual segment. I assume that this has something to do with the fact that the radio buttons for the designs are added into the form area after the page is loaded via a script and thus they are not accounted for by the array. However, I am not sure how to get around this in order to allow the radio button values to be loaded prior to the form being fully loaded.

Here is my code so far:

<?php
  if (isset($_POST['segments'])) {
    $seg_num = $_POST['segments'];
    echo "<body onLoad='message_confirmation()'>
<script type='text/javascript'>
  function message_confirmation() {
    document.write('Order sent successfully. </br> Please allow up to 6 weeks for manufacturing and deliver. </br>');
    document.write('Number of segments: '+".$seg_num.");";
    for ($i=0; $i<$seg_num; $i++) {
      $seg = $_POST['segment_type_'.($i+1)];
      echo "
    document.write('</br> Segment ".($i+1).": '".$seg.");";
    }
  echo "
  }
</script>
</body>";
  }
?>
<body onLoad='segment_check()'>
<script type='text/javascript'>
  var segments1 = new Array("Deer","Fish","Trees","Horses","FSU Torches","BR Cardinal");
  var prices = new Array("45","50","65","80","95");
  function segment_check() {
    for (var i=0; i<document.segment_form.segments.length; i++) {
      if (document.segment_form.segments[i].checked) {
        var j = 1;
        var segments = document.segment_form.segments[i].value;
        document.getElementById('segments_form').innerHTML = "";
        for (var a=1; a<=segments; a++) {
          var divForm = document.createElement('div');
          divForm.id = "df" + a;
          divForm.innerHTML = "Segment " + a + ": ";
          document.getElementById('segments_form').appendChild(divForm);
          for (var b=0; b<segments1.length; b++) {
            document.getElementById('df'+a).innerHTML += "<label for='"+j+b+"'><input type='radio' name='segment_type_"+j+"' id='"+j+b+"' value='"+segments1[b]+"' /> "+segments1[b]+"</label>";
          }
          document.getElementById('df'+a).innerHTML += "<label for='"+j+b+"'><input type='radio' name='segment_type_"+j+"' id='"+j+b+"' value='Other"+[b]+"' /> Other**: </label>";
          document.getElementById('df'+a).innerHTML += "<input type='text' name='segment_type_"+j+"' size='10' onFocus='check_other()' />";
          j++;
        }
        document.getElementById('segments_form').innerHTML += "</br><p style='font-size:18'>Subtotal: $"+prices[i]+".00</p>";
      }
    }
  }
  function check_other() {
    document.getElementById((document.activeElement.name).charAt((document.activeElement.name).length-1)+segments1.length).checked = true;
  }
</script>
Please select the desired size of your fire ring*:
<form action='fire_ring_order.php' method='get' name='segment_form'>
<label for='s1'><input type='radio' name='segments' value='3' id="s1" checked='checked' onClick='segment_check()' /> 25" (3 segments) &nbsp</label>
<label for='s2'><input type='radio' name='segments' value='4' id="s2" onClick='segment_check()' /> 34" (4 segments) &nbsp</label>
<label for='s3'><input type='radio' name='segments' value='5' id="s3" onClick='segment_check()' /> 43" (5 segments) &nbsp</label>
<label for='s4'><input type='radio' name='segments' value='6' id="s4" onClick='segment_check()' /> 52" (6 segments) &nbsp</label>
<label for='s5'><input type='radio' name='segments' value='7' id="s5" onClick='segment_check()' /> 61" (7 segments) &nbsp</label>
</br></br><div id='segments_form'></div>
<input type='submit' value='Submit Order' />
</form>
</br>* Diameters are approximate.
</br>** Due to the complexity of the manufacturing process, some designs may not be viable.
</br>&nbsp&nbsp&nbsp&nbsp We will do out best to work with you and fulfill your request.
</body>

Any help would be greatly appreciated.

Thanks!

It appears that the problem was that I had forgotten to change my naming convention for the text inputs that follow each set of radio buttons. So the values were being submitted for the radio buttons correctly and then were being overwritten by empty text boxes with the same names.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.