Overriding link href to call javascript

[AndrewTraub]

I've created an html/css only version of my site.  Now I'd like to add javascript to make the feel a bit more fluid, like being able to delete an item without visiting a confirmation page and then returning.
To that end, I've added a "data-delete=xx" value to the link. I've then got javascript which will replace the href value with a call to an asynchronous function, but it seems to get called when the page loads and also won't work after the initial load.  Here's the code (made abstract so it can be re-used with different objects):

Code: [Select]

const overrideDeletes = async (dataItem, functionToCall) => {
    //make all links with dataItem call our function instead
    const links = document.querySelectorAll('['+dataItem+']');
    for (let i = 0; i < links.length; i++) {
        //extract data item
        const dataValue = links[i].getAttribute(dataItem);
        links[i].href = "javascript:await "+functionToCall(dataValue);
        //links[i].onclick = await functionToCall(dataValue);
    }
}
Any help on properly replacing the href would be appreciated. I tried to make the href="javascript:void(0);" and use onclick, but that didn't work.

[Jason Knight]

Not 100% certain what you're trying to accomplish with that code, but crapping in a promise as the href of an anchor when you should be intercepting the click even on a button likely isn't helping. The commented out assignment direct to onclick when you seem to be getting the elements off the DOM doesn't seem all that great either.

Though it also implies that your existing markup is using anchors / get data for deletes, meaning they can be spoofed by user content if you have any. This probably means your HTML and how it talks to the back end likely needs a total rewrite since those should probably be buttons inside a form, not anchors.

And if you want to hook them by a data object, try querySelectorAll([data-delete]) instead of... whatever that is. NOT that I'd be using data attributes for that since I'd have:

<button value="88" name="delete">Delete</button>

As my interface inside a form to handle the scripting off deletes. Again, with something like a delete you need to protect against XSS exploits.

[AndrewTraub]

Thanks, but how then do I create a no JS version of the site.
I thought I would have a link going to the delete page and then, for the js version, replace the click handler.
It sounds like I would need a form for each delete button posting to the  destination page.

[Jason Knight]

It sounds like I would need a form for each delete button posting to the  destination page.

You actually would -- and SHOULD -- use only one form.

Sending delete commands -- or anything "admin" related -- via anchors is bad practice. If you have ANY user generated data and accidentally end up spitting out markup from the user, or even just links from the user like in a forum post or reply, they can fake that link and possibly sucker someone with add/delete permissions into deleting. It's a form of XSS exploit. Thus you use A form. Singular.

Something people don't realize about HTML forms? With button name/values, only the one you click on as a submit is sent to the server. the other are ignored. Thus for example let's say you had a table of names and prices.

Code: [Select]

<form action="#" method="post">
<table class="cart">
<caption>Shopping Cart</caption>
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Price</th>
<th scope="col">Controls</th>
</tr>
</thead><tbody>
<tr>
<th scope="row">Eb Alto Sax</th>
<td>$1,299</td>
<td><button name="delete" value="1">Delete</button></td>
</tr><tr>
<th scope="row">#2 Alto Sax Reeds, pack of 10</th>
<td>$24.99</td>
<td><button name="delete" value="2">Delete</button></td>
</tr>
</tbody>
</table>
</form>

If you click on the first button, delete = 1 is what gets sent server-side. The second one would be ignored. Likewise you click the second you get delete = 2.

Thus in PHP you could do:

Code: [Select]

if (array_key_exists("delete", $_POST)) {
  // delete $_POST['delete'] here.
}
You could actually leverage get/post array behavior:

name="submit[delete]"

to array_key_exists "submit" and then walk its keys for the action sent to the server, allowing for multiple actions (like add more?) to the same form.

Thus you only need one form.

[AndrewTraub]

So what would happen if I render the button with an onclick event and javascript was disabled?

Like <button name="delete" value="2" onclick="verifyDeleteFunction()">

If the onclick is ignored, then I could render the button and not need to intercept the button click.

[Jason Knight]

So what would happen if I render the button with an onclick event and javascript was disabled?

Like <button name="delete" value="2" onclick="verifyDeleteFunction()">

If the onclick is ignored, then I could render the button and not need to intercept the button click.

1) don't use onclick in the markup. Its' an outdated outmoded way of coding and violates the separation of concerns.

2) don't use onclick on a button inside the form.

3) Intercept onsubmit on the form instead.