1
\$\begingroup\$

I'm working on a WordPress theme and creating a time table which will be easy to complete by users.

In the back-office, there are a checkbox for each days:

<input id="checkbox1" name="footer_options[checkbox1]" type="checkbox" onclick="afficher_Lundi();" value="1" <?php if ( 1 == $options['checkbox1'] ) echo 'checked="checked"'; ?>/>Lundi<br>

Once checked, it displays a list of 4 time inputs to set work's hours of the day with the onclick function afficher_Lundi() (I'm french, so for the record it means display_Monday()):

<div id="horaires_lundi" style="display:none">
        de <input id="horaire_lundi1" name="footer_options[horaire_lundi1]" type="time" value="<?php echo $options['horaire_lundi1']; ?>">
        a <input id="horaire_lundi2" name="footer_options[horaire_lundi2]" type="time" value="<?php echo $options['horaire_lundi2']; ?>">
        et de <input id="horaire_lundi3" name="footer_options[horaire_lundi3]" type="time" value="<?php echo $options['horaire_lundi3']; ?>">
        a <input id="horaire_lundi4" name="footer_options[horaire_lundi4]" type="time" value="<?php echo $options['horaire_lundi4']; ?>">
</div>

function afficher_Lundi() {
    if(document.getElementById("checkbox1").checked == true) {
        document.getElementById("horaires_lundi").style.display= "block";
    }
    else {
        document.getElementById("horaires_lundi").style.display= "none";
    }
}

Then I do a condition in the front to display it if the checkbox is checked:

<?php if ($footer_options['checkbox1'] OR $footer_options['checkbox1'] == '1') { 
     echo "Lundi : ".$footer_options['horaire_lundi1']."-".$footer_options['horaire_lundi2']." et ".$footer_options['horaire_lundi3']."-".$footer_options['horaire_lundi4']; ?> <br><br>
<?php }

It works but I try to find a better way to do it because for one day it's maybe a "little" piece of code but for seven it begin to do a lot:

function horaire_setting() {

    $options = get_option('footer_options'); 

    ?><input id="checkbox1" name="footer_options[checkbox1]" type="checkbox" onclick="afficher_Lundi();" value="1" <?php if ( 1 == $options['checkbox1'] ) echo 'checked="checked"'; ?>/>Lundi<br>

    <div id="horaires_lundi" style="display:none">
        de <input id="horaire_lundi1" name="footer_options[horaire_lundi1]" type="time" value="<?php echo $options['horaire_lundi1']; ?>">
        a <input id="horaire_lundi2" name="footer_options[horaire_lundi2]" type="time" value="<?php echo $options['horaire_lundi2']; ?>">
        et de <input id="horaire_lundi3" name="footer_options[horaire_lundi3]" type="time" value="<?php echo $options['horaire_lundi3']; ?>">
        a <input id="horaire_lundi4" name="footer_options[horaire_lundi4]" type="time" value="<?php echo $options['horaire_lundi4']; ?>">
    </div>

     <input id="checkbox2" name="footer_options[checkbox2]" type="checkbox" onclick="afficher_Mardi();" value="1" <?php if ( 1 == $options['checkbox2'] ) echo 'checked="checked"'; ?>/>Mardi<br>

    <div id="horaires_mardi" style="display:none">
        de <input id="horaire_mardi1" name="footer_options[horaire_mardi1]" type="time" value="<?php echo $options['horaire_mardi1']; ?>">
        a <input id="horaire_mardi2" name="footer_options[horaire_mardi2]" type="time" value="<?php echo $options['horaire_mardi2']; ?>">
        et de <input id="horaire_mardi3" name="footer_options[horaire_mardi3]" type="time" value="<?php echo $options['horaire_mardi3']; ?>">
        a <input id="horaire_mardi4" name="footer_options[horaire_mardi4]" type="time" value="<?php echo $options['horaire_mardi4']; ?>">
    </div>

    <input id="checkbox3" name="footer_options[checkbox3]" type="checkbox" onclick="afficher_Mercredi();" value="1" <?php if ( 1 == $options['checkbox3'] ) echo 'checked="checked"'; ?>/>Mercredi<br>

    <div id="horaires_mercredi" style="display:none">
        de <input id="horaire_mercredi1" name="footer_options[horaire_mercredi1]" type="time" value="<?php echo $options['horaire_mercredi1']; ?>">
        a <input id="horaire_mercredi2" name="footer_options[horaire_mercredi2]" type="time" value="<?php echo $options['horaire_mercredi2']; ?>">
        et de <input id="horaire_mercredi3" name="footer_options[horaire_mercredi3]" type="time" value="<?php echo $options['horaire_mercredi3']; ?>">
        a <input id="horaire_mercredi4" name="footer_options[horaire_mercredi4]" type="time" value="<?php echo $options['horaire_mercredi4']; ?>">
    </div>

    <input id="checkbox4" name="footer_options[checkbox4]" type="checkbox" onclick="afficher_Jeudi();" value="1" <?php if ( 1 == $options['checkbox4'] ) echo 'checked="checked"'; ?>/>Jeudi<br>

    <div id="horaires_jeudi" style="display:none">
        de <input id="horaire_jeudi1" name="footer_options[horaire_jeudi1]" type="time" value="<?php echo $options['horaire_jeudi1']; ?>">
        a <input id="horaire_jeudi2" name="footer_options[horaire_jeudi2]" type="time" value="<?php echo $options['horaire_jeudi2']; ?>">
        et de <input id="horaire_jeudi3" name="footer_options[horaire_jeudi3]" type="time" value="<?php echo $options['horaire_jeudi3']; ?>">
        a <input id="horaire_jeudi4" name="footer_options[horaire_jeudi4]" type="time" value="<?php echo $options['horaire_jeudi4']; ?>">
    </div>

    <input id="checkbox5" name="footer_options[checkbox5]" type="checkbox" onclick="afficher_Vendredi();" value="1" <?php if ( 1 == $options['checkbox5'] ) echo 'checked="checked"'; ?>/>Vendredi<br>

    <div id="horaires_vendredi" style="display:none">
        de <input id="horaire_vendredi1" name="footer_options[horaire_vendredi1]" type="time" value="<?php echo $options['horaire_vendredi1']; ?>">
        a <input id="horaire_vendredi2" name="footer_options[horaire_vendredi2]" type="time" value="<?php echo $options['horaire_vendredi2']; ?>">
        et de <input id="horaire_vendredi3" name="footer_options[horaire_vendredi3]" type="time" value="<?php echo $options['horaire_vendredi3']; ?>">
        a <input id="horaire_vendredi4" name="footer_options[horaire_vendredi4]" type="time" value="<?php echo $options['horaire_vendredi4']; ?>">
    </div>

    <input id="checkbox6" name="footer_options[checkbox6]" type="checkbox" onclick="afficher_Samedi();" value="1" <?php if ( 1 == $options['checkbox6'] ) echo 'checked="checked"'; ?>/>Samedi<br>

    <div id="horaires_samedi" style="display:none">
        de <input id="horaire_samedi1" name="footer_options[horaire_samedi1]" type="time" value="<?php echo $options['horaire_samedi1']; ?>">
        a <input id="horaire_samedi2" name="footer_options[horaire_samedi2]" type="time" value="<?php echo $options['horaire_samedi2']; ?>">
        et de <input id="horaire_samedi3" name="footer_options[horaire_samedi3]" type="time" value="<?php echo $options['horaire_samedi3']; ?>">
        a <input id="horaire_samedi4" name="footer_options[horaire_samedi4]" type="time" value="<?php echo $options['horaire_samedi4']; ?>">
    </div>

    <input id="checkbox7" name="footer_options[checkbox7]" type="checkbox" onclick="afficher_Dimanche();" value="1" <?php if ( 1 == $options['checkbox7'] ) echo 'checked="checked"'; ?>/>Dimanche<br>

    <div id="horaires_dimanche" style="display:none">
        de <input id="horaire_dimanche1" name="footer_options[horaire_dimanche1]" type="time" value="<?php echo $options['horaire_mardi1']; ?>">
        a <input id="horaire_dimanche2" name="footer_options[horaire_dimanche2]" type="time" value="<?php echo $options['horaire_mardi2']; ?>">
        et de <input id="horaire_dimanche3" name="footer_options[horaire_dimanche3]" type="time" value="<?php echo $options['horaire_mardi3']; ?>">
        a <input id="horaire_dimanche4" name="footer_options[horaire_dimanche4]" type="time" value="<?php echo $options['horaire_mardi4']; ?>">
    </div>

    <?php } ?>
    <script>

    function afficher_Lundi() {
        if(document.getElementById("checkbox1").checked == true) {
            document.getElementById("horaires_lundi").style.display= "block";
        }
        else {
            document.getElementById("horaires_lundi").style.display= "none";
        }
    }

    function afficher_Mardi() {
        if(document.getElementById("checkbox2").checked == true) {
            document.getElementById("horaires_mardi").style.display= "block";
        }
        else {
            document.getElementById("horaires_mardi").style.display= "none";
        }
    }

    function afficher_Mercredi() {
        if(document.getElementById("checkbox3").checked == true) {
            document.getElementById("horaires_mercredi").style.display= "block";
        }
        else {
            document.getElementById("horaires_mercredi").style.display= "none";
        }
    }

    function afficher_Jeudi() {
        if(document.getElementById("checkbox4").checked == true) {
            document.getElementById("horaires_jeudi").style.display= "block";
        }
        else {
            document.getElementById("horaires_jeudi").style.display= "none";
        }
    }

    function afficher_Vendredi() {
        if(document.getElementById("checkbox5").checked == true) {
            document.getElementById("horaires_vendredi").style.display= "block";
        }
        else {
            document.getElementById("horaires_vendredi").style.display= "none";
        }
    }

    function afficher_Samedi() {
        if(document.getElementById("checkbox6").checked == true) {
            document.getElementById("horaires_samedi").style.display= "block";
        }
        else {
            document.getElementById("horaires_samedi").style.display= "none";
        }
    }

    function afficher_Dimanche() {
        if(document.getElementById("checkbox7").checked == true) {
            document.getElementById("horaires_dimanche").style.display= "block";
        }
        else {
            document.getElementById("horaires_dimanche").style.display= "none";
        }
    }
    function addEvent(obj, event, fct) {
    if (obj.attachEvent) 
        obj.attachEvent("on" + event, fct); 
    else
        obj.addEventListener(event, fct, true);
    }
    addEvent(window,"load", afficher_Lundi);
    addEvent(window,"load", afficher_Mardi);
    addEvent(window,"load", afficher_Mercredi);
    addEvent(window,"load", afficher_Jeudi);
    addEvent(window,"load", afficher_Vendredi);
    addEvent(window,"load", afficher_Samedi);
    addEvent(window,"load", afficher_Dimanche);
    </script>

I'm searching for another approach or a way to reduce this code.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.