CODEWITHSUNDEEP
javascriptjqueryhtml
Mina Hafzalla
Mina Hafzalla

Reputation: 2821

Match an input text with a value of an option and auto select it

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

<input type="text" id="domain"/>
   <select>
     <option value=".com">.com</option>
     <option value=".net">.net</option>
     <option value=".org">.org</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.com) 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.com), then it should auto select that extension from the option list by its value ".com".
  2. Delete the extension from the input field (.com, .net, 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.

Upvotes: 1

Views: 4511

Answers (6)

DrKey
DrKey

Reputation: 3495

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="domain" value="mynewdomain.com" />
<select class="hide">
  <option value=".com">.com</option>
  <option value=".net">.net</option>
  <option value=".org">.org</option>
  <option value=".co">.co</option>
</select>
<input id="check" type="submit" value="check" />

Upvotes: 1

mwilson
mwilson

Reputation: 12900

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=".com">.com</option>
                <option value=".net">.net</option>
                <option value=".org">.org</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(".com") > -1) {
        return ".com";
    }
    else if (url.indexOf(".org") > -1) {
        return ".org";
    }
    else if (url.indexOf(".net") > -1) {
        return ".net";
    }
    else {
        return false;
    }
}

Upvotes: 1

Lloyd Banks
Lloyd Banks

Reputation: 36648

Something like this

$(document).on("click", "#newSubmit", function(){
    var input = $("#newDomain").val();
    var stringLength = input.length;
    var lastFourLetters = input.substr(stringLength - 4);
    if(lastFourLetters == '.com' || lastFourLetters =='.net' || lastFourLetters == '.org'){
        // 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

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240878

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=".com">.com</option>
  <option value=".net">.net</option>
  <option value=".org">.org</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=".com">.com</option>
  <option value=".net">.net</option>
  <option value=".org">.org</option>
</select>
<input type="submit" value="check" />

Upvotes: 1

Kosmas Papadatos
Kosmas Papadatos

Reputation: 1317

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();
      }


    });

Upvotes: 1

Omidam81
Omidam81

Reputation: 1917

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

Upvotes: 1

Related Questions