CODEWITHSUNDEEP
jquerytextboxlistboxonchange
Dominor Novus
Dominor Novus

Reputation: 137

How do I change the value of a text box based on value of a select box?

I've searched online and this website alike for a simple and adaptable solution but alas, no joy.

The desired process:

  1. The user selects an <option> from a <select> list. e.g. a name.
  2. The value of a read-only text box automatically populates based on the selected <option>. e.g. a phone number corresponding to the name.
  3. Finally, both the <select> box and text box must each have their own values. i.e. a name and a phone number respectively.

The basic mark up:

When this changes, update the value of my text box:

<select id="name" name="name">
<option value="Elvis">Elvis</option>
<option value="Frank">Frank</option>
<option value="Jim">Jim</option>
</select>

Value contingent on the value of above box:

<input type="text" id="phonenumber" name="phonenumber" value="">

My question:

How do I achieve this using jQuery or regular Javascript? Please answer this from the perspective of a client side novice.

The solution (thanks to corroded):

I added the following to the head of my document:

 <script type="text/javascript" src="jquery.js"></script>          
 <script type="text/javascript">  
 $(document).ready(function() {                                       
    $("#name").live("change", function() {
      $("#phonenumber").val($(this).find("option:selected").attr("data-phonenumber"));
    })
 });                                     
 </script>

...and the following to the body of my document: 

<select id="name" name="name">
<option value="" selected="selected">Please select...</option>
<option value="Elvis" data-phonenumber="11111">Elvis</option>
<option value="Frank" data-phonenumber="22222">Frank</option>
<option value="Jim" data-phonenumber="33333">Jim</option>
</select>

<input type="text" id="phonenumber" name="phonenumber" value="" readonly="readonly">

For more information on the use of data-somename as an attribute, as suggested by corroded, refer to the following links:

http://ejohn.org/blog/html-5-data-attributes/

http://blogs.sitepoint.com/rel-not-a-custom-attribute/

Upvotes: 0

Views: 5196

Answers (4)

Nick Ramirez
Nick Ramirez

Reputation: 483

You can also do this without tying the select box and the phone numbers so tightly together. Use JSON notation to set up objects that hold all of your person's info, such as:

<script type="text/javascript">
    var people = {
        Elvis:  {
            phone: "555-5555"
            },
        Frank: {
            phone: "123-4567"
            },
        Jim: {
            phone: "987-6543"
            }
        };

    window.onload = function() {
        var list = document.getElementById("name");
        list.onchange = function() {
            document.getElementById("phone").value = people[this.value].phone;
        }   
    }
</script>

Basically, we're just creating three objects, "Elvis", "Frank" and "Jim" inside a bigger object called "people". Each object has a phone property that you can access with the dot notation, as I've done (i.e. people["Elvis"].phone), or the array notation (i.e. people.Elvis["phone"]]).

To make things easy, I am using the "this" keyword since when called from within the "onchange" event handler, it refers to the object that fired the event -- the select box. So "this.value" refers to the value on the select box.

Now your select stays pretty simple:

<select id="name" name="name">
    <option value="Elvis">Elvis</option>
    <option value="Frank">Frank</option>
    <option value="Jim">Jim</option>
</select>

<br />
<input type="text" id="phone" />

Upvotes: 0

dan
dan

Reputation: 856

I would do something like:

<select id="name" name="name">
  <option value="0123456789">Elvis</option>
  [...]
</select>

and then

$('#name').change(function(){
  var thisphone = $(this).val();
  $('#phonenumber').val(thisphone);
});

or

$('#name').change(function(){
  $('#phonenumber').val($(this).val());
});

depending on how you want to work with your variables

Upvotes: 0

mhiggins
mhiggins

Reputation: 56

You can try this.

$('#name').change(function(){
    $('#phonenumber').val($(this).val());
});

If you would like it to display the phone number just set up your HTML to have the value of each option be the phone number. For instance.

<option value="5555555555">Frank</option>

Upvotes: 0

corroded
corroded

Reputation: 21604

add a "data-phone-number" value on your options:

<option value="Elvis" data-phone-number="77777">Elvis</option>

in your jquery:

$("#name").live("change", function() {
  $("#phonnumber").val($(this).find("option:selected").attr("data-phone-number"));
})

refactor as needed :)

Upvotes: 2

Related Questions