Check a box from a loaded Javascript

Question

We use:

<div id="bbox-root">
<script type="text/javascript">
       window.bboxInit = function () {
           bbox.showForm('92da1507-775e-47da-a152-5447a6b6db6c');
       };
       (function () {
           var e = document.createElement('script'); e.async = true;
           e.src = 'https://bbox.blackbaudhosting.com/webforms/bbox-min.js';
           document.getElementsByTagName('head')[0].appendChild(e);
       } ());
</script>
</div>

This loads a donation form on our website. The company that provides this doesn't allow a box to be checked by default. Is there a way to do this after the page/script loads?

You can see it live at https://givesaintagnes.org/doctorsday/

Specifically I want to have this box checked by default:

Thanks!

`document.addEventListener("DOMContentLoaded", function(){ theCheckBox.checked = true; });` Also, `document.getElementsByTagName('head')[0]` is a waste of processing power, just use: `document.querySelector('head')` — Scott Marcus, Feb 22 '19 at 20:42
`DOMContentLoaded `is for the initial HTML loading. It will not works as the interesting HTML come asynchronously after. https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded — samb102, Feb 22 '19 at 20:45
@samb102 I'm well aware of when `DOMContentLoaded` fires. There is no mention of asynchronous calls in the post. OP asks if there is a way to check the box after the page loads - This does that. — Scott Marcus, Feb 22 '19 at 20:49
Thank you for taking the time to help. Could you specify where that line would need to go? Thanks again! — JFarq, Feb 22 '19 at 20:50
It can go in any `script` tag on your page, but you need to replace `theCheckBox` with a proper reference to the checkbox in question. — Scott Marcus, Feb 22 '19 at 20:51
I've updated my answer to wait to check the checkbox until it is loaded — lucasvw, Feb 22 '19 at 21:06
@JFarq Are you using jQuery? That would likely make this easier. — lucasvw, Feb 22 '19 at 21:24

lucasvw · Accepted Answer · 2019-02-22T21:44:27.273

Using Google Chrome dev tools, I see that the id of the checkbox is bboxdonation_tribute_chkTributeGift. Using that id, the box can be checked after loading with:

document.getElementById('bboxdonation_tribute_chkTributeGift').checked = true;

Here is how I would recommend detecting that the checkbox has been added (modifying your original code):

(function() {
  var e = document.createElement('script');
  e.async = true;
  e.src = 'https://bbox.blackbaudhosting.com/webforms/bbox-min.js';
  document.getElementsByTagName('head')[0].appendChild(e);

  setTimeout(checkCheckbox, 10);

  function checkCheckbox() {
    if (document.getElementById('bboxdonation_tribute_chkTributeGift')) {
      // element found, check box
      document.getElementById('bboxdonation_tribute_chkTributeGift').checked = true;
      document.getElementById('bboxdonation_tribute_chkTributeGift').dispatchEvent(new Event('change'));
    } else {
      // wait a little longer
      setTimeout(checkCheckbox, 10);
    }
  }

}());

And on what event do you decide to run it ? – samb102 Feb 22 '19 at 20:47 — samb102, Feb 22 '19 at 20:47

score 0 · Answer 2 · answered Feb 22 '19 at 20:55

0

You can check the box with JavaScript like this:

document.getElementById("checkbox").checked = true;

If you have JQuery use $(document).ready(function() { //code here })to run this only when the page has loaded. If you don't have JQuery, adding the script just before closing the <body> tag is the safest way.

More info:

answered Feb 22 '19 at 20:55

Arthur Coelho

73
1
5

How is this different than the answer I already supplied? This doesn't provide the correct id for the checkbox. The user is also not waiting for the document to load, he is waiting for the script he is dynamically including to load. – lucasvw Feb 22 '19 at 20:58
Sorry, about that, I started writing before you posted and didn't see your answer. :( – Arthur Coelho Feb 22 '19 at 21:06

Check a box from a loaded Javascript

2 Answers2