How can the input boxes values get linked to the selection with the if value?
In the following code, JQuery is taking the wrong index for each select option that should only update text inside it’s own linked input boxes. Help is much appreciated!
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select[name='item[]']").change(function() {
// Link per each Item selection and its value base on if, to the input boxes, based on the index
if ($(this).val() === 'None') {
$("input[name='fee[]']").eq($(this).index("select")).val('0');
}
if ($(this).val() === 'Boots') {
$("input[name='fee[]']").eq($(this).index("select")).val('125');
}
if ($(this).val() === 'Poles') {
$("input[name='fee[]']").eq($(this).index("select")).val('150');
}
if ($(this).val() === 'Helmet') {
$("input[name='fee[]']").eq($(this).index("select")).val('175');
}
if ($(this).val() === 'Jacket') {
$("input[name='fee[]']").eq($(this).index("select")).val('275');
}
if ($(this).val() === 'Gloves') {
$("input[name='fee[]']").eq($(this).index("select")).val('75');
}
if ($(this).val() === 'Mittens') {
$("input[name='fee[]']").eq($(this).index("select")).val('85');
}
}).change()
// Debugging : change bgcolor on hover
$("select[name='item[]']").hover(function() {
$("input[name='fee[]']").eq($(this).index("select")).css("background","#a6955d");
}, function() {
$("input[name='fee[]']").eq($(this).index("select")).css("background","white");
});
$("select[name='duration[]']").change(function() {
// Link per each Item Duratin selection and its value base on if, to the input boxes, based on the index
if ($(this).val() === '0') {
$("input[name='time[]']").eq($(this).index("select")).val('0');
}
if ($(this).val() === '1') {
$("input[name='time[]']").eq($(this).index("select")).val('1');
}
if ($(this).val() === '2') {
$("input[name='time[]']").eq($(this).index("select")).val('2');
}
if ($(this).val() === '3') {
$("input[name='time[]']").eq($(this).index("select")).val('3');
}
}).change()
// Debugging : change bgcolor on hover
$("select[name='duration[]']").hover(function() {
$("input[name='time[]']").eq($(this).index("select")).css("background","#a6955d");
}, function() {
$("input[name='time[]']").eq($(this).index("select")).css("background","white");
});
});
</script>
</head>
<body>
<h1 style="align:middle;">Welcome to Mountain Ski Resort</h1>
<form method="post">
<table border="1">
<tr><thead><th>Row ID</th>
<th>Item</th>
<th>Fee</th>
<th colspan="2">Duratin</th>
</thead>
</tr>
<?php
// Create the form with Selections and Input rows
for($i=1; $i<=10; $i++){
?>
<tr>
<td align="right"><?php echo $i ?></td>
<td>
<select name="item[]">
<option value='None' selected>Select Item</option>
<option value='Boots'>Boots</option>
<option value='Poles'>Poles</option>
<option value='Helmet'>Helmet</option>
<option value='Jacket'>Jacket</option>
<option value='Gloves'>Gloves</option>
<option value='Mittens'>Mittens</option>
</select></td>
<td><input name="fee[]" size="10" readonly></td>
<td>
<select name="duration[]">
<option value='0' selected>Select Duration</option>
<option value='1'>One Hour</option>
<option value='2'>Two Hours</option>
<option value='3'>Three Hours</option>
</select></td>
<td><input name="time[]" size="10" readonly></td>
</tr>
<?php
}
?>
<tr><td colspan="5" align="middle"><input type="submit" value="Submit" /></td></tr>
</table>
</form>
<?php
// Echo the submitted data to view
echo '<h2>Submitted data:</h2>';
echo '<table border="1">
<tr><thead><th>Row ID</th>
<th>Item</th>
<th>Fee</th>
<th colspan="2">Duration</th>
<th>Total</th>
</thead>
</tr>';
for ($i=0;$i < count($_POST['item']);$i++){
$row=$i+1;
// Calculate Totals based on fees multiplied by duration
$fee = $_POST['fee'][$i];
$duration = $_POST['duration'][$i];
$total = $fee * $duration;
// Format outputs
$fee_formatted = '$' . number_format(intval($fee), 2, '.', ',');
$total_formatted = '$' . number_format($total, 2, '.', ',');
$duration_formatted = $duration . ':00';
// Output all data submitted and calculation into a table to view
echo '<tr>
<td align="right">' . $row .
'</td><td>' . $_POST['item'][$i] .
'</td><td align="right">' . $fee_formatted .
'</td><td colspan="2" align="right">' . $duration_formatted .
'</td><td align="right">' . $total_formatted .
'</td></tr>';
}
echo '</table>';
?>
</body>
</html>
Here is a fully functional simple demo solution I managed to put together for anyone interested in the same issue. It demonstrates a “Ski Resort” with “Renting Equipment”. It uses
JavaScriptto linkSelect Optionsvalues to theText Inputsvalue and calculates including output of numbers to words. Comments and suggestion are most welcome.