After retrieving data from Laravel, I need JavaScript to capture the URL when text is clicked in the view. For example, if I click on clickme in the first line, I want to obtain /download=1. What is the most effective approach for achieving this?
<a href="/download=1"><i class="fa fa-download"></i>Clickme</a><br>
<a href="/download=2"><i class="fa fa-download"></i>Clickme</a><br>
One effective method is to create a function that triggers when the <a></a> tag is clicked.
For example:
<a href="/download=1" onclick="getUrl(this); return false;"><i class="fa fa-download"></i>Clickme</a><br>
Then, in Javascript, you can utilize the following code:
function getUrl(e) {
var href = e.getAttribute("href");
console.log(href);
}
Check out this JSFiddle for an interactive demo.
To achieve this, simply assign a shared class to all anchor tags. Here's an example:
HTML
<a href="/download=1" class="get-url-link"><i class="fa fa-download"></i>Clickme</a><br>
Jquery
$(document).ready(function(){
$(".get-url-link").click(function(){
var url = $(this).attr('action');
alert(url);
});
});
I hope this explanation was useful. Please feel free to reach out if you encounter any issues. Happy coding :)
Give this a shot
<script>
jQuery(function($){
$('a').click(function(event){
if($(this).text()=='Try clicking me'){
event.preventDefault();
alert($(this).attr('href'));
}
});
});
</script>
The anchor element in HTML, also known as the anchor element, is used to create hyperlinks to various destinations such as web pages, files, locations within a page, email addresses, or any other URL. - documentation
However, it might be beneficial to create another HTML element to store the URL by utilizing data attributes. To learn how to do this, refer to the following - documentation
Here's a simple example illustrating the concept explained above.
document.getElementById('url1').addEventListener('click', function () {
console.log(this.dataset.url)
});<div id="url1" data-url="/download=1">Click me </div>give this a shot
<a id="link1" href="/download=1"><i class="fa fa-cloud-download-alt"></i>Download Now</a><br>
<a id="link2" href="/download=2"><i class="fa fa-cloud-download-alt"></i>Download Now</a><br>
let downloadLink = document.getElementById("link1").getAttribute("href");
I need a solution for a scenario where I have 5 datepickers in sequence. When I select a date on the first picker, all previous dates should be disabled when selecting on the next picker. Additionally, once a date is selected on one picker, the following ...
Currently, I am developing a widget that is integrated into a client's website and it loads a jQuery file. However, we need to check if jQuery is already loaded on the client's page to prevent any conflicts, in which case we would not load our ow ...
I encountered an issue in my VueJs project with the following error message: Error: SyntaxError: let is a reserved identifier This error specifically appears when using older browsers such as FireFox 3x. I am aware that this can potentially be resolved ...
I am currently working on a ReactJS website as a part of my web development bootcamp project. One interesting feature I have incorporated is a search functionality that uses Flask routes to connect ReactJS endpoints (../Language.js) with my Sqlite3 databa ...
I am facing an issue with my CSS and JS code. When I slide down the page, my logo should appear from the left with opacity set to 0. However, when I scroll back up to the top, the logo is supposed to move back to its original position on the left and have ...
I am currently developing a game where players collect resources, spend them to create more resources, and engage in various activities. However, I'm facing an issue where the resource count goes into negative numbers when too much of a certain item i ...
When aiming to determine the clientWidth, certain code must be added. For example: #menuSystem a{ position: absolute; height: auto; width: auto; font-size: 15px; } To make it possible to calculate client width, the above code snippet must be included. Th ...
The index returned by findeIndex in an express router function is incorrect. module.exports.nearestOffices = (req, res, next) => { Order.findById(req.params.idOrder).exec() .then(order => { return Promise.all([ Promise.resolve(or ...
I'm trying to dynamically load radio buttons into a div using the JQuery load() function. However, I'm facing an issue when it comes to checking a specific radio button by its value. The problem is that the code doesn't seem to be working w ...
I've tried various solutions, but unfortunately, neither e.preventDefault() nor return false seem to be working for me. When I use prevent default ajax doesn't make post request. Even using $.post doesn't work as expected. Furthermore, addin ...
This piece of code effectively enforces the conditional requirement for the isDirty field to be included in a lecture object: If the id is a string, then an isDirty field must be added to the object: If the id is a number, then the object cannot have an i ...
How can I understand the purpose of the first parameter in $.extend function? It mentions deep copy, but what exactly does that mean? I experimented with it, but I didn't notice any significant changes in the output Check out this JSFiddle link for ...
Hey there! I'm currently working on rendering two different scenes with a camera that moves in sync between the two. Here's what I'm trying to accomplish: I need to display two separate point clouds in two distinct scenes, but I want the ca ...
A React component utilizing Material-UI (MUI) has been created and I am working on making it mobile responsive. The current appearance is as follows: https://i.stack.imgur.com/8z0T8.png My goal is to have it look like this: https://i.stack.imgur.com/L8g ...
Having some trouble with the getElementById() function not functioning as expected and unable to identify the issue. This is an excerpt of my HTML body: <button type="button" id="up">Increase Volume</button> <button type ...
I am currently exploring the option of using a package.json to organize variables in different 'categories,' as shown below: "servers": { "category1": { "modrole": "Moderator" }, "category2": { "modrole": "bot owner" ...
When I retrieve data from an API, I receive a STRING like this: [ { "reason": "Invalid address", "email": "j\u00c3\u00a9r\u00c3\u00b4mel\u00c3\u00a4ufer@com" }, { "reason": "Invalid address", "email": ...
Can someone please help me troubleshoot this code? I am attempting to display a JavaScript variable in PHP after applying a regex, but I keep getting the error Uncaught TypeError: document.getElementById(...).html is not a function $.post('display.ph ...
Check out this code snippet: http://jsfiddle.net/YttKb/ In my javascript, I am trying to add a new line of text using utf-8 coding. Which character should I use to make a new line? It seems like \n only creates a line break, not a new line of text. ...
I am a beginner with Selenium and facing an issue with a task I need to accomplish: Go to https://pastebin.com Paste "Hello from WebDriver" Set the paste expiration to 10 Minutes //Struggling with this step Set the paste title as "helloweb" I am using Ja ...