javascript and html onclick & onload functions

Question

How can I use html to fire a toggle function written in javascript for both page load and when I click on the checkbox?

Essentially what the function does is toggle a certain input box for the user. I allow them to enter a custom price. I want this box to show by default, and also to be toggled. Am currently able to have just "onclick" work with this input but when I add the "onload" it does not load by default. Yes, I can still click it to toggle it.

<input 
type="checkbox" 
id="item_use_custom_price_<?php echo $_item->getId() ?>" 
checked="checked" 
onload="toggleCustPrice(order, this);" 
onclick="toggleCustPrice(order, this);"
/>

I have the above input in a PHTML file (not really a php question). The ID is pulling from PHP there can be many rows for the grid.

I do not think I can use the window.onload() function because in my JS script because I need to be able to pass the "order" and "this" parameters into the function so the proper row toggles.

There's an `onload` event on the `` element, is that what you meant to use? Though if the functionality is to "show by default and toggle on click" then you shouldn't need to use any `onload` event. Just have the page state (styling) initially be what you want it to be. — David, May 08 '17 at 15:25
can I use data-load like here? http://stackoverflow.com/questions/3708850/is-there-an-onload-event-for-input-elements — camdixon, May 08 '17 at 15:26

score 0 · Answer 1 · answered May 08 '17 at 19:18

You asked in a comment about using data-load which was demonstrated in this SO answer and my answer would be yes. There is other ways to handle this but with modern browsers now days this is the simplest way to accomplish what your looking to do.

Assuming that you do not need to differentiate between toggles, meaning if you place multiple toggles on the page in the future you want them to all toggle, you could do something like this:

<!-- You will just grab this by its name -->
<input type="checkbox" ... data-name-you-want-here=""/>

If you need a possible way to differentiate these in the future you could use this approach:

<!-- Add the unique ID you already have as the value -->
<input type="checkbox" ... data-name-you-want-here="<?php echo $_item->getId() ?>"/>

Now you just need to figure out how you will call this code and trigger the toggle. You can use jQuery if you need backwards compatibility but really I think you'll be fine with vanilla JavaScript and querySelector() or querySelectorAll(). If you know there is only one data selector on the page use:

var element = document.querySelector('name-you-used-here');
/* Now you have the element in JavaScript so toggle it */

Again if you have multiple then use:

var element = document.querySelectorAll('name-you-used-here');
/* Now you have the element in JavaScript, loop and toggle accordingly */

So in vanilla JavaScript pseudocode this is how I see it working. The function would be called simply by placing the call in the footer of your page or adding a call to it in some sort of document ready function:

function doToggle(){
    var elem = [Do Query Selector Here]

    ...Your toggle code here.
    elem.id <--- If you need to pull out the ID

    ...loop and use your toggle code if you used querySelectorAll 
}

javascript and html onclick & onload functions

1 Answers1