2

I don't know what is getting wrong in my created function. I was trying to create a beautiful country selector. But it looks like this selector is gonna select nothing. Just joking, so my problem is according to my thinking my function should change the value of a input field classed as country_input on clicking multiple series of links. But it looks like it is not gonna work. But you guys can tell me how to achieve my goal.

-:::- HTML CODE -:::-

<input type="text" class="country_input" />
<br><br>
<a href="#country-select" id="Change-1" onclick="change_country();" >Country-1</a>
<a href="#country-select" id="Change-2" onclick="change_country();" >Country-2</a>
<a href="#country-select" id="Change-3" onclick="change_country();" >Country-3</a>
<a href="#country-select" id="Change-4" onclick="change_country();" >Country-4</a>
<a href="#country-select" id="Change-5" onclick="change_country();" >Country-5</a>
And so on....

-:::- jQuery CODE -:::-

jQuery.fn.change_country = function () {

                            var country_name = $(this).innerHTML;

                            $('input.country_input').val(country_name);

                          };

-:::- CSS CODE -:::-

body a { text-decoration: none; display: block; width: 50%; color: #555; background: rgb(240, 240, 240); border: 2px solid #000; border-style: none none solid none; font-family: calibri,segoe ui,arial, sans-serif; font-size: 12px; padding: 3px 5px; }

body a:hover { color: #000; background: #fff; }

body input { font-family: calibri,segoe ui,arial, sans-serif; font-size: 12px; padding: 3px 3px; width: 50%; outline: none; }

So can anyone help me out with this. As I'm a new comer in creating jQuery based functions so please help me out.

Am I doing wrong function defining? Am I missing something? Is my code is totally failure?

LIVE DEMO

THANKS IN ADVANCE!

Improve this question

4 Answers 4

Reset to default
1

This works:

<script type="text/javascript">
$(document).ready(function(){
    $('.countryLink').click(function(){
        var innerText = $(this).text();
        $('.country_input').val(innerText);
    });
});
</script>

And HTML:

<input name="Text1" type="text" class="country_input"/>
<br/>
<a href="#country-select" id="Change-1" class="countryLink">Country-1</a>
<a href="#country-select" id="Change-2" class="countryLink">Country-2</a>
<a href="#country-select" id="Change-3" class="countryLink">Country-3</a>

See working example at jsfiddle.

Edit: I guess that you might want to use dropdown in scenario like this (too many options). Then you can do it like this: 

$(document).ready(function(){
    $('.countryDropDown').change(function(){
        var innerText = $(this).children(':selected').text();
        $('.country_input').val(innerText);
    });
});

With HTML: 

<input name="Text1" type="text" class="country_input"/>
<br/>
<select name="Select1" class="countryDropDown">
    <option value="c1">Country-1</option>
    <option value="c2">Country-2</option>
    <option value="c3">Country-3</option>
</select>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

@Jack Billy: Np, glad to help. I edited my answer in case you would like to use dropdown for selection.
0

Looks to me that the problem is you're adding the change_country function into jQuery, but when you're calling it, you're calling it like it was a normal global function.

It should work like you have it now if you change the first JS line to this:

var change_country = function() {

This would make it a global function, and then the call to it should work.

On a secondary note, all your a elements have the same ID - This is incorrect, as an element's ID should be unique.

Improve this answer

1 Comment

Please see this jSfiddle and tell what am I doing wrong? jsfiddle.net/divinemamgai/nWrAt
0

You could try this:

<input type="text" class="country_input" />
<br>
<div class="country-select">Country-1</div>
<div class="country-select">Country-2</div>
<div class="country-select">Country-3</div>
<div class="country-select">Country-4</div>

<script type="text/javascript">
$(function(){
    $(".country-select").click(function(){
        $('input.country_input').val($(this).innerHTML);
    });
});
</script>
Improve this answer

3 Comments

Sorry but your doesn't seem to be working! But thanks anyways.
I know why it is not working because you have included innerHTML directly. Please use text() function in future. Anyways thanks.
Sorry, I haven't thought about that, just copied it.
0

I think youre confused about how you want to implement this. Youve defined your function in the jQuery.fn namespace which is where you typcially would put a jQuery plugin that works on a set of DOM elements. But then you try and call that function directly with an onclick atribute on the element pointing to change_country which doesnt exist. If you were to call the function in this way it would actually be:

onclick="jQuery.fn.change_country()"

But i dont think thats what you really want to do. Heres how i would do it: http://jsfiddle.net/nWrAt/8/... more or less.

Improve this answer

2 Comments

Please see this jSfiddle and tell what am I doing wrong? jsfiddle.net/divinemamgai/nWrAt
add a jsfiddle update with a plugin implementation... it takes a standard select and converts it to the markup you had also adding the interactivity you were going. It also preserves the selected value if there already is one when the plugin is called.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.