Highlight radio button on pageload

Question

I have one radio button at the top of the page to show 'No Chosen Supplier' and then several other radio buttons within a query loop.

<label>
  <input type="radio" id="nosupp" name="supp" onchange="resetSupp(this);">
  No Supplier Chosen
</label>

<cfloop query="supplier"
  <label>
    <input type="radio" id="chk1" name="supp" value="#supplier.id#" onchange="change(this);" <cfif getChosen.RecordCount>checked="Yes"</cfif>>
    Chosen Supplier
  </label>
</cfloop>

So I have submitted the form containing these buttons and the button that is checked is stored in the database.

I then query the database to check if the radio button value is 'true', using getChosen.RecordCount.

The problem I am having is that the getChosen.RecordCount selects the right radio button, but without the red highlighting that I am using.

Here is how I am highlighting the buttons:

<script type="text/javascript">
  function change(obj) {
  var tr=obj.parentNode.parentNode;
  var tbl = tr.parentNode.parentNode;
  var inputs = tbl.getElementsByTagName("input");
  for(var i = 0;i<inputs.length;i++)
  inputs[i].parentNode.parentNode.style.backgroundColor='transparent';
  tr.style.backgroundColor=(obj.checked)? 'red' : 'transparent';
}

function resetSupp(obj) {
  var tr=obj.parentNode.parentNode;
  var tbl = tr.parentNode.parentNode;
  var inputs = tbl.getElementsByTagName("input");
  for(var i = 0;i<inputs.length;i++)
  inputs[i].parentNode.parentNode.style.backgroundColor='transparent';
  tr.style.backgroundColor= 'transparent';
}
</script>

How do I get the button that is set to 'true' in the database to have the highlighting on page load?

score 2 · Accepted Answer · edited May 23 '17 at 11:49

You've got your function written, but it sounds as though you never call it to initialize everything once the page is loaded.

To follow best practices, you want to call change(obj) when body.onload is completed. The answers to this question go over some different ways of doing this.

The easiest/most reliable (imo) is using jQuery, but it doesn't appear that you're using it. The next best (again, imo) is to use the document.onload=function declaration.

Unless there is only one input you need to initialize, you'll probably want to write another function which actually loops through each of the inputs and calls change(obj). You'll then call your new init() function when body.onload fires.

So, you would have

document.onload=init

and

function init(){
    // loop through all your inputs
    // call change(obj) on each one
}

edit I just re-read your changeObj and noticed that you're passing in an element and backing up the DOM tree using parentNode, so you're already looping through each input, so my pseudocode for init would be a little off as it stands. Though, I would have probably used getElementsByName and passed in the name of the input group so you're not resetting every input every time change(obj) is called.

Highlight radio button on pageload

1 Answers1