CODEWITHSUNDEEP
javascriptjquery
crystyxn
crystyxn

Reputation: 1621

Getting the URL's domain from a string in jQuery

So I've got a textbox the user can write a URL.

I've got a dropdown menu with countries' flags and their codes.

What I want to achieve is when a user types a URL, the flag will be changed to the URL's domain. Example: if the user types google.com, the dropdown should choose the value after the dot, choosing the United States flag.

I am using this library: https://github.com/mrmarkfrench/country-select-js

Here is my HTML code:

<form method="post">
    <input type="hidden" name="addsite" value="true" />
    <p>
        <label for="site_url">Site url:</label>
        <input type="text" name="site_url" id="urlText" placeholder="domain.xxx" value=""  />
    </p>
    <label for="site_url">Search locale:</label>
    <input id="country_selector" type="text">
    <label for="site_url"></label>
    <br>
    <br>
    <input type="submit" name="submit" class="btn" value="Add">
</form>

And here are the scripts:

//the script to initalize the dropdown
$("#country_selector").countrySelect({
    defaultCountry: "dk",
    //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
    preferredCountries: ['dk', 'gb', 'us', 'ca']
});

//script to change the dropdown value
$('#urlText').change(function changeCountry(string selectedCountryValue) {
    $("#country_selector").countrySelect("selectCountry", $selectedCountryValue);
});

//script I've attempted to write
(function($) {
    $('#urlText').on('change', function() {
        var value = this.value,
            parts = this.value.split('.'),
            str, $opt;
        for (var i = 0; i < parts.length; i++) {
            str = '.' + parts.slice(i).join('.');
            $opt = $('#country_selector selectCountry[value="' + str + '"]');
            if ($opt.length) {
                $opt.prop('selected', true);
                break;
            }
        }
    })
})(jQuery);

So the last two scripts are faulty. How can I write them so changeCountry function takes a string selectedValue and then the last function should call changeCountry(str) ?

EDIT: I think I might have made fundamental jQuery mistakes even...

Upvotes: 2

Views: 269

Answers (2)

crystyxn
crystyxn

Reputation: 1621

So here is what I needed:

$('#urlText').on('change', function() {
  var parts = $('#urlText').val().split('.')
  var domain = parts[parts.length - 1]
    $("#txtUrls").val(domain);
    $("#country_selector").countrySelect("selectCountry", domain);
})

Upvotes: 1

jonofan
jonofan

Reputation: 381

Here is an example of how you can get the domain suffix portion of your url.

$('#btnGetUrlDomain').on('click', function() {
  var parts = $('#txtUrl').val().split('.')
  var domain = parts[parts.length - 1]
  console.log(domain)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='txtUrl' type='text' value='www.google.com' />
<button id='btnGetUrlDomain'>
Get URL
</button>

So then you would just call the country-select-js countrySelect method.

$('#btnGetUrlDomain').on('click', function() {
  var parts = $('#txtUrl').val().split('.')
  var domain = parts[parts.length - 1]
  $("#country_selector").countrySelect("selectCountry", domain);
})

Upvotes: 1

Related Questions