Change div color on checking all check boxes in hidden form

Question

Have several problems and can't find solution. My code https://jsfiddle.net/46qybyrh/2/

Upper table HTML

<div class="block">
<table>
    <tr>
        <th>Nr.</th>
        <th style="width: 200px">Task</th>
        <th>Progresas</th>
        <th></th>
    </tr>
    <tr>
        <td>1</td>
        <td>Air port scedules</td>
        <td>0/3</td>
        <td>
            <button onclick="showDiv()">Expand</button>
        </td>
    </tr>
</table>

Hidden div

<div id="popup" class="popupbox">
    <table class="block">
        <tbody>
        <tr>
            <td></td>
            <form>
                <td>XML</td>
                <td>
                    <span>Comment</span><br>
                    <textarea></textarea>
                </td>
                <td>
                    <span>Deadline</span>
                    <input type="date" value="2017-08-24">
                </td>
                <td>Done:<input type="checkbox"></td>
                <td><input type="submit" value="Apply"></td>
            </form>
        </tr>
        <tr>
            <td></td>
            <form>
                <td>Scedules</td>
                <td>
                    <span>Comment</span><br>
                    <textarea></textarea>
                </td>
                <td><span>Deadline</span>
                    <input type="date" value="2017-08-10">
                </td>
                <td>Done:<input type="checkbox"></td>
                <td><input type="submit" value="Apply"></td>
            </form>
        </tr>
        <tr>
            <td></td>
            <form>
                <td>Infobox</td>
                <td>
                    <span>Comment</span><br>
                    <textarea></textarea>
                </td>
                <td><span>Deadline</span>
                    <input type="date" value="2017-08-14">
                </td>
                <td>Done:<input type="checkbox"></td>
                <td><input type="submit" value="Apply"></td>
            </form>
        </tr>
        </tbody>
    </table>
    <button onclick="hideDiv()">close</button></div>

Main aims of this code should be:

1. When press apply on each row, hidden div should not hide. Only information like comment, date, check box should change.
2. When all 3 check boxes are selected, upper tables first row (1 Air port scedules 0/3) should change its background color.
3. If deadline is close (let say 5 days till deadline) entire row should change background color.
4. If deadline is passed entire row should change its background color.

I know its a lot to ask but maybe someone of you will guide me on each of this steps.

Answer 1

I took your fiddle and put it into a codepen and messed around with it for a while. I was able to do what you wanted with a lot of jQuery. To learn jQuery, try www.w3schools.com/jQuery.

Here is the codepen: https://codepen.io/pen/Ojxzje

In a few short steps:

• I removed all the <form> tags, <input type='submit'>, and <tbody> to make the code cleaner (the submit button was causing problems with hiding the div as mentioned by @AngeLOL.
• I reformatted the lower table a bit just to make it cleaner for my jQuery to work nicely. (I added a header row and removed the text from the blocks)
• I included the jQuery library
• I renamed your jQuery functions and created one more (open(), close(), and apply(). They are called by the buttons respectively.
• Inside the open() function, I showed the rows in the second table with the class if items-[ID OF LIST WE ARE IN]. This way there could be a clean list of all of the tasks instead of having a new table for every new list.
• The open() function also changes the button from expand to hide which calls the close function.
• The close() function just hides the second table and changes the name of the button back to expand.
• The apply() function is run whenever you press the Apply button. It performs two checks:
  • Checks all of the checkboxes in the table rows labeled .details-[ID WE ARE WORKING WITH] and if they are all checked, selects the list's row in the upper table. It adds a green color to the background.
  • It then finds all the dates and compares them with today's date (thanks again @angeLOL. If the date is within 5 days, it selects the row the date was on and changes the color. If the date has passed or is today, it colors the row red.

It's a lot of code and a bunch of reorganization, so let me know if you are having trouble understanding it and I can help walk through my steps.

Answer 2

1. use <button type="button">Apply</button> instead <input type="submit" value="Apply">

2. Give to those elements you want to change its color an "id" attribute, so change its color by using style propierty of element

   document.getElementById("elementID").style.backgroundColor = "#colorcode"

3. Here is an example of how to compare dates.

Answer 3

Hidden div is initially hidden. When you submit the form, you reload the page, so it is hidden again. You may want to handle click on button or form submit, prevent default behavior, submit data via AJAX request and then update your UI without page reload.

<form onsubmit="return handleSubmit(this);">
    ...
    <input type="checkbox" onchange="updateCheckboxesState();">
</form>
<script>
function handleSubmit(form) {
    // send AJAX request here...
    // manipulate DOM if needed in AJAX callback
    return false; // prevent submit
}
function updateCheckboxesState() {
    var checkboxes = document.querySelectorAll("form input[type=checkbox]");
    for (var i = 0; i < checkboxes.length; i++) {
        if (!checkboxes.item(i).checked) return; // break on first unchecked
    }
    // highlight the row here...
}
</script>

Similar flow can be applied to date inputs. The main idea is to update UI when value has been changed.

Background change can be achieved via changing element's inline style or changing it's class

var el = document.querySelector("div.block > table > tr");
el.style.backgroundColor = "#FF0000"; // inline
el.className = "highlighted"; // element class

Hope, this helps...