I have an input field and a select tag like the following:

<input type="text" id="domain"/>
   <select>
     <option value=""></option>
     <option value=""></option>
     <option value=""></option>
   </select>
<input type="submit" value="check" />

User enters a domain name, select a tld (domain extension) from the list, then check for domain.

It won't work if the user insert (mynewdomain) in the input field, for example. The user must separately insert domain name in the input and select an extension from the list without putting it in the input field, otherwise an error will occur.

I will hide the select tag, so I need to do the following on click of the check button:

1. Make the input match and call an extension from the select option by its value when the user insert a domain name. For example, if the user inserts (mynewdomain), then it should auto select that extension from the option list by its value "".
2. Delete the extension from the input field (, , etc.) that was added by the user.

Then sending to server...

Updated JSFiddle example explains what I'm trying to do.

How can I achieve this using JavaScript or jQuery? I'd greatly appreciate it if anyone can help me with an answer.

Note: PHP is encrypted, I can only workaround with JavaScript and jQuery.

I have an input field and a select tag like the following:

<input type="text" id="domain"/>
   <select>
     <option value=".">.</option>
     <option value=""></option>
     <option value=""></option>
   </select>
<input type="submit" value="check" />

User enters a domain name, select a tld (domain extension) from the list, then check for domain.

It won't work if the user insert (mynewdomain.) in the input field, for example. The user must separately insert domain name in the input and select an extension from the list without putting it in the input field, otherwise an error will occur.

I will hide the select tag, so I need to do the following on click of the check button:

1. Make the input match and call an extension from the select option by its value when the user insert a domain name. For example, if the user inserts (mynewdomain.), then it should auto select that extension from the option list by its value ".".
2. Delete the extension from the input field (., , etc.) that was added by the user.

Then sending to server...

Updated JSFiddle example explains what I'm trying to do.

How can I achieve this using JavaScript or jQuery? I'd greatly appreciate it if anyone can help me with an answer.

Note: PHP is encrypted, I can only workaround with JavaScript and jQuery.

• javascript
• jquery
• html

• I'm a little unclear on what you want. Is the select menu to always be hidden? And you want the user to be able to type in a full domain (including the ., , or ), but you want that part stripped when they click the check button and the corresponding option selected (and still hidden)? – j08691 Commented Apr 5, 2015 at 0:51

6 Answers 6

This should works good

$(document).ready(function(){
    var tldArray = new Array();
  
    // Store each option value into tldArray
    $("select.hide > option").each(function(){
        tldArray.push($(this).val());
    });
    
    $("#check").click(function(){
        var s = $("#domain").val().split('.');
        var choosenTld = '.'+s[s.length-1].toLowerCase(); // Get last value of the array, the TLD
        for (index = 0;index < tldArray.length;++index) {
            if (choosenTld.indexOf(tldArray[index]) >= 0 && tldArray[index].length == choosenTld.length) {
                $('select.hide').val(tldArray[index]);
                var newValue = $("#domain").val().toLowerCase().replace(tldArray[index],'');
                $("#domain").val(newValue);
            }
        }
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="domain" value="mynewdomain." />
<select class="hide">
  <option value=".">.</option>
  <option value=""></option>
  <option value=""></option>
  <option value=".co">.co</option>
</select>
<input id="check" type="submit" value="check" />

$("#domain").change(function(){
    domainstr = $("#domain").text();
    lastindex = domainstr.lastIndexOf(".");
    if(lastindex > 0 ){
        str = domainstr.substring(lastindex);
         $("select").val(str);   
    }
});  

This should do it:

    $('#domain').bind("keyup",function(event){

      var tld = this.value.split('.')[1];

      if(tld && $('select option[value="'+tld+'"]').length){
        $('select').val(tld);
        this.value = this.value.split('.')[0];
        $('form').submit();
      }


    });

Without jQuery:

You could listen to the element's input event, match the characters following the . character, and then set the value of the sibling select element:

Updated Example

document.getElementById('domain').addEventListener('input', function (e) {
    var match = e.target.value.match(/\.(?=[A-Za-z])[A-Za-z]{2,3}/g);
    e.target.nextElementSibling.value = match ? match[0].toLowerCase() : '';
});

<input type="text" id="domain"/>
<select>
  <option></option>
  <option value=".">.</option>
  <option value=""></option>
  <option value=""></option>
</select>
<input type="submit" value="check" />

Without regex, you could also use the following:

Updated Example

document.getElementById('domain').addEventListener('input', function (e) {
    var match = e.target.value.split('.');
    e.target.nextElementSibling.value = match ? '.' + match[match.length - 1].toLowerCase() : '';
});

Original Code <br />
<input type="text" id="domain"/>
<select>
  <option></option>
  <option value=".">.</option>
  <option value=""></option>
  <option value=""></option>
</select>
<input type="submit" value="check" />

Something like this

$(document).on("click", "#newSubmit", function(){
    var input = $("#newDomain").val();
    var stringLength = input.length;
    var lastFourLetters = input.substr(stringLength - 4);
    if(lastFourLetters == '.' || lastFourLetters =='' || lastFourLetters == ''){
        // Changes the select value
        $("#newSelect option[value='" + lastFourLetters + "']").prop("selected", "selected");
        var newString = $("#newDomain").val().substr(0, stringLength -4 );
        // Takes out the address extension
        $("#newDomain").val(newString);
    } 
});

JSFiddle

One other simple way to do this would be to just use indexOf to see what extension is present and then strip it. Keep in mind, you'll want to do a little bit more error handling to make sure what you're trying to do will fit the requirements:

HTML

<!DOCTYPE Html />
<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="text" id="domain" />
            <select id="domainExtension">
                <option value=".">.</option>
                <option value=""></option>
                <option value=""></option>
            </select>
        <input type="submit" value="check" id="btnCheck"/>
        <script type="text/javascript" src="theJS.js"></script>
    </body>
</html>

JAVASCRIPT

var btnCheck = document.getElementById("btnCheck");
var elDomain = document.getElementById("domainExtension");
var inputDomain = document.getElementById("domain");
btnCheck.onclick = function () {
    var theExtension = getDomainExtension(inputDomain.value);

    if (theExtension != false) {
        elDomain.value = theExtension;
        inputDomain.value = inputDomain.value.toString().replace(theExtension, "");
    }
    else {
        alert("Extension not valud");
    }

}

function getDomainExtension(url) {

    if (url.indexOf(".") > -1) {
        return ".";
    }
    else if (url.indexOf("") > -1) {
        return "";
    }
    else if (url.indexOf("") > -1) {
        return "";
    }
    else {
        return false;
    }
}