Try joining the date as an variable you could do it easily.
function filterMatchByDate(e) {
let date ="10/10/2021";
let refreshBlock = document.getElementById('refreshBlock');
let hrefValue = refreshBlock.getAttribute("href");
hrefValue+="/"+date;
refreshBlock.click();
}
Clear the previously emitted event value when you successfully generate a new link, like:
function filterMatchByDate(e) {
let refreshBlock = document.getElementById('refreshBlock');
let hrefValue = refreshBlock.getAttribute("href");
let splitHref = hrefValue.split('/');
splitHref[splitHref.length - 1] = e.target.value;
refreshBlock.href = splitHref.join('/');
refreshBlock.click();
e.target.value = ''; //add this line
}
As @Deepak already mentioned in his comment: the originial markup and script seem to work. In order to demonstrate the point I set up a litte snippet here:
function filterMatchByDate(e) {
let refreshBlock = document.getElementById('refreshBlock');
let hrefValue = refreshBlock.getAttribute("href");
let splitHref = hrefValue.split('/');
splitHref[splitHref.length - 1] = +e.target.value.replace(/.*-/,"");
refreshBlock.href = splitHref.join('/');
refreshBlock.click();
}
<input type="date" name="match_date" id="matchDate" onchange="filterMatchByDate(event)" min="2021-01-01" max="2021-12-31">
There is an anchor tag
<a href="https://jsonplaceholder.typicode.com/posts/43" class="use-ajax hide " id="refreshBlock">My Link</a>
I want to change the last parameter date to the date selected in date field and then click the link so that it can bring the latest data as per given date.
The day of the selected date is taken as an argument that is appended to the URL in the href
attribute, so the posts with id
s 1 to 31 can be shown here.
I created a date field in html.
<input type="date" name="match_date" id="matchDate" onchange="filterMatchByDate(event)" min="2021-01-01" max="2021-12-31">
There is an anchor tag
<a href="/winwin_match/fresh-block-data/all-competitions/2021-01-17" class="use-ajax hide " id="refreshBlock">My Link</a>
I want to change the last parameter date to the date selected in date field and then click the link so that it can bring the latest data as per given date.
here is my javascript code
function filterMatchByDate(e) {
let refreshBlock = document.getElementById('refreshBlock');
let hrefValue = refreshBlock.getAttribute("href");
let splitHref = hrefValue.split('/');
splitHref[splitHref.length - 1] = e.target.value;
refreshBlock.href = splitHref.join('/');
refreshBlock.click();
}
I am able to change the href but when clicked this link via javascript refreshBlock.click();
it triggering the old url not the updated url.
EDIT
One thing I want to mention here is the html is generated via ajax. There are some other filters as well and when then clicked I am creating a fresh html based on ajax response. So on each ajax response a link will be replaced by new html but link parameter could be different.
Your markup and javascript worked perfectly for me. Did you check refreshBlock.href through console log or something before the refreshBlock.click() line?
I used console.log and it prints correct url, however when call click method it clicks old url.
I am able to construct the url, the problem is click event still clicking the old url not the modified url.