CODEWITHSUNDEEP
jqueryinputkeyuponselect
JTJohnston
JTJohnston

Reputation: 95

JQuery Onselect?

When I type in DPRtelephonenumber I want to repeat it in DPRcallerhometelephonenumber.

This script works as long as I am typing. But if <INPUT id="DPRtelephonenumber"> offers a drop-down from a previously used value, AND I select it, <INPUT id="DPRcallerhometelephonenumber"> does not get set.

So, what do I need more than a keyup? How do I write in an onselect??

<input name="DPRtelephonenumber" id="DPRtelephonenumber" type="text">
<input name="DPRcallerhometelephonenumber" id="DPRcallerhometelephonenumber" type="text">
<script type="text/javascript">
  $(document).ready(function() {
    $('#DPRtelephonenumber').keyup(function() {
      $('#DPRcallerhometelephonenumber').val($(this).val());
    });
  });    
</script>

Upvotes: 3

Views: 13618

Answers (3)

John S
John S

Reputation: 21492

Since you are dealing with a text input element, I assume the drop-down is just the auto-completer supplied by the browser. There is no way to attach an "onselect" handler to that. You could at least attach an on-change handler to the input element.

Try changing:

$('#DPRtelephonenumber').keyup(function() {

To:

$('#DPRtelephonenumber').on('change keyup', function() {

Of course, the change event doesn't fire until the text field loses focus. If you want your event handler to execute as soon as the value of the text field changes, you could check out this question.

Upvotes: 3

faino
faino

Reputation: 3224

Something like this should do what you want:

<script type="text/javascript">
    $(function(){
        var updateHomeNum = function(obj){
            $("#DPRcallerhometelephonenumber").val(obj.val());
        };
        $("#DPRtelephonenumber").on({
            keyup: function(){
                updateHomeNum($(this));
            }, change: function(){
                updateHomeNum($(this));
            }
        });
    });
</script>

Upvotes: 1

spryce
spryce

Reputation: 607

You can use the onchange event for drop down menu's.

$('#mySelect').change(function() {
  // do stuff here;
});

Upvotes: 3

Related Questions