Update the color of the div when all checkboxes in the hidden form are selected

Question

Update the color of the div when all checkboxes in the hidden form are selected

Seeking help for multiple issues I'm facing with my code. Here is the link to the code.

HTML for Upper Table:

<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 schedules</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>Schedules</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 objectives of this code include:

Applying changes like comment, date, and checkbox selection without hiding the hidden div when "apply" is clicked on each row.
Changing background color of the first row in the upper table when all three checkboxes are selected.
Changing entire row's background color if deadline is close (e.g., within 5 days) or passed.

I understand it's a complex task but any guidance on these steps would be greatly appreciated.

javascript forms html-table submit

Answer 1

Answer №1

I recently took your fiddle and experimented with it on CodePen for some time. Utilizing jQuery, I was able to achieve the desired results. If you're interested in learning more about jQuery, check out www.w3schools.com/jQuery.

Feel free to explore the modified codepen here.

Here's a summary of the steps taken:

Removed unnecessary HTML tags like <form>, <input type='submit'>, and <tbody> for cleaner code presentation (the submit button was causing issues with hiding the div as highlighted by @AngeLOL).
Adjusted the lower table layout slightly to optimize jQuery functionality. (Added a header row and removed text from blocks)
Included the jQuery library
Renamed existing jQuery functions and introduced new ones (open(), close(), and apply()). These functions are triggered by respective buttons.
The open() function reveals rows in the second table with the specific class if items-[ID OF LIST WE ARE IN], ensuring a clean list of tasks without multiple tables.
open() also changes the button from expand to hide, which calls the close() function.
close() function simply hides the second table and reverts the button name back to expand.
apply() function triggers upon pressing Apply. It conducts two checks:
- Validates checkboxes in rows labeled
```
.details-[ID WE ARE WORKING WITH]
```
  . If all are checked, it highlights the corresponding row in the upper table with green background.
- Compares dates with today's date (thanks to @angeLOL). If within 5 days, it highlights the row with the date in question. Dates passed or present are colored red.

This involved significant code modifications and restructuring. Feel free to reach out if you need help understanding the process step by step.

Answer 2

I recently took your fiddle and experimented with it on CodePen for some time. Utilizing jQuery, I was able to achieve the desired results. If you're interested in learning more about jQuery, check out www.w3schools.com/jQuery.

Feel free to explore the modified codepen here.

Here's a summary of the steps taken:

Removed unnecessary HTML tags like <form>, <input type='submit'>, and <tbody> for cleaner code presentation (the submit button was causing issues with hiding the div as highlighted by @AngeLOL).
Adjusted the lower table layout slightly to optimize jQuery functionality. (Added a header row and removed text from blocks)
Included the jQuery library
Renamed existing jQuery functions and introduced new ones (open(), close(), and apply()). These functions are triggered by respective buttons.
The open() function reveals rows in the second table with the specific class if items-[ID OF LIST WE ARE IN], ensuring a clean list of tasks without multiple tables.
open() also changes the button from expand to hide, which calls the close() function.
close() function simply hides the second table and reverts the button name back to expand.
apply() function triggers upon pressing Apply. It conducts two checks:
- Validates checkboxes in rows labeled
```
.details-[ID WE ARE WORKING WITH]
```
  . If all are checked, it highlights the corresponding row in the upper table with green background.
- Compares dates with today's date (thanks to @angeLOL). If within 5 days, it highlights the row with the date in question. Dates passed or present are colored red.

This involved significant code modifications and restructuring. Feel free to reach out if you need help understanding the process step by step.

Answer 3

Answer №2

Instead of using

<input type="submit" value="Apply">

, consider using

<button type="button">Apply</button>

To change the color of specific elements, add an "id" attribute and use the style property:
```
document.getElementById("elementID").style.color = "#newColor"
```
For guidance on how to calculate date differences, check out this example.

Answer 4

Instead of using

<input type="submit" value="Apply">

, consider using

<button type="button">Apply</button>

To change the color of specific elements, add an "id" attribute and use the style property:
```
document.getElementById("elementID").style.color = "#newColor"
```
For guidance on how to calculate date differences, check out this example.

Answer 5

Answer №3

Initially, a hidden div remains concealed. Upon form submission and page reload, it reverts to being hidden once more. To address this, you can implement functionality for handling button clicks or form submissions, intercept the default behavior, transmit data through an AJAX request, and subsequently update your user interface without necessitating a page refresh.

<form onsubmit="return handleSubmit(this);">
    ...
    <input type="checkbox" onchange="updateCheckboxesState();">
</form>
<script>
function handleSubmit(form) {
    // Implement AJAX request here...
    // Modify the DOM as necessary in the AJAX callback
    return false; // Prevent form submission
}
function updateCheckboxesState() {
    var checkboxes = document.querySelectorAll("form input[type=checkbox]");
    for (var i = 0; i < checkboxes.length; i++) {
        if (!checkboxes.item(i).checked) return; // Halt upon encountering first unchecked checkbox
    }
    // Perform actions such as highlighting the row here...
}
</script>

A similar approach can be taken with date inputs, focusing on updating the UI when values are altered.

To effect background changes, you can either modify an element's inline style or adjust its class:

var el = document.querySelector("div.block > table > tr");
el.style.backgroundColor = "#FF0000"; // Inline style modification
el.className = "highlighted"; // Class assignment to element

I trust this information proves helpful...

Answer 6

Initially, a hidden div remains concealed. Upon form submission and page reload, it reverts to being hidden once more. To address this, you can implement functionality for handling button clicks or form submissions, intercept the default behavior, transmit data through an AJAX request, and subsequently update your user interface without necessitating a page refresh.

<form onsubmit="return handleSubmit(this);">
    ...
    <input type="checkbox" onchange="updateCheckboxesState();">
</form>
<script>
function handleSubmit(form) {
    // Implement AJAX request here...
    // Modify the DOM as necessary in the AJAX callback
    return false; // Prevent form submission
}
function updateCheckboxesState() {
    var checkboxes = document.querySelectorAll("form input[type=checkbox]");
    for (var i = 0; i < checkboxes.length; i++) {
        if (!checkboxes.item(i).checked) return; // Halt upon encountering first unchecked checkbox
    }
    // Perform actions such as highlighting the row here...
}
</script>

A similar approach can be taken with date inputs, focusing on updating the UI when values are altered.

To effect background changes, you can either modify an element's inline style or adjust its class:

var el = document.querySelector("div.block > table > tr");
el.style.backgroundColor = "#FF0000"; // Inline style modification
el.className = "highlighted"; // Class assignment to element

I trust this information proves helpful...

Update the color of the div when all checkboxes in the hidden form are selected

Answer №1

Answer №2

Answer №3

Similar questions

Italian calendar conversion for the react-multi-date-picker library

Trouble with basic JavaScript functionality in a React component

The Google map is failing to load on the webpage

Having trouble interacting with the "Continue" button on PayPal while using Selenium

The useEffect alert is triggered before the component is re-rendered

The previous and next arrows do not have a looping feature

How can I update a dropdown menu depending on the selection made in another dropdown using Angular

What is the best way to update only a portion of a nested schema in mongoose?

Utilizing ES6 array methods to convert multidimensional arrays into chart-ready data

Returning to the initial state after clicking on an element within a repeated set in AngularJS?

What is the best way to retrieve the value of a text box in VUEjs using its unique identifier?

Setting up a functionality for a PHP-generated select option

If the variable is not defined, then utilize a different one

Tips for efficiently sending multiple ajax requests

Creating a timer implementation in Node.js using Socket.IO

Separating screens for logged in and logged out users in React Router with Firebase is not possible

transform nested object into a flat object using JavaScript

Modifying the value of an object key with Javascript

When Highcharts and AngularJS team up, beware of the memory leak!

Issue with Sequelize Associate function not functioning correctly