Checkbox handling

Javascript & Ajax
#1

Trying to convert program from Delphi to web-based.

Currently I have implemented most of it using HTML/PHP with a bit of javascript that I found online.

However am having problems with part of it.

Basically it is a table. Each row consists of:
Name, checkboxes and date

Once a certain number of checkboxes are checked another (text) field is automatically filled-in with today’s date. Very easy to do in Delphi.

Basic PHP code for each table row is:

                             echo '<td id="' . $memid . '">' . $name . '<input type="hidden" name="memberid[]" value="' . $memid . '" /></td>';
                            // checkboxes
                            for ($x = 0; $x < $skills; $x++) {
                                //set defaults if not checked
                                 $checked= $dis = '';
                                 $chkval = 0;

                                if ($skillarr[$x] != "0") {
                                    $checked = 'checked = "checked"';
                                    $chkval = 1;
                                }

                                echo '<td align="center"><input type="hidden" name="chk[' . $memid . '][]" value = "' . $chkval . '"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value"   value = "' . $chkval . '" ' . $checked . '" "' . $dis.' ></td>';
                            }
                            echo '<td align="center"><input type = "text" disabled></td>';    // Passed date goes here  - disabled

$skillarr is an array of items which is determined earlier on in the program The skillarr is filled from data table.

Also determined earlier in program is a PHP variable ($required) which is number of items that have to be “passed” (checked) for skill level to be awarded.

Currently loading from datatable, manual use and saving data all works ok

What users want is that as checkboxes are checked the number of checked items is compared to $required and if equal or greater the user is alerted and a message box offers user the ability to mark as level passed, and if so automatically marks all checked items as unavailable, and current date is entered into text box on the same table row, or leave as is (basically an alert with “Skill levels acheived - Accept? [yes] [no]”) - this is what is happening in the Delphi program.

I will admit I do not understand Javascript, and I am sure what I want can be acheived using that language, and would appreciate guidance.Thanks

#2

Well, there are lots of parts to your question and actually was not clear what you need help with.
But, let’s go over this so you understand it all.

PHP is SERVER-SIDE only. All PHP processing is handled on the server before the browser ever sees any thing to display. PHP usually handles all the database connections, searching, saving, etc. It mingles the data into HTML as needed to display things.

HTML is CLIENT-SIDE only. It is sent to a browser to be displayed and the browser itself parses it and displays it. Any database numbers, data, text, anything is already in place because the PHP has stuck it in where it is needed.

CSS is CLIENT-SIDE only. It is added to the HTML once the browser has received a page to display.

Javascript/JQuery are CLIENT-SIDE only. It runs once the page is loaded and the CSS is processed. JS/JQ can access everything in the page being displayed. Often, as in your case, it can control inputs and other things as needed. It can hide sections of the page, unhide them, make sure there is data in a field before allowing the page to be posted back to the server.

Posting data is usually handled using $_GET or $_POST arrays which are sent to a PHP page on the server. The required fields checked can be handled in various ways. I suspect you want to do that in Javascript. You can do that by using Javascript to count the items checked. This is done with the “length” functions. You get all checked checkboxes and get the “length” of them which is the count of them.
Loosely like this:

var checked-count = document.querySelectorAll('input[type="checkbox"]:checked').length;

Not really tested. It basically looks at the entire current page. Then, finds all INPUT fields. Next all of them that are type CHECKBOX and if checked. That gives you a list of all of them and their count. .length is the count of them.

Not sure, but, I think that is what you are looking for!

#3

Many thanks - will look at this.

Just one question as I have, basically, a submit button on every line, so can I “selectively POST just one row”?

#4

Yes, code the button with the row number. Then, in your posting code, check the value and handle just that row. But, you would also need to code the values of the checkmark’s in that row so you can access just that row’s data. I have done that before, but, it is slightly tricky to do that. You can add a “data” attribute to them to indicate the row number. Then, in the submit button when you select that row, the posting code can check only those checkmark’s that have a data of that row. Something like that should work for you.

1 Like
#5

Many thanks - that has worked.

There is another slight problem which is PHP-related, but I’ll post a new question on the PHP page

Sponsor our Newsletter | Privacy Policy | Terms of Service