Copy the selected dropdown value from one selection box to another
Simplified, I have a form that generates select boxes based on a mysql query.
$i = 0;
while($res= mysql_fetch_assoc($sql2))
echo " <div class='span1'>";
echo " <input name='orderNo[$i]' type='text' id='orderNo[$i]' value='$orderNo' class='input-small' onclick='populateorderNo()' />";
echo " </div>";
echo " <div class='span1'>";
echo " <select name='methodOfPay[$i]' id='methodOfPay[$i]' class='input-small' >";
echo " <option value=''> </option>";
echo " <option value='On Bill'>On Bill</option>";
echo " <option value='Customer C.C'>Customer C.C</option>";
echo " <option value='Company G.C'>Company G.C</option>";
echo " </select>";
echo " </div>";
++$i;
}
What I am trying to do is copy the selected parameter to methodOFPay [0] into the next methodOfPay []. I was able to do this using the onclick function for orderNo, but I cannot figure out how to apply the same theory to the select box. Here is my js code for a simple text copy. For now, this will always be the first line, copying subsequent lines.
var orderno = 0;
function populateorderNo(){
var copyorderNo = document.getElementById('orderNo[0]');
document.getElementById('orderNo[' + orderno + ']').value = copyorderNo.value;
orderno += 1;
}
Any help would be greatly appreciated. Thanks a lot, as a beginner, I am learning a lot from this site and all the answers I got.
source to share
If you are using straight JavaScript you can use onchange
. In jQuery, you can use .change()
.
Direct JavaScript method
PHP
echo " <select name='methodOfPay[$i]' id='methodOfPay[$i]' class='input-small' onchange='myOnChangeFunction()' >";
...
echo " </select>";
Js
function myOnChangeFunction() {
// Get value and set other selects
}
JQuery Method ( jsfiddle )
Js
$('select[id^="methodOfPay"]').change(function() {
var value = $(this).val();
$('select[id^="methodOfPay"]').not($(this)).val(value);
});
source to share
I changed the code a bit for the sake of demonstration, but the theory is still the same.
The main thing to note is the use of count ($ orderNo) in javascript
This will work better with jQuery and regex as shown in Ruben Infante example
<?php
for ($i = 0; $i < 10; ++$i) {
$orderNo[$i] = $i;
}
?>
<html>
<head>
<title>Hello</title>
<script type="text/javascript">
function populateorderNo() {
var copyorderNo = document.getElementById('orderNo[0]');
for (var i = 0; i < <?php echo count($orderNo); ?>; i++) {
document.getElementById("orderNo["+i+"]").value = copyorderNo.value;
}
}
function changeSelectBox() {
var selectBox = document.getElementById('methodOfPay[0]');
for (var i = 0; i < <?php echo count($orderNo); ?>; i++) {
document.getElementById('methodOfPay['+i+']').value = selectBox.value;
}
}
</script>
</head>
<body>
Hello
<?php foreach ($orderNo as $r): ?>
<div class='span1'>
<input name='orderNo[<?php echo $r;?>]' type='text' id='orderNo[<?php echo $r;?>]' value='<?php echo $r;?>' class='input-small' onchange='populateorderNo();' />
</div>
<div class='span1'>
<select name='methodOfPay[<?php echo $r; ?>]' id='methodOfPay[<?php echo $r;?>]' class='input-small' onchange='changeSelectBox();' >
<option value=''> </option>
<option value='On Bill'>On Bill</option>
<option value='Customer C.C'>Customer C.C</option>
<option value='Company G.C'>Company G.C</option>
</select>
</div>
<?php endforeach; ?>
</body>
</html>
source to share