How to Check which HTML Select from Multiple Selects changed without JS - php

Question

Not sure why in practice this would not work, but i am trying to make a page reload after submit, but with multiple <select>'s.
Each has it's own name, but how do I know which was changed on $_POST, without giving each select its own form.
Here is the current code:
<form id="productSelectedForm" action="products.php?filter=true" method="post">
<input type="hidden" name="model" value="<?php echo $item['model']; ?>" />
<ul>
<li>
<label><strong>Select available Grade: </strong>
<select id="gradeSelect" class="propChanged" name="grade" onchange="this.form.submit();">
<?php foreach( $props[ 'grade'] as $g) { ?>
<option value="<?php echo $g; ?>">
<?php echo $g; ?>
</option>
<?php } ?>
</select>
</label>
</li>
<li>
<label><strong>Select available Colour:</strong>
<select id="colourSelect" class="propChanged" name="colour" onchange="this.form.submit();">
<?php foreach( $props[ 'colour'] as $g) { ?>
<option value="<?php echo $g; ?>">
<?php echo $g; ?>
</option>
<?php } ?>
</select>
</label>
</li>
<li>
<label><strong>Select available Storage:</strong>
<select id="storageSelect" class="propChanged" name="storage" onchange="this.form.submit();">
<?php foreach( $props[ 'storage'] as $g) { ?>
<option value="<?php echo $g; ?>">
<?php echo $g; ?>
</option>
<?php } ?>
</select>
</label>
</li>
<li>
<label><strong>Select available Network:</strong>
<select id="networkSelect" class="propChanged" name="network" onchange="this.form.submit();">
<?php foreach( $props[ 'network'] as $g) { ?>
<option value="<?php echo $g; ?>">
<?php echo $g; ?>
</option>
<?php } ?>
</select>
</label>
</li>
</ul>
</form>
Is there any way to do this without using Javascript and individual forms, that i am missing ?
Thanks
Addy

Answer 1

From your given PHP it can be seen that you do not pre-select a certain option for the SELECT elements, so the browser will select the first by default.
Then when the user submits the form you cannot make the distinction between a voluntary, conscious choice for that first item, or whether the user just changed another SELECT and did not do anything with this one.
I would suggest to start every SELECT with a first option that is empty, and has an empty VALUE attribute, like this:
<option value=""><option>
<?php foreach( $props[ 'grade'] as $g) { ?>
<option value="<?php echo $g; ?>">
<?php echo $g; ?>
</option>
<?php } ?>
Then when you process the $_POST data, you will know whether the user made an explicit choice if the value is not empty, for example:
if (!empty($_POST['grade'])) {
// a grade was specified by the user.
}
Keeping State
Although your code does not seem to keep track of previously made selections, you might probably want that, and so you should somehow store those previous selections. Once you are able to do that, you will be able to find out what changed by comparing the previous values with the current submitted values.
You could use session variables for keeping track of the user's choices:
session_start();
// detect change and remember current selections
$changed = array();
foreach (array("grade", "colour", "storage", "network") as $key) {
if (isset($_POST[$key])) {
if (empty($_SESSION[$key]) || $_POST[$key] != $_SESSION[$key]) {
$changed[] = $key;
}
$_SESSION[$key] = $_POST[$key];
} else {
$_SESSION[$key] = "";
}
}
After this code has run you will have in the array $changed the list of items (e.g. ["storage"] ) that have a changed value. Normally, it should not be possible that more than one value changes at a time (since you submit immediately on a change), but who knows...
Then in your form you should make sure the user keeps the previously selected items selected, for example, for grade:
<select id="gradeSelect" class="propChanged" name="grade" onchange="this.form.submit();">
<?php foreach( $props[ 'grade'] as $g) { ?>
<option value=""></option>
<option value="<?php echo $g; ?>"
<?php if ($g == $_SESSION["grade"]) echo " selected "; ?>
>
<?php echo $g; ?>
</option>
<?php } ?>
</select>