I have a form where the user can generate multiple form elements (repeat select boxes) dynamically. The form code that relates to my question is as follows.
for ($i=0; $i < $number; $i++) {
<label for="is_business"> Is A Business?</label>
<select class="target form-control look2" id="is_business" name="is_business//note the array on name
<option value="" selected disabled="disabled">select option</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
}
I use this form to post an array $_POST[is_business] which I then serialize (for database entry). All works perfectly well regardless of the number of select boxes the user generates.
Now what I want to do is to set each select box in my dynamic form with the previously posted values selected back from the database and unserialized. I have checked the data being selected from the database and it too looks fine, the unserialized string (ie array) printing as expected...
//unserialized array values selected from database. Count was set to three. Answers were all 'yes'
[is_business_db] => Array(
[0] => 1 //yes
[1] => 1 //yes
[2] => 1 //yes
)
Problem: I want to use the is_business_db array values so that each of the dynamically generated select boxes .... name=is_business[] ... shows the correct selected value when the user returns to the page. I have tried inserting the following javascript into my php loop (obviously closing/opening the php tags) which works fine for just the first select box generated.
<script>
$('#is_business').val('<?php echo $is_business_status?>');
</script>
I have also tried (not really expecting success) inserting the same js in a separate loop at the end of my script ...same problem...only the first select box is updated.
<?php
for ($i=0; $i < $number; $i++) //php loop
{
$is_business_status=$is_business_db[$i];
?>
<script>
$('#is_business').val('<?php echo $is_business_status?>');
</script>
<?php
}
?>
Obviously i am failing to execute the loop properly. Any help would be appreciated.
If anyone was interested in this question, after a several hours of head scratching I realised I a doing something obviously wrong and have now fixed the problem. Its not particularly elegant but it does work for anyone struggling with dynamic created select boxes returning selected values on refresh or page vists.
The echoed html....
//$is_business_db=serialize($is_business) create array from database string
//$number=count($is_business_db)
for ($i=0; $i < $number; $i++) //number is a count of the array values
<div class="input_field_remove">
<div class="form-group">
<label for="is_business"> Is A Business?</label>
<select class="target form-control look2" id="is_business'.$i.'" name="is_business[]">
<option value="" selected disabled="disabled">select option</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
</div>
</div>
And then the javacript ... notes...uses json encode to capture the php data (- as an unserialized database string ie a php array) inside javascript.
<?php $index_max=count($is_business_db) ?>
<script>
var index_max='<?php echo $index_max;?>';
var value = <?php echo json_encode($is_business_db) ?><!---this is the critical bit---->
//var data = JSON.parse(value);//this is recommended -NOT USED- to ensure good js code-but not crucial in all situations
//now loop the javascript array and push the current selected values to the user-generated select boxes
for (index=0; index < index_max; index++)
{
$("#is_business"+ index).val(value[index]);
}
</script>
I hope this helps someone in the future.