I have a shopping cart form where the user can currently check a box beside the item they wish to remove and click a button to submit.
I want to change it so that there is a trash can icon instead of the check box that removes the corresponding shopping cart item when the image itself is clicked.
Here is the Jquery for the checkbox function:
function RemoveShoppingCartItem(rcuid, sFormName)
{
var eForm = document.getElementsByName(sFormName)[0];
document.getElementById('rcuid').value = rcuid;
eForm.action += "&Action=REMOVE";
eForm.submit();
}
And the code for the checkbox:
<input type="checkbox" value="9681" name="rcuid">
But the value changes for each box.
What exactly do I need to change to get the result I need?
Don't use a checkbox, use a link with an CSS image background. Hook up the event handler to the link and you can then change CSS class names on click to swap the image within your function.
Related
I have a form which I want to use Google tag manager to get the label text as an event label when someone clicks on the checkbox. I was able to get it to work when a user clicks on the actual label, but doesn't work when the user click on the checkbox rather than the label.
What I am trying to do is to get the text located by the side of the check box. from the example HTML code of the checkbox (pasted below), you can see both the checkbox and text are inside the tag and I need to get the text located next to the checkbox.
code
<div class="stockist-search-filter-checkboxes">
<div class="stockist-search-filter-checkbox">
<label>
<input name="filters" type="checkbox" value="11222">Home Specialist
</label>
</div>
</div>
code
Well, you can change a selector to catch the checkbox click rather than the label click. Or you can add an event listener to the checkbox on page load and send a dataLayer event from it for GTM to fire your event.
If this is not enough for you to resolve it, show your html around the checkbox (NOT as a screenshot) and show how you configured the trigger (as a screenshot).
Here's a code sample for adding a listener that pushes the DL event on checkbox changes.
var checkbox = document.querySelector("input[name=checkbox]");
checkbox.addEventListener('change', function() {
dataLayer = dataLayer || [];
dataLayer.push({
event:"checkbox_changed",
checkboxIsChecked: checkbox.checked,
checkboxName: checkbox.getAttribute("name")
})
});
I am not good at Jquery but trying to fix something, I have a toggle function showing the div on checking a checkbox and hide the div on un-checking the checkbox, in the div I have radio button value LEFT, WHOLE, RIGHT. What Im trying to do is when someone check the checkbox it toggle the div and "WHOLE" option should select by default from radio box and this option deselect when toggle is hidden.
I have below code
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
$("input:radio[value='whole']").attr('checked',true);
});});
Problem is when toggle show the div it check the WHOLE in button but it effect on all other hidden divs. I want to select WHOLE only for that div which is toggled and rest are remain unchecked.
I have searched the whole internet but not found anything, again I am not Jquery expert I am internee.
http://dhowcruisemarina.com/pizza/product/build-your-own-pizza/ here once you check the Olives from the option "VEGGIES & GOOD STUFF " all its options (radio buttons) will toggle and I want to check WHOLE only for olives. In my case all other hidden divs options are selected as WHOLE and shows in the Checkout Page.
You need to target the specific radio button.
$("input:radio[value='whole']") This targets every radio input with a value of 'whole'
I can't give the exact answer without seeing your HTML but basically you need to target the radio button with a value of whole in the specific div only like this
$("#divId > input:radio[value='whole']")
https://api.jquery.com/child-selector/
I am trying to toggle one button using jQuery. So far, all of the information I have found is to toggle a paragraph, for instance, using another button, but I want to make this button appear and reappear when it is clicked. I also want to increase the "score" when the shown button is clicked, and decrease the "score" when the button reappears (after the user clicks it). Does anyone know how to accomplish this?
I have a series of buttons, but I will link the code for one of them for now.
HTML:
<li><button id="active1" onclick="disappear1()"></button></li>
JavaScript:
function disappear1() {
$("#active1").toggle();
currentStreak++;
document.getElementById("streak").innerHTML="current streak: " + currentStreak;
}
I know that the problem is that when I click on the button, the button disappears so there's no way for me to find it again. I want there to be a way to still reference it.
The .toggle() function changes the targeted element's CSS display property to hide/show the element. When the element is hidden it is still in the DOM and can still be targeted with same method as when it's visible.
The example below toggles an element with an ID of 'active1' when a button is clicked. Even when the 'active1' element is hidden it is still referenced and made visible again.
$('#button1').click( function (){
$('#active1').toggle();
});
I want to select the value of a radio button by default on change of the value of another radio button. Let's say a list contains 10 values as a whole. But if I set checked="checked" in the input tag, the default value gets selected but when the dependency is loaded, nono of values in the list varies. So the default value gets hidden at the back end. And no default value is selected.
The scenario will be clearer with the pics shown below.
In image 1: none of pins have in total 15 values and default value selected is 050. And when the value of the center of distance changes nome of pins also changes. So I want default value selected in that too.
Image 1:
Image 2:
Please help with this issue.
Lets say class of the div "center distance" is center-distance and class for div "Numbers of pins" is "number-pins"
//On change event of the radio buttons inside "center-distance" div
$(".center-distance input:radio").on("change",function(){
//Functionality will go here after selection of radio button inside div with class "center-distance"
//Make select first radio button which is not hidden inside div with class "number-pins"
$(".number-pins input:radio:visible:first").eq(0).prop("checked", true).trigger("click");
});
I am using magento, but am far from jquery/javascript
I have a list of images that i want to be able to click and change the corresponding dropdown list selection.
I can have it set up so that select name/value or option value can be attached to each image that corresponds either using class or id. So i just need the basic jquery to input
thanks a million
Say the id of the image is the value of the dropdown item.
$('img').click(function() {
$('#dropdown').val($(this).attr('id'));
});
JsFiddle Example