shubham jha shubham jha - 2 months ago 10
HTML Question

change select box value live on change on different select box

I am stuck at a point on my project where I need to change the values of the select/dropdown box on change of the value of the first select/dropdown box. The values are to be extracted from database.

Database example:

Table: clicks_package

cpack_id cpack_name cpack_timer
1 Standard 30
2 Mini 20
3 Micro 10


Table: clicks_pricing

cp_id cp_clicks cp_amount cp_package (cpack_id from table clicks package)
1 1000 30 2
2 500 20 1
3 1500 10 1
4 1500 10 2


CODE

<tr>
<th class="left-align">Clicks Package</th>
<td class="left-align" colspan="2"><select name="quantity" class="select-field" required>
<option value=""></option>
<?php while($f = $pacq->fetch()){ extract($f); ?>
<option value="<?php echo $cpack_id; ?>"><?php echo $cpack_timer; ?> secs ( <?php echo $cpack_name; ?> )</option>
<?php } ?>
</select> // mistake in value rectified from value="<?php echo $cp_id; ?> to value="<?php echo $cpack_id; ?>
</td>
</tr>
<tr>
<th class="left-align">Clicks Required</th>
<td class="left-align" colspan="2"><select name="quantity" class="select-field" required>
<option value=""></option>
<?php while($f = $cq->fetch()){ extract($f); ?>
<option value="<?php echo $cp_package; ?>"><?php echo $cp_clicks; ?> clicks for $<?php echo number_format($cp_amount,2,'.',','); ?></option>
<?php } ?>
</select> // mistake in value rectified from value="<?php echo $cp_id; ?> to value="<?php echo $cp_package; ?>
</td>
</tr>


Now what I want is I want to change the
Clicks Required
select box values when the
Clicks Package
is changed depending on the package ID in table clicks pricing. For example, if user selects
Standard
from the select box
Clicks Package
the
Clicks Required
select box will display values of
cp_id
2 and 3 as the
cp_package
has inherited the id 1 from the
clicks_package
table. I want this to be changed LIVE using jQuery. I tried my best to explain the question. Please help.

Answer

1) Create one class clicks_package in First Dropdown which will be used in <script></script> to fetch dropdown values.

<select name="quantity" class="select-field clicks_package" required>

2) Create one class show_clicks_pricing in second <td> to show the result.

<td class="left-align show_clicks_pricing" colspan="2">

Updated Code

<tr>
  <th class="left-align">Clicks Package</th>
  <td class="left-align" colspan="2">
    <select name="quantity" class="select-field clicks_package" required>
      <option value=""></option>
      <?php while ($f = $pacq->fetch()) {
        extract($f); ?>
        <option value="<?php echo $cp_id; ?>">
          <?php echo $cpack_timer; ?> secs ( <?php echo $cpack_name; ?> )
        </option>
      <?php } ?>
      </select>
  </td>
</tr>
<tr>
  <th class="left-align">Clicks Required</th>
  <td class="left-align show_clicks_pricing" colspan="2">
    <select name="quantity" class="select-field" required>
      <option value=""></option>
      <?php while ($f = $cq->fetch()) {
        extract($f); ?>
        <option value="<?php echo $cp_id; ?>">
          <?php echo $cp_clicks; ?> clicks for $<?php echo number_format($cp_amount, 2, '.', ','); ?>
        </option>
      <?php } ?>
    </select>
  </td>
</tr>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('.clicks_package').on('change',function(){
  var cpack_id = $(this).val();
  $.ajax({
      type:'POST',
      url:'ajaxData.php',
      data:{cpack_id:cpack_id},
      cache:false,
      success:function(data){
        $('.show_clicks_pricing').html(data);
      }
  }); 
});
</script>

3) Create one page namely ajaxData.php. (If you want to change this page name, change in <script></script> too. Both are related.)

ajaxData.php

<?php
$cpack_id = $_POST['cpack_id'];

Now write query here using this `$cpack_id`. And fetch it like the same way you were fetching before.

?>
<select name="quantity" class="select-field" required>
  <option value=""></option>
  <?php while ($f = $cq->fetch()) {
    extract($f); ?>
    <option value="<?php echo $cp_id; ?>">
      <?php echo $cp_clicks; ?> clicks for $<?php echo number_format($cp_amount, 2, '.', ','); ?>
    </option>
  <?php } ?>
</select>