How to set selected values of dynamic dropdowns
First, I have 3 radio buttons to select one of them.
Then, when you selected, you have dependent dynamic dropdowns.
I want when the user submits the form and there are validation errors, the selected radio button value and from the dropdowns to be shown, rather than selecting them again.
First, I have to do this for switches named "role_id". I tried to do this for the region, but I'm not sure how exactly to do it.
Edited: I did this for radio (ckeck my edited code). But this is tricky for dropdowns because I am new to jQuery. Could you help me? Thank you in advance!:)
I am using CodeIgniter. My opinion:
$(document).ready(function(){
$(":radio").click(function(){
$('#region').val('Choose region');
$('#school').val('Choose region');
$('#teacher').val('Choose school');
$('#class').val('Choose class');
$('#class_divisions').val('Choose division');
});
});
$(document).ready(function(){
if($('#radio1').is(':checked') || $('#radio2').is(':checked')) {
var dropDown = document.getElementById("region");
var region = dropDown.options[dropDown.selectedIndex].value;
$('.toggle').show();
}
});
function showHide(self, show){
$(".all_teachers_show, .toggle, .school, .teacher_school, .teacher, .class, .teacher_class").hide();
if (show)
$('.toggle').show();
else
$('.toggle').hide();
$(":radio").prop('checked',false);
$(self).prop('checked',true);
}
function show(yes, no){
if (no)
$('.school').show();
else
$('.school').hide();
$("region").prop('checked',false);
$(yes).prop('checked',true);
}
$(document).ready(function() {
$('#region').change(function() {
var url = "<?= base_url() ?>index.php/home/get_schools";
var postdata = {region: $('#region').val()};
$.post(url, postdata, function(result) {
var $school_sel = $('#school');
$school_sel.empty();
$school_sel.append("<option>Choose region</option>");
var schools_obj = JSON.parse(result);
$.each(schools_obj, function(key, val) {
var option = '<option value="' + val.school_id + '" >' + val.school_name + '</option>';
$school_sel.append(option);
});
});
});
});
echo "<tr><td><label> Choose role:* </label> </td><td>";
$selected_role = $this->input->post('role_id'); ?>
<input type="radio" name="role_id" id="radio1" onclick="showHide(this, true)" value="1"
<?php echo '1' == $selected_role ? 'checked="checked"' :
'' ?>/>
<?php echo " "; ?>
<input type="radio" name="role_id" id="radio2" onclick="showHide(this, true)" value="2"
<?php echo '2' == $selected_role ? 'checked="checked"' :
'' ?>/>
<input type="radio" name="role_id" id="radio5" onclick="teachers_show(this, true)" value="5"
<?php echo '5' == $selected_role ? 'checked="checked"' :
'' ?>/>
echo "</td></tr>";
echo "<tr class='toggle' style='display:none;' ><td><label> Region* </label></td><td>";
$selected_region = $this->input->post('region'); ?>
<select name='region' id='region' onClick='show(this, true)'>
<?php foreach ($regions as $row) { ?>
<option name='region' value="<?= $row->region ?>"
<?php echo $row->region == $selected_region ? 'selected="selected"' : ''
?>>
<?= $row->region ?></option>
<?php } ?>
</select>
<?php
echo "</td></tr>";
echo "<tr class='school' style='display:none;' ><td><label> School:*
</label></td><td>";
$selected_school = $this->input->post('school[]'); ?>
<select id="school" name="school[]" class='school' onChange='school_show(this, true)'>
<option value="" <?php echo "" == $selected_school ? 'selected="selected"' : ''
?>>Choose region</option>
</select>
<?php echo "</td></tr>";
$(document).ready(function(){
$(function(){
$(document).on('change', '.school', function(e) {
alert(this.options[e.target.selectedIndex].text);
$( "#school" ).this.options[e.target.selectedIndex].text;
});
$('.school').show();
});
});
source to share
To get the completed form fields you can use the Form Library functionality for this https://ellislab.com/codeigniter/user-guide/libraries/form_validation.html#repopulatingform
<?php echo validation_errors(); ?>
<?php echo form_open('form'); ?>
<h5>Username</h5>
<input type="text" name="username" value="<?php echo set_value('username'); ?>" />
<input type="submit" value="Submit" />
</form>
set_value () will, in this form, re-fill the value that the user enters into the field (in this case, the field named "username")
As for getting a popup that was autogenerated, I would try to use the $ _POST ['region'] value to replay the same dropdown.
for example in psuedocode
if ($_POST array exists) {
if ($_POST['region'] has a value) {
// eg. a region has been previously selected
retrieve this dropdown using the region parameter
}
}
source to share