Question

I have 3 select boxes drop_1,drop_2 and drop_3. The last 2 are added dynamically on the selection of the previous one. create_promo.php is the page that loads all the boxes. But i have used func.php to load dynamic select boxes.Hence I am not getting drop_2 and drop_3 values in my form processing page promo_process.php called by create_promo.php.I want to send back my drop_2 and drop_3 values back to my create_promo.php.

create_promo.php

<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
    $.get("func.php", {
    func: "drop_1",
    drop_var: $('#drop_1').val()
    }, function(response){
    $('#result_1').fadeOut();
        setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
    });
return false;
});
});

function finishAjax(id, response) {
    $('#wait_1').hide();
    $('#'+id).html(unescape(response));
    $('#'+id).fadeIn();
}
function finishAjax_tier_three(id, response) {
    $('#wait_2').hide();
    $('#'+id).html(unescape(response));
    $('#'+id).fadeIn();
}
</script>

<form action="promo_process.php" method="post">
<tr>
    <td class="normalfont">SELECTION 1</td>
    <td>
        <select name="drop_1" id="drop_1">
        <option value="" selected="selected" disabled="disabled">Select 1</option>
        <?php getTierOne(); ?>
        </select>
    </td>
</tr>
<tr>    
     <td class="normalfont">SELECTION 2</td>    
 <td>
     <span id="wait_1" style="display: none;">
     <img alt="Please Wait" src="images/ajax-loader.gif"/>
     </span>
     <span id="result_1" style="display: none;"></span>
     </td>
</tr>
<tr>
     <td class="normalfont">SELECTION 3:</td>
 <td>
    <span id="wait_2" style="display: none;">
        <img alt="Please Wait" src="images/ajax-loader.gif"/>
    </span>
    <span id="result_2" style="display: none;"></span>
</td>
</tr>
</form>
<?php
     include('connect.php');
     function getTierOne()
     {
         $result = mysql_query("SELECT s_name FROM selection1") or die(mysql_error());
         while($tier = mysql_fetch_array( $result )) 
     {
         echo '<option value="'.$tier['s_name'].'">'.$tier['s_name'].'</option>';
         }
     }
?>

func.php

<?php
     include('connect.php');
     if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
          drop_1($_GET['drop_var']); 
     }
     function drop_1($drop_var)
     {
          $result = mysql_query("SELECT DISTINCT a_name FROM select_2 WHERE s_id=(select s_id from s_name where s_name='$drop_var')") or die(mysql_error());
          echo '<select name="drop_2" id="drop_2">
                   <option value=" " disabled="disabled" selected="selected">Select 2</option>
                   <option value="ALL" >ALL</option>';
          while($drop_2 = mysql_fetch_array( $result ))
          {
              echo '<option value="'.$drop_2['a_name'].'">'.$drop_2['a_name'].'</option>';
          }
      echo '</select>';
      echo "<script type=\"text/javascript\">
       $('#wait_2').hide();
       $('#drop_2').change(function(){
       $('#wait_2').show();
       $('#result_2').hide();
               $.get(\"func.php\", {
            func: \"drop_2\",
            drop_var: $('#drop_2').val()
               }, function(response){
               $('#result_2').fadeOut();
               setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
               });
           return false;
           });
           </script>";
   }
   if($_GET['func'] == "drop_2" && isset($_GET['func'])) {
          drop_2($_GET['drop_var']);
   }
   function drop_2($drop_var)
   {
          if($drop_var=="ALL")
              $result = mysql_query("SELECT DISTINCT h_name FROM select_3")or die(mysql_error());
      else  
      $result = mysql_query("SELECT DISTINCT h_name FROM select_3 WHERE a_id=(select a_id from select_2 where a_name='$drop_var')")or die(mysql_error());
      echo '<select name="drop_3" id="drop_3">
                <option value=" " disabled="disabled" selected="selected">Select 3</option>
            <option value="ALL">ALL</option>';
      while($drop_3 = mysql_fetch_array( $result ))
     {
    echo '<option value="'.$drop_3['h_name'].'">'.$drop_3['h_name'].'</option>';
         }
     echo '</select> ';
   }

?>

promo_process.php

<?php
include 'connect.php';
$errmsg = array(); //Array to store errors
$errflag = false; //Error flag

$drop = mysql_real_escape_string($_POST['drop_1']);
$drop_2 = mysql_real_escape_string($_POST['drop_2']);
$drop_3 = mysql_real_escape_string($_POST['drop_3']);
if($drop== ' ' && $drop_2== ' ' && $drop_3==' ')
{
    $errmsg[] = 'SELECT PLEASE'; //Error
    $errflag = true; //Set flag so it says theres an error
}

if($errflag) {
    $_SESSION['ERRMSG'] = $errmsg; //Write errors
    session_write_close(); //Close session
    header("location: create_promo.php"); //Rediect
    exit(); //Block scripts
}
?>

I’m getting error saying “Undefined index drop_1 and drop_2” in promo_process.php. How do i retain those values?

Answer 1

I solved it.

I had to create a hidden type input and that was given the select value by the following line of code.

echo "<script type=\"text/javascript\">
        $('#wait_2').hide();
        $('#drop_2').change(function(){
        $(this).parent().parent().find('.drop2').val($(this).val());
        $('#wait_2').show();
        $('#result_2').hide();
    $.get(\"func.php\", {
        func: \"drop_2\",
        drop_var: $('#drop_2').val()
    }, function(response){
    $('#result_2').fadeOut();
    setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
    });
        return false;
        });
    </script>";

where drop2 is the hidden type input and drop_2 is the select box whose value is stored in hidden input.

Thanks to all.