Improving a jquery function so it doesn't have to be repeated

Question

I have a number of HTML select boxes which are created by a do-while loop in PHP. Typically, the number of boxes varies from 1 to about 6. Then I have a line of checkboxes that are created the same way. The select boxes offer a choice of numbers, say 0 to 5. When a select box has been selected for a value of 1 or more, I want to hide the corresponding checkbox.

The real page is over 500 lines so it becomes difficult to see the wood for the trees. For test purposes I have created a minimalist file to play around with. The code I have at the moment is:

<?php
// Loop through the rooms
$i=1;
do {
    $roomtype = $row_room['roomtype'];
    $room_id = $row_room['room_id'];
    $roomnumber = $row_room['number'];

    $selectroom = "<div><br>
<br>
ID ".$room_id."&nbsp;&nbsp;&nbsp;<select id=\"s".$room_id."\" name=\"numrooms[".$room_id."]\">";
    $selectroom .= "<option value=\"\" selected>Select</option>";
    $k=1;
    if ($roomnumber ==NULL||$roomnumber ==0||$roomnumber >5) {$roomnumber = 5;};
    while ($k<=$roomnumber) {
        $selectroom .= "<option value=\"".$k."\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".$k."</option>";
        $k++;
    }
    $selectroom .= "</select></div>";

    echo $selectroom;

?>
<script>
$('#s<?php echo $room_id ?>').change(function(){
    if($(this).val()>0){
        $('#<?php echo $room_id ?>').css('display', 'none');
    }else{
        $('#<?php echo $room_id ?>').css('display', 'inline-block');
    }
});
</script>
<?php } while ($row_room = mysql_fetch_assoc($room));
?>

<br>
<br>
<?php // Alternative room choice
mysql_data_seek($room,0);
while ($row_room = mysql_fetch_assoc($room)) { ?>
<label id="<?php echo $row_room['room_id'] ?>" style="display:inline-block"><input name="altroom[]" type="checkbox" value="<?php echo $row_room['roomtype'] ?>">
<?php echo "Item with ID ".$row_room['room_id']." &nbsp;&nbsp; "; ?></label>
<?php }?>

As you can see, the jQuery script that does the hiding is placed inside the do-while loop and is therefore repeated multiple times (with variations in the values). This seems to me to be a very crude and inelegant solution. I would like to move the script outside the php and have it just once. How can I achieve this?

EDIT: Cracked it!

I added:

onchange=\"dropAlternative(".$room_id.")\"

to the HTML select and moved the Javascript to the end of the page body.

Then the script became:

function dropAlternative(roomID) {
    if($('#s' + roomID).val()>0){
        $('#' + roomID).css('display', 'none');
    }else{
        $('#' + roomID).css('display', 'inline-block');
    }
}

This is probably totally unimpressive to the Javascript experts on here, but as a Javascript numpty, I'm feeling very pleased with myself.

Please [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). [These extensions](http://php.net/manual/en/migration70.removed-exts-sapis.php) have been removed in PHP 7. Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [PDO](http://php.net/manual/en/pdo.prepared-statements.php) and [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) and consider using PDO, [it's really pretty easy](http://jayblanchard.net/demystifying_php_pdo.html). — Jay Blanchard, Feb 22 '16 at 18:10
To shorten everything you could use a selector that targets the selects `$('select')` or add a class to the select tags. — Jay Blanchard, Feb 22 '16 at 18:11
Please don't add the solution to the _question_. If you have solved the problem yourself, you should post the solution _as an answer_. You can then accept your own answer after a 48 hour waiting period. — Nisse Engström, Mar 16 '16 at 20:22

Improving a jquery function so it doesn't have to be repeated

0 Answers0