Update Text only once after clicking button

September 12, 2022

Currently my project looks like this:
https://jsfiddle.net/AllmightyChaos/w9jm4bgr/9/

After you’d click on one of the buttons, it should fill or replace the text, so its a valid E-Mail Adress.

For example, if you have test123 and click on the gmail-button, it should insert @gmail.com after it.
But if you have test123@outlook.com, it should remove the "@outlook.com" and replace it with the text on the button. (clicking on gmail-button = test123@gmail.com and so on…)

Short form:
If you click onto the button, remove all after the "@" and replace it with the text that is in the button.

Thanks! 🙂

>Solution :

Using regular expressions you can easily remove the suffixes. Try this:

function cleanText(value){
    return value.replace(/(@.+.com)$/, '')
}

$(function () {
    $('#gmail-button').on('click', function () {
        var text = $('#text');
        text.val(cleanText(text.val()) + '@gmail.com');    
    });
});

$(function () {
    $('#outlook-button').on('click', function () {
        var text = $('#text');
        text.val(cleanText(text.val()) + '@outlook.com');    
    });
});