CODEWITHSUNDEEP
phpjavascriptajaxdrop-down-menu
LITguy
LITguy

Reputation: 633

Disable dropdown box based on selection of another dynamic dropdown box using php and javascript

I have a list of widths in a dropdown box. They are dynamic because each product has different widths so I've setup the code to look for the minimum and maximum. Then it sets up a dropdown list in increments of 1".

Next to the width are 1/8" increments. So for example you could pick 52 1/8.

If the maximum width is 92 inches let's say, the 1/8 increment dropdown box should disappear or disable because since 92 is max.. you can't pick 92 1/8.

How do I make that 1/8ths box disappear or disable? Here is part of my current code for the dropdown box.

<select name="width_str" id="width_str" onchange="doCalc();" style="width:50px;">
<option value="">--</option>
<?php
$counter = $minwidthRS - 1;
$start = $minwidthRS;

for($start; $start < $maxwidthRS + 1; $start++) {
$counter = $counter + 1;
echo "<option value=".$counter.">".$counter."</option>";
}
?>
</select>

Code for the select dropdown box with 1/8ths that I would like to disable or disappear when MAXIMUM above is selected.

<select name="widthfrac_str" id="widthfrac_str" onchange="doCalc();" style="width:50px;">
<option value="">--</option>
<option value="1/8">1/8</option>
<option value="1/4">1/4</option>    
<option value="3/8">3/8</option>
<option value="1/2">1/2</option>    
<option value="5/8">5/8</option>
<option value="3/4">3/4</option>    
<option value="7/8">7/8</option>
</select>

I'm aware of how to send a selected width value over to a PHP page using AJAX and compare it there, but what do I send back in the success callback? Could I send something that tells the container of that 1/8 measurement dropdown to disable or disappear?

Many thanks! If you need more code let me know. The doCalc() script basically uses AJAX and sends the width to php processing page in order to update price instantly.

EDIT (added more code):

Here is part of my script..

<script type="text/javascript">
function doCalc(){
var roomX = $('#room_str').val();
... lots of variables set here

$.post('db_query.php',
{roomX:roomX, etc. etc. etc.}, 
function(data) {
data = $.parseJSON(data);
$('#roomname-placeholder').html(data.roomname);
// ... lots of placeholders and code here
});
return false;
};
</script>

Not sure if it helps but I learned a little about using a callback to alter an input field and replacing its value with this: $('input[name=x_login]').val(data.loginid);

It would be great if there was code like that to simply change the other dropdown box disabled=disabled? Does that make sense? I'm still learning programming lingo!

Upvotes: 1

Views: 2017

Answers (1)

Francisco Presencia
Francisco Presencia

Reputation: 8858

You can call another function with onchange(), which should check the number chosen for the first value. If it is the maximum, then toggle function to hide the second element. A neater solution would be to include the 'check for maximum value and toggle if true' inside doCalc.

Remember to make PHP check also the value, since if user chooses the second value AND then the maximum for the first block, it should hide the second one, but it's value might still be sent.

EDIT:

<script type="text/javascript">
function doCalc(){
var roomX = $('#room_str').val();
if (roomX == <?php echo $maxwidthRS; ?>)
  {
  document.getElementById('widthfrac_str').style.display = 'none';
  // You also need to make the second element's value 0 within those brackets
  }
... lots of variables set here

$.post('db_query.php',
{roomX:roomX, etc. etc. etc.}, 
function(data) {
data = $.parseJSON(data);
$('#roomname-placeholder').html(data.roomname);
// ... lots of placeholders and code here
});
return false;
};
</script>

There's no problem putting php within javascript if it's in a .php file. It worked as the OP stated in the comments, great!

Upvotes: 1

Related Questions