Next we create a simple little event listener which we attach to these links. They will read the href attribute of the link, do a replace, then redirect the window location to the new mailto. This should do what you are looking for.
// After window loads, select all the links with the 'mailto' class.
window.onload = () => {
let mailtos = document.querySelector('.mailto');
// Attach an event listener listening for clicks
mailtos.addEventListener('click', (e) => {
// Prevent the link from triggering its normal behavior
e.preventDefault();
// Read the current mailto href
let href = e.target.getAttribute('href');
// Do a simple replace and set the window location to it. This should trigger the default application
// The user has associated with the mailto protocol. It will launch with mailto:555@vtext.com
window.location.href = href.replace('number', '555');
});
};
Hopefully you see what is being done here and adjust it as necessary.
Thank you for that, I appreciate it. Not quite there yet, close though.
What I need is an input box (like a form text input) where the number can be typed in, rather than hard code the 555. So rather than the 555@ it will be the number@ (from the input box).
I have a list of about 10 cell carriers with the same concept. When I put the class on the others, the 555@ doesnât work. Does the class=âmailtoâ code only work with the first one, or just one a href?
I wanted one text box and regardless of the email linked, the number would insert. Or I could have a separate input box next to each of the cell carrier numbers.
The solution I showed was an example⌠I put a hard coded â555â in there to show you where to put your value. So the only thing you have to do is instead read from the input and put its value there. Why not try to do this yourself? Do a search for how to read values from an input box.
As for multiple links⌠you can select them all and then use a forEach to loop through them, attaching an event listener to them.
// After window loads, select all the links with the 'mailto' class.
window.onload = () => {
let mailtos = document.querySelectorAll('.mailto');
// Attach an event listener listening for clicks
mailtos.forEach(element => element.addEventListener('click', (e) => {
// Prevent the link from triggering its normal behavior
e.preventDefault();
// Read the current mailto href
let href = e.target.getAttribute('href');
// Do a simple replace and set the window location to it. This should trigger the default application
// The user has associated with the mailto protocol. It will launch with mailto:555@vtext.com
window.location.href = href.replace('number', '555');
}));
};
This is where I get lost. I see that you replaced ânumberâ with myInput.value.
What I donât understand is does myInput go into the id of the form? I tried that with no results. Because apparently there is more to it than that because you add a const myInput line and I donât know where that belongs because I though all I needed was to add an input box to the original input form.
Oh, I have read up on it but donât understand it. I am not a professional coder and I am pretty good with ASP and SQL. But I donât get JS, sorry! I know pro coders that are not good at it either, that tells me it isnât all that easy. I look at this forum to get coding or examples, like other websites that have forums, to place on my websites. But I do thank you for your attempt and I wish I had your knowledge to help someone else. There is a definitely a few really smart coders on this forum, certainly you are one of them and of course @James_Hibbard is another brilliant guy. Wish I had a fraction of what you both know. But I appreciate your time, thank you.
This is the form that I put together, but not sure if correct. (My ASP form code is different)
<form class="mailto">
<center><input type="text" placeholder="Your number here" id="myInput"></center>
</form>
I took out all of the asp code that puts users name in the email and subject line and onclick tracking code, etc.
So I simplified this with breaks to see that I have 4 cell carriers for this example.
Eventually, more will be added that will be inserted into the loop, once I understand how that works in JS.
I added the class to each mailto link. Perhaps thatâs not the best way to do that, but I think it works. Certainly willing to learn a better way to do that.
<script>
// After window loads, select all the links with the 'mailto' class.
window.onload = () => {
let mailtos = document.querySelector('.mailto');
// Attach an event listener listening for clicks
mailtos.addEventListener('click', (e) => {
// Prevent the link from triggering its normal behavior
e.preventDefault();
// Read the current mailto href
let href = e.target.getAttribute('href');
// Do a simple replace and set the window location to it. This should trigger the default application
// The user has associated with the mailto protocol. It will launch with mailto:555@vtext.com
window.location.href = href.replace('number', 'myInput.value');
});
};
</script>
Note that when the input is empty, the carrier list with the âclick hereâ links is not displayed. As soon as you type something in the box, then each of the links is displayed and the href attribute is populated with the correct value.
As @Martyr2 says, it would be good for you to understand what is going on here, so please ask if there is anything you donât understand.
Thatâs very good!! There is noway I could come up with that! Even though I donât understand the JS, I do understand what you did, to some degree!
So a couple of questions or comments:
I see where the looping takes place with the forEach.
I am guessing there are multiple ways of doing this if you understand JS? Your way seems different than @Martyr2, which I am sure if I had a better understanding, it would of worked.
I get what you did because I incorporated it with my ASP and it worked.
I like the fact that the carrier names donât show until you start typing. Is the reason because the event doesnât fire until you starting typing?
In summary, this is probably even more than I was looking for - better that is! Thanks for this and please know that I really appreciate your knowledge and the time you took to do it. It really helps.
