Append input value from select Jquery?

Question

I have select with country code

<select name="countryCode" id="">
    <option data-countryCode="GB" value="44" Selected>UK (+44)</option>
    <option data-countryCode="US" value="1">USA (+1)</option>
    <optgroup label="Other countries">
        <option data-countryCode="DZ" value="213">Algeria (+213)</option>
        <option data-countryCode="AD" value="376">Andorra (+376)</option>
    </optgroup>
</select>

On next field i have enter your phone

 <input type="text" placeholder="Enter your mobile phone" data="required" id="phone" data-content='Your mobile phone'>

What i need is when user select country code to append phone input like this If user select Algeria (+213), and when he click on input phone, to append his value like this +213, and then allow him to enter the futher number.

PeterKA · Accepted Answer · 2014-07-07 13:28:36Z

2

Use the following code:

$(function() {
    $('#phone').on('focusin', function() {
        var cc = $('select[name=countryCode]').val().replace(/^.*\(([\)]+)\).*$/,'$1');
        $(this).val( cc ).data('cc', cc);
    })
    .on('focusout',function() {
        if( this.value == $(this).data('cc') )
            $(this).val('');
        }
    });
});

OR:

$(function() {
    $('select[name=countryCode]').on('change', function() {
        var cc = this.value.replace(/^.*\(([\)]+)\).*$/,'$1');
        $('#phone').val( cc )..data('cc', cc);
    });
    $('#phone').on('focusout',function() {
        if( this.value == $(this).data('cc') )
            $(this).val('');
        }
    }); 
});

edited Jul 7, 2014 at 13:28

answered Jul 7, 2014 at 13:03

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Schneider Over a year ago

This works great txanks man, is it possible if user does not enter number, to remove that value when he moves mouse from input #phone. If value of pnone is same as value of select remove value from phone on mouse out?

Jayant Patil · Accepted Answer · 2014-07-07 13:05:25Z

0

As above code will set value in phone number but you need to set focus also as updated below

$('select').change(function(){
        $('#phone').val( $(this).val() );
        $('#phone').focus();
    });

this will help you focus on the field also on change

answered Jul 7, 2014 at 13:05

Jayant Patil

1,5872 gold badges11 silver badges18 bronze badges

1 Comment

user3559349 Over a year ago

Need to perpend the "+" symbol to val()

Collectives™ on Stack Overflow

Append input value from select Jquery?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related