Domain TLD Double Ups

[daddy]

One issue we experienced when starting out with ClientExec was the fact that many customers were manually typing out their domain name and not clicking the TLD selector/dropdown.

Clientexec would then proceed to ATTEMPT to register domain.com.com instead of realising it is just domain.com

I fixed this by making it so if you hit the "." it opens the dropdown.

I modified the file:

templates/order_forms/default_domains/signuppublic/cart1.phtml

Just added this to the bottom:

$(document).ready(function(){
    // Dot Key Dropdown
    $('.first_domain_name, .transfer_domain').on('keydown', function(e){
        if(e.key === '.'){
            var $input = $(this);
            var $select = $input.hasClass('first_domain_name') ? $('.domain_extension') : $('.transfer_extension');
            $select.focus();
            if($select.hasClass('select2-hidden-accessible')){
                $select.select2('open');
            } else {
                $select.trigger('mousedown');
            }
        }
    });
});

Now when the user attempts to add a "." to the text input field it just opens the dropdown.
I thought this was a handy little trick and decided to share it here.

 

[daddy]

Of course put this in a SCRIPT tag. For some reason the forum won't let me add this here.

 

[daddy]

I got a bit excited and told ChatGPT and significantly improved it. So that people can't even copy paste domain names wrong. With the below code it will now auto-select the TLD when copy pasting and remove any accidental characters that were copied over. I found this useful in domain transfers cause people tend to copy paste stuff there.

$(document).ready(function(){
    // Function to extract domain and tld from a pasted string
    function extractDomainParts(input) {
        var domain, tld;
        try {
            // Use the URL constructor if possible
            var url = new URL(input);
            domain = url.hostname;
        } catch(e) {
            // Fallback: regex to remove protocol and www
            var matches = input.match(/^(?:https?:\/\/)?(?:www\.)?([^\/\s]+)/i);
            domain = matches ? matches[1] : input;
        }
        // Remove leading www.
        domain = domain.replace(/^www\./i, '');
        var parts = domain.split('.');
        if(parts.length > 1) {
            tld = parts.pop();
            domain = parts.join('.');
        } else {
            tld = '';
        }
        // Sanitize: allow only letters, digits, and hyphen
        domain = domain.replace(/[^a-zA-Z0-9-]/g, '');
        tld = tld.replace(/[^a-zA-Z0-9-]/g, '');
        return { domain: domain, tld: tld };
    }

    // Keydown: prevent invalid characters and intercept the dot key
    $('.first_domain_name, .transfer_domain').on('keydown', function(e){
        if(e.key.length > 1) return; // allow control keys
        if(e.key === '.'){
            var $input = $(this);
            var $select = $input.hasClass('first_domain_name') ? $('.domain_extension') : $('.transfer_extension');
            $select.focus();
            if($select.hasClass('select2-hidden-accessible')){
                $select.select2('open');
            } else {
                $select.trigger('mousedown');
            }
            e.preventDefault();
            return;
        }
        // Only allow letters, numbers, and hyphen
        if(!/[a-zA-Z0-9-]/.test(e.key)){
            e.preventDefault();
        }
    });

    // Paste: extract domain parts and update both the textfield and dropdown accordingly
    $('.first_domain_name, .transfer_domain').on('paste', function(e){
        e.preventDefault();
        var clipboardData = (e.originalEvent || e).clipboardData.getData('text');
        var parts = extractDomainParts(clipboardData);
        var domainVal = parts.domain;
        var tldVal = parts.tld;
        // Insert the sanitized domain into the textfield (without the dot)
        if(document.queryCommandSupported('insertText')){
            document.execCommand('insertText', false, domainVal);
        } else {
            $(this).val(domainVal);
        }
        // If a TLD was extracted, try to match and update the dropdown selection
        if(tldVal){
            var $select = $(this).hasClass('first_domain_name') ? $('.domain_extension') : $('.transfer_extension');
            $select.find('option').each(function(){
                var optionText = $(this).text().trim().toLowerCase();
                if(optionText === tldVal.toLowerCase()){
                    $select.val($(this).val()).trigger('change');
                    return false; // break out of the loop
                }
            });
        }
    });
});