Price doesn't change Onchange dropdown

[Hailstone]

Hi,

 

Having problem with onchange.. the price doesn't change if I select more than 1 in adult dropdown and also on the child dropdown.. please help.. here's my code on javascript and php

$(function(){
    $('select[name^=adults]').on('change', function(){
        var childName = $(this).prop('name').replace(/adults/, 'children');
        var childEl = $('select[name="' + childName + '"]');
        
        if ($(this).val() == 2) {
            childEl.prop('disabled', false);
        } else {
            childEl.prop('disabled', true);
            childEl.val(0);
        }
    });
	
});

PHP

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
			<input type="hidden" name="room_id" value="<?php echo $tpl['room_arr']['id']; ?>" />
			<table cellpadding="0" cellspacing="0" class="hbTable" style="width: 100%">
				<thead>
					<tr>
						<th class="hbBorderBottom"> </th>
						<th class="hbBorderBottom"><?php __('front_adults'); ?></th>
						<th class="hbBorderBottom"><?php __('front_children'); ?></th>
						<th class="hbBorderBottom hbAlignRight"><?php __('front_price'); ?> <span class="hbRed">*</span></th>
					</tr>
				</thead>
				<tbody>
				<?php
				$total = 0;
				foreach (range(1, $_GET['cnt']) as $j)
				{
					?>
					<tr>
						<td class="hbBorderBottom"><?php __('front_room'); ?> <?php echo $j; ?></td>
						<td class="hbBorderBottom">
							<select name="adults[<?php echo $j; ?>]" class="hbSelect hbSelectorPeople" data-index="<?php echo $j; ?>">
							<?php
							foreach (range(1, $tpl['room_arr']['adults']) as $i)
							{
								$selected = (
									isset($STORE['all_rooms'][$_GET['room_id']][$j]) &&
									$STORE['all_rooms'][$_GET['room_id']][$j]['adults'] == $i
								);
								?><option value="<?php echo $i; ?>"<?php echo !$selected ? NULL : ' selected="selected"'; ?>><?php echo $i; ?></option><?php
							}
							?>
							</select>
						</td>
						<td class="hbBorderBottom">
							<select name="children[<?php echo $j; ?>]" disabled class="hbSelect hbSelectorPeople" data-index="<?php echo $j; ?>">
							<?php
							foreach (range(0, $tpl['room_arr']['children']) as $i)
							{
								$selected = (
									isset($STORE['all_rooms'][$_GET['room_id']][$j]) &&
									$STORE['all_rooms'][$_GET['room_id']][$j]['children'] == $i
								);
								?><option value="<?php echo $i; ?>"<?php echo !$selected ? NULL : ' selected="selected"'; ?>><?php echo $i; ?></option><?php
							}
							?>
							</select>
						</td>
						<td class="hbBorderBottom hbAlignRight hbSelectorPrice">
						<?php
						if (isset($STORE['content'][$_GET['room_id']][$j]['raw_price']))
						{
							$price = $STORE['content'][$_GET['room_id']][$j]['raw_price'];
						} else {
							$price = $STORE['rooms'][$tpl['room_arr']['id']][$j]['price'];
						}
						echo pjUtil::formatCurrencySign(number_format($price, 2), $tpl['option_arr']['o_currency']);
						?>
						</td>
					</tr>
					<?php
					$total += $price;
				}
				?>
				</tbody>
				<?php /*
				<tfoot>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td class="hbAlignRight hbSelectorTotal"><?php echo pjUtil::formatCurrencySign(number_format($total, 2), $tpl['option_arr']['o_currency']); ?></td>
					</tr>
				</tfoot>
				*/ ?>
			</table>
		
			<p class="hbAlignRight hbBefore">
				<input type="button" class="hbSelectorButton hbSelectorCancelRoom hbButton hbButtonGray" value="<?php __('front_btn_cancel'); ?>" />
				<?php if ((int) $tpl['option_arr']['o_accept_bookings'] === 1) : ?>
				<input type="button" class="hbSelectorButton hbSelectorBook hbButton hbButtonOrange" value="<?php __('front_btn_book'); ?>" />
				<?php endif; ?>
			</p>
		</form>

[Ch0cu3r]

The javascript code you posted, only has an onchange event handler for the adult dropdown menu. You will need to apply the onchange even hander to the children dropdown menu too in order for the price to be updated when the option changes.

 

Example code

https://jsfiddle.net/evhuk7mv/