I have a code in php that is being echoed in html:

 $tblAccounts .= "<td width=\"100\"><input title=\"$objRow->AccountCode\" name=\"chkAcctField[$objRow->AccountCode]\" id=\"chkAcctField[$objRow->Description]\" value=\"chkAcctField[$objRow->AccountCode]\" type=\"checkbox\" $strIsChecked>" . ucwords($objRow->Description) . "</td>";

now may problem is this...

I don't know how will I get the value of the checkboxes clicked by the user....
when the names and ids are varying. And I need to get the values using javascript....
using getElement returns null.

Please help.

Dani AI

Generated

A few quick facts to clear up why DOM lookups can return null and how to reliably collect the checked boxes for server-side processing. ’s situation (checkboxes emitted with varying names/ids) is common. ’s suggestion to give the inputs a stable class and use a simple, unique id tied to the account identifier is on target — ids should be predictable and unique, while the name may remain array-style for PHP handling.

A simple, dependency‑free way to read all checked account values from the page (after the DOM is ready) is shown below. This works regardless of numeric account codes or how many checkboxes are generated:

document.addEventListener('DOMContentLoaded', function () {
  const checkedValues = Array.from(
    document.querySelectorAll('input[type="checkbox"][name^="chkAcctField"]:checked')
  ).map(cb => cb.value);
  console.log(checkedValues); // array of account identifiers ready to send to the server
});

If an element must be selected by a dynamically generated id that may include special characters, use CSS.escape to build a safe selector:

const el = document.querySelector('#' + CSS.escape(someIdString));

Practical checklist and caveats: ensure the HTML actually contains the attributes expected (view source); run scripts after elements exist (DOMContentLoaded or place script below the form); put the real account code into the checkbox value or a data- attribute (so collected values are useful); avoid duplicate ids; if inputs are injected later use event delegation or re-run the collection code; always validate and sanitize server-side — client data can be spoofed. Tying the id/value to the DB id (as recommended) and using class/data attributes makes both client-side scripts and server-side handling far simpler and more robust.

Member Avatar for Member #120589

You could provide a classname for javascript to pick up and a array name for the php to pick up (as you've done):

$tblAccounts .= "<td width=\"100\"><input title= \"$objRow->AccountCode\" class= \"accounts\"  name=\"chkAcctField[$objRow->AccountCode]\" id=\"$objRow->AccountCode\" type=\"checkbox\" $strIsChecked>" . ucwords($objRow->Description) . "</td>";

The id field should NOT be an array item - use a simple id that can link to your DB id - if using a DB. In addition, there's no need to escape double quotes, you can use single quoted for property/attribute values in html - it seems for readable to me:

$tblAccounts .= "<td width='100'><input title= '$objRow->AccountCode' class= 'accounts'  name='chkAcctField[$objRow->AccountCode]' id='$objRow->AccountCode' type='checkbox' $strIsChecked>" . ucwords($objRow->Description) . "</td>";

if using jQuery:

$('.accounts').click(function(){
    var id = $(this).attr('id');
    alert(id);
})

php:

if($_POST)
{
    if(isset($_POST['chkAcctField']))
    {
        $chk = (array) $_POST['chkAcctField'];
        $ids = array_keys($chk);
        print_r($ids); //output all ids checked
    }
}

It should be noted that all input variables are suspect and that you should validate them all - including id values - as forms can be spoofed or data passed via cURL etc.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.