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:
".com"
. 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.
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:
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:
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" />
$("#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();
}
});
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);
}
});
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" />
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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.