Hello! In short, I’ve got a form I need to modify. I can add HTML/CSS/jQuery to it, but I can’t modify the existing HTML. Initially I was trying to use CSS to accomplish this, but since it has failed me, I’m now learning jQuery and it looks like it’s most likely the solution… I’m just having trouble making the final step. Here’s my original post in the CSS subreddit (most likely you don’t need to read it, but it’s got more context).
Basically, I’m trying to modify simple radio button inputs, so the text and background colors (of the whole button+label) change based on either hovering or clicking on them.
As far as the hovering part goes, I think I’ve got it down:
What I’m having trouble with is the next part – doing the same thing, and adding the .hovered class to whichever radio button is currently selected. What jQuery event would I use for that?
Edit: This codepen ain’t pretty, but it shows my progress. This is where I’ve been trying various things I’ve found online, but so far without much luck.
First off – you already have an onClick on the input – onclick="evalMatchingGift('$75.00');"
But since you said “we can’t work around that” we’ll make do (I’ve been there before).
First off – you have that onClick function called on your codePen, but you aren’t including any function call with it, which will throw errors. I’d suggest getting used to looking at your developer console more closely to catch it freaking out on evalMatchingGift is not defined
We can add a function to codePen called evalMatchingGift to get rid of it (easy enough).
Next up, your hover function works, BUT it will conflict with your click function – on hover it says “add or remove a class” – NO MATTER WHAT. You need to make it ignore removing the class if the input is selected, so we need to rewrite that function, as well.
It’s a good start, but I’ll update the pen with what I can come up with without editing the HTML.
ETA: Here’s an updated CodePen.
Caveat here – this code makes a LOT of assumptions – it’s only being tested on your single scenario, so the selectors may be too greedy if you have more than one matching <div class="donation-level-label-input-container"> on the page.
Members
Online