Here is the JavaScript code I am using:
<script type="text/javascript">
function handleSelectionChange(selectElement, nextField) {
nextField.focus();
}
function handleKeyPress(event, currentField, nextField) {
if (event.key === "Enter") {
event.preventDefault();
nextField.focus();
}
}
</script>
This is the form I have created:
<form action="incoming.php" method="post" >
<input type="hidden" name="pt" value="<?php echo $_GET['id']; ?>" />
<input type="hidden" name="invoice" value="<?php echo $_GET['invoice']; ?>" />
<select name="product" onchange="handleSelectionChange(this, qty)" style="width:300px; "class="chzn-select" required autofocus>
<option></option>
<?php
try {
include('../connect.php');
$result = $db->prepare("SELECT * FROM products");
$result->execute();
// Code to generate dropdown options goes here
} catch (PDOException $e) {
echo "Database Error: " . $e->getMessage();
}
for($i=0; $row = $result->fetch(); $i++){
?>
<option value="<?php echo $row['product_id'];?>"><?php echo $row['product_code']; ?> - <?php echo $row['gen_name']; ?> - <?php echo $row['product_name']; ?> | Expires at: <?php echo $row['expiry_date']; ?></option>
<?php
}
?>
</select>
<input type="number" onkeydown="handleKeyPress(event, this, price1)" name="qty" value="" min="1" placeholder="Qty" autocomplete="off" style="width: 300px; height:30px; padding-top:6px; padding-bottom: 4px; margin-right: 4px; font-size:15px;" / required>
<input type="hidden" name="discount" value="" autocomplete="off" style="width: 68px; height:30px; padding-top:6px; padding-bottom: 4px; margin-right: 4px; font-size:15px;" />
<input type="number" onkeydown="handleKeyPress(event, this, button)" name="price1" value="" autocomplete="off" placeholder="Price" style="width: 300px; height:30px; padding-top:6px; padding-bottom: 4px; margin-right: 4px; font-size:15px;" / required>
<input type="hidden" name="date" value="<?php echo date("m/d/y"); ?>" />
<Button type="submit" name="button" class="btn btn-info" style="width: 123px; height:35px; margin-top:-5px;" /><i class="icon-plus-sign icon-large"></i> Add</button>
</form>
The issue I'm facing is that I want the select element to be autofocused when the page loads. However, the autofocus attribute is not working as expected. I noticed that removing the "class="chzn-select" from the select tag enables autofocus to work, but adding it back disables the functionality. Any help with resolving this would be greatly appreciated.