I am facing an issue with a label in my code:
<label><input type="checkbox"> I agree to the <a href="terms">terms</a> and would like to continue</label>
Even though the link inside the label successfully opens a foundation 5 reveal modal, clicking on the link also triggers the checkbox to be checked.
Is there a way to prevent the checkbox from being checked when the link is clicked?
To ensure a link behaves as intended, you can attach an event listener that utilizes event.stopPropagation() and event.preventDefault()
Using jQuery to target all links within labels:
$(document).on("tap click", 'label a', function( event, data ){
event.stopPropagation();
event.preventDefault();
window.open($(this).attr('href'), $(this).attr('target'));
return false;
});
Alternatively, with pure JavaScript (assign an id to the specific link):
var termLink = document.getElementById('termLink');
var termClickHandler = function(event) {
event.stopPropagation();
event.preventDefault();
window.open(termLink.href, termLink.target);
return false;
};
termLink.addEventListener('click', termClickHandler);
termLink.addEventListener('touchstart', termClickHandler);
Ensure the link's target is either set to _self or _blank for opening in the same window or a new window respectively.
To avoid duplicating labels pointing to the same checkbox, you can creatively structure the text with two separate labels (each connecting to the checkbox) and the anchor text in between them.
<input id="cb" type="checkbox">
<label for="cb">I consent to the</label>
<a href="#">conditions</a>
<label for="cb">and wish to proceed</label>By using this method, clicking on the link won't alter the checkbox's status, but the rest of the text will impact it accordingly.
Another option for embedding:
<fieldset>
<legend>
<input type="radio">
Please select your preference:
</legend>
Clicking on the
<span onclick="event.preventDefault();">
<a href="options">options</a>
</span>
will reveal more choices.
</fieldset>
Functional issues can arise when interactive elements are nested within one another, as seen here: the outcome of clicking an a element within a label element (or vice versa) is ambiguous. To prevent confusion, it's best to separate the a element from the label element, for example:
<label><input type="checkbox">I agree</label> to the <a href="terms">terms</a>
and would like to continue
Alternatively,
<input type="checkbox" id="agree"><label for="agree">I agree</label> to the
<a href="terms">terms</a> and would like to continue
To ensure the click event does not reach the label, it is important to hinder its propagation on the link.
For more information on how to stop event propagation, visit: https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation
Give this a try. It's been effective for me:
<label><input type="checkbox"> By checking this box, I acknowledge and agree to the <a href="terms" target="_blank" style="display: inline-block; z-index: 99999999999999999999; position: relative;">terms</a> and wish to proceed</label>Using jQuery to update labels:
$('label a').each(function(){
var $this = $(this),
span = $('<span onclick="event.stopPropagation();"></span>');
span.html($this.clone());
$this.replaceWith(span);
});
Give this a shot...
<label>
<input type="checkbox" /> Please confirm that you agree to the <a href="terms">terms</a> in order to proceed
</label>
I came across Goldpage, a tool that allows for route rendering control. Render Control - With Goldpage, you have the flexibility to choose how and when your pages are rendered. For example, one page can be rendered to both HTML and the DOM (classic serv ...
An Azure Function using JavaScript HTTP Trigger posts activity in a Slack online community for customers. It has been functioning successfully for many years, but after upgrading from version ~2 to ~4, it started throwing an error stating Entities is not ...
I am currently working on my very first WordPress plugin. The main purpose of this plugin is to display a message on the plugin page whenever a user saves or edits pages. However, I'm experiencing some issues with printing out these messages. Here&ap ...
Can anyone suggest a more efficient way to create dynamically generated conditions inside a loop? Instead of explaining, here's the code sample: var condition = "data.label == 'Test'"; for (var key in andArray) { condition += "&&a ...
I am seeking a solution to display an image that adjusts its width to fit the browser screen, while also resizing its height according to the aspect ratio without exceeding its original size. I came across this post, and although it provided some guidance, ...
One thing that confuses me is the absence of vertical margin collapse between each definition list(dl). Looking at the style selector "#sweden dl" below, I have specified a margin of 10px 20px; meaning a margin-top and margin-bottom of 10px for each dl, a ...
My current setup involves an Angular application (v4.0.1) with webpack deployed on Heroku. I have a loading spinner in place to show while the app is loading, and it works well locally. However, when deployed on Heroku, the loading spinner (specifically th ...
Is there a way to convert a string in the format: "I (get (it)) not" into an array structure like this: ['I', ['get' , ['it']], 'not'] I'm looking to use parentheses as "levels" within the array. I have a go ...
I'm currently working on implementing a .NET web service (asmx) using JSONP with guidance from this helpful tutorial. When I try calling my webservice with only one parameter, everything runs smoothly. However, the moment I attempt to call it with mu ...
Hey there, I've been successfully using the jquery galleria plugin, but now I'm looking to add some custom content and links that will display in the center of the image. Is it possible to achieve this with galleria? Your insights would be greatl ...
I am facing an issue with my nwjs application that connects to a web address hosting an ember application. I need to access the node context within the ember application to determine the user's operating system for updating purposes. I attempted to do ...
Although I have set up Django with bootstrap by following tutorials, I am facing an issue where Django is unable to locate the static files even when I am replicating the steps shown in the tutorials. The structure of my Project is as follows: webshop ...
I'm currently working on my Vue cli project and I am trying to showcase all the posts from a Ghost blog using the API. Unfortunately, the example provided on the page is for a nuxt project. Once we have called the dependencies and authenticated with ...
I am currently working on a form feature that involves showing a div when a specific option in a select element is chosen, and hiding the div when the option is not selected. Here is the current structure of my markup: Here is the current HTML markup I ha ...
Currently, I'm facing challenges with a small script that is designed to compare the value from a text input with items in an array either partially or completely. I am struggling specifically with the regular expression and its syntax. I was hoping ...
My attempt to generate a table with data from an external .JSON file using JavaScript is not working as expected. Everything worked fine when the data was hardcoded into the .JS file, but once I tried to fetch it externally using "fetch", the details do no ...
Currently, I am attempting to utilize Got with Typescript and ESM. With Got being written in Typescript itself, I anticipated a seamless integration. Alas, even after diligently following this comprehensive guide authored by the creator of Got, I am unable ...
I am dealing with a situation where I have a birth date and need to automatically calculate the retirement date. Everything works smoothly unless the dateFormat is modified. When attempting to change the date format to 'dd/mm/yy', an issue arise ...
I have created a list of items in my HTML code. Each item has a hidden div that contains more detailed information about the item. Currently, I am able to display the details of a specific item by clicking on an 'onclick' link. However, I am faci ...
I'm encountering issues deploying my meteor app with meteor-now. I followed a tutorial here, and also attempted deployment using ZEIT's OSX Client, but I keep getting the same error. Is there a workaround that anyone can suggest? Edit 1: H ...