PHP Populate Text box from Select - Array fields - php

Question

I need to populate the relevant text box with the results of a Select drop down.
My Javascript so far is
<script language="JavaScript">
var mytextbox = document.getElementById('error');
var mydropdown = document.getElementById('errormsg_id');
mydropdown.onchange = function(){
mytextbox.value = this.value;
}
</script>
My select box and text boxes are built as arrays from a query so there is nultiple of them.
I need to be able to populate the corresponding text box with the results from the Select next to it.
Any ideas?
Thanks
<td width="1%">
<select style="width:100%" name="errormsg_id[]" id="errormsg_id[]">
<?php do { ?>
<option value="<?php echo $row_rserrormsg['errormsg_id']?>"
<?php if ($row_rsdates['errormsg_id'] == $row_rserrormsg['errormsg_id']) { echo("selected='selected'"); } ; ?> >
<?php echo $row_rserrormsg['error_message']?></option>
<?php } while ($row_rserrormsg = mysql_fetch_assoc($rserrormsg)); ?>
<?php mysql_data_seek($rserrormsg, 0);
$row_rserrormsg = mysql_fetch_assoc($rserrormsg);?>
</select>
</td>
<TD align="center" class="adminuser">
<input style="width:96%;text-align:left;" autocomplete="on" title="Enter Error Message" type="text" name="error[]" id="error[]" value="<?php echo $row_rsdates['error_message']; ?>" maxlength="100"/>
</TD>

Answer 1

Assuming You will be using jQuery and Your HTML is like this:
<table>
<tr>
<td><select class="my_select" name="errormsg_id1[]" id="errormsg_id1">...</select></td>
<td><input name="errormsg_id1_txt" id="errormsg_id1_txt" title="..." />
</tr>
...
<tr>
<td><select class="my_select" name="errormsg_idX[]" id="errormsg_idX">...</select></td>
<td><input name="errormsg_idX_txt" id="errormsg_idX_txt" title="..." />
</tr>
</table>
this could be done using jQuery:
$(document).ready(function(){
$('.my_select').change(function(){
$('#'+$(this).attr('id')+'_txt').val($(this).val());
});
});
Hope it is correct, have no time to test it...

Answer 2

Here is a JSFiddle/DEMO on how to get it to work with sample selects:
I think this approach is a little better than #shadyyx since it removed the need for you to manually increment the input and select field names.
<table>
<tr>
<td><select class="select" name="errormsg_id[]">
<option val="test1">Test1</option>
<option val="test2">Test2</option>
<option val="test3">Test3</option>
</select></td>
<td><input class="error_text" name="errormsg_id_txt[]" title="..." />
</tr>
...
<tr>
<td><select class="select" name="errormsg_id[]">
<option val="test1">Test1</option>
<option val="test2">Test2</option>
<option val="test3">Test3</option>
</select></td>
<td><input class="error_text" name="errormsg_id_txt[]" title="..." />
</tr>
</table>
And the JQuery:
$(document).ready(function(){
$('.select').change(function(){
$(this).parent().parent().find('.error_text').val($(this).val());
});
});
NOTICE: If you are using plain Javascript, see this DEMO
<table>
<tr>
<td><select class="select" name="errormsg_id[]" id="errormsg_id1" onChange="update('errormsg_id1')">
<option val="test1">Test1</option>
<option val="test2">Test2</option>
<option val="test3">Test3</option>
</select></td>
<td><input class="error_text"name="errormsg_id_txt[]" id="errormsg_id_txt1" title="..." />
</tr>
...
<tr>
<td><select class="select" name="errormsg_id[]" id="errormsg_id2" onChange="update('errormsg_id2')">
<option val="test1">Test1</option>
<option val="test2">Test2</option>
<option val="test3">Test3</option>
</select></td>
<td><input class="error_text" name="errormsg_id_txt[]" id="errormsg_id_txt2" title="..." />
</tr>
</table>
And Javascript:
function update(element){
var e = document.getElementById(element);
var id = element.substring(element.length-1);
document.getElementById("errormsg_id_txt"+id).value = e.value;
}

Answer 3

You need to think of way to uniquely identify your corresponding set of elements. The most convenient way I would suggest would be to use the primary key value of the data row.
And example would be like
while($row = mysqli_fetch_assoc($result)) {
$id = $row['id']; //A primary key field
echo '<input type="text" name="text'.$id.'" id="text'.$id.'" />';
echo '<select name="select'.$id.'" id="select'.$id.'" />...</select>";
}
Next, call a function from the select menu, so that only the relevant text box is updated. Update the above select portion to read something similar to this.
echo '<select name="select'.$id.'" id="select'.$id.'" onchange="updateBox(\'text'.$id.'\', this.value)" />...</select>";
Now, create a very simple simple function to update the text box.
function updateBox(element, value) {
el = document.getElementById(element);
el.value = value;
}