samedi 18 avril 2015

jQuery how to optimize code - to hide all dropdowns first

I have a form with 3 radio buttons - they are for three user roles. When you click radio button, it show the first dropdown, when you choose from it, it shows next dropdown and so on. If radio button name="radio1", you should see the next dropdowns: "region, school, teacher, class". If radio button name="radio2", you have to see dropdowns: "region, school, class", without teacher. If radio name="radio5", tou should see list of all teachers.


And how to first hide all, not to write in every function so much code to hide first all classes. If you click 3-rd radio, and then click 2-nd radio, not to show the things from 3-rd radio button. Here's my code:



function showHide(self, show){
$(".all_teachers_show").hide();
$(".region").hide();
$(".teacher_school").
$(".teacher").hide();
$(".class").hide();
$(".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);
}
function school_show(yes, no){
if(document.getElementById("radio1").checked===true){
if (no)
$('.teacher').show();
else
$('.teacher').hide();
$("school").prop('checked',false);
$(yes).prop('checked',true);
}
if(document.getElementById("radio2").checked===true){
if (no)
$('.class').show();
else
$('.class').hide();
$("school").prop('checked',false);
$(yes).prop('checked',true);
}
}
function class_show(yes, no){
if (no)
$('.class').show();
else
$('.class').hide();
$("teacher").prop('checked',false);
$(yes).prop('checked',true);
}
function teachers_show(yes, no){
$(".toggle").hide();
$('.region').hide();
if (no)
$('.all_teachers_show').show();
else
$('.all_teachers_show').hide();
$(":radio").prop('checked',false);
$(yes).prop('checked',true);
}

<body>
<?php
echo form_open();
echo "<tr><td> Choose role:* </td><td>";

$data=array(
'name' => 'role_id[]',
'value' => '1',
'id' => 'radio1',
'onclick' => 'showHide(this, true)'
);
echo form_radio($data);
echo " Student ";

$data=array(
'name' => 'role_id[]',
'value' => '2',
'id' => 'radio2',
'onclick' => 'showHide(this, true)'
);
echo form_radio($data);
echo " Teacher ";

$data=array(
'name' => 'role_id[]',
'value' => '5',
'id' => 'radio5',
'onclick' => 'teachers_show(this, true)'
);
echo form_radio($data);

echo "</td></tr>";
echo "<tr class='toggle' style='display:none;'><td> Region:* </td><td>";
?>

<select name='region' id='region' onClick="show(this, true)">
<?php foreach ($regions as $row) { ?>
<option value= "<?= $row->region ?>"><?= $row->region ?></option>
<?php } ?>
</select>
<?php
echo "</td></tr>";
echo "<tr class='school' style='display:none;' onClick='school_show(this, true)'><td> School:* </td><td>";
echo '<select id="school" name="school[]">';
echo '<option name="school[]">Choose region</option>';
echo '</select>';
echo "</td></tr>";

echo "<tr class='teacher' style='display:none;' onClick='class_show(this, true)'><td> Teacher:* </td><td>";

echo '<select id="teacher" name="teacher[]">';
echo '<option >Choose school</option>';
echo '</select>';

echo "</td></tr>";
<select name='class[]' id='class'>
<?php foreach ($classes as $row) { ?>
<option value= "<?= $row->id ?>"><?= $row->class_id ?></option>
<?php } ?>
</select>

<select name='class_divisions[]' id='class_divisions'>
<?php foreach ($class_divisions as $row) { ?>
<option value= "<?= $row->id ?>"><?= $row->division ?></option>
<?php } ?>
</select>
</td></tr>

<?php echo "<tr class='class' style='display:none;'><td> Class:* </td><td>";

?>

<select name='class_divisions[]' id='class_divisions'>
<?php foreach ($class_divisions as $row) { ?>
<option value= "<?= $row->id ?>"><?= $row->division ?></option>
<?php } ?>
</select>
</td></tr>
<?php
echo "<tr class='all_teachers_show' style='display:none;'><td> Учители:* </td><td>";
?>

<?php foreach ($all_teachers_show as $row) { ?>

<input type="checkbox" id='all_teachers_show' name="all_teachers_show[]"
value="<?= $row->user_id ?>"><?= $row->username ?>
<?php } ?>

<?php
echo "</td></tr>";
echo "</table><br/>";
echo form_submit($data);
echo form_close();


I have tried with:


Aucun commentaire:

Enregistrer un commentaire