How do I fill a text input based on the data attribute of a select box

Question

I have a select box and an input field

<label for="contact">Contact</label>
<select id="contact" name="contact">
    <option data-phone="+14151234567" value="John Smith">John Smith</option>
    <option data-phone="+15151234567" value="Jessica Smith">Jessica Smith</option>
    <option data-phone="+16151234567" value="Jerome Smith">Jerome Smith</option>
</select>

<label for="phone">Phone</label>
<input type="text" name="phone"/>

When the user selects an option from the Contact select box, I want the option's data-phone attribute to be filled in the Phone text input.

For the user, they pick a name from a list, and the person's phone number magically autofills in the input fields below

How do I do this?

Mihai T · Accepted Answer · 2017-03-20 14:58:28Z

there is a change() method that attaches a function to run when a change event occurs. select tags work with change() method . same as checkbox or radio

so you need to 'listen' when the select is changed and see which of the options is selected ( with option:selected ) . then 'get' the data-phone attribute of the 'selected' option and add it as a 'value' to the input field.

and that's about it

also i suggest you use a 'blank' first option for the select tag. as i have used below ( <option disabled selected value> )

let me know if it works. cheers

$("#contact").change(function(){
   var phoneNr = $(this).children("option:selected").attr("data-phone")
   $("input[name='phone']").attr("value",phoneNr)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="contact">Contact</label>
  <select id="contact" name="contact">
    <option disabled selected value> --- select an option --- </option>
    <option data-phone="+14151234567" value="John Smith">John Smith</option>
    <option data-phone="+15151234567" value="Jessica Smith">Jessica Smith</option>
    <option data-phone="+16151234567" value="Jerome Smith">Jerome Smith</option>
  </select>

  <label for="phone">Phone</label>
  <input type="text"  name="phone"/>

sergdenisov · Accepted Answer · 2017-03-20 15:13:32Z

0

You could use jQuery change event, jQuery .val() and .data() functions:

var $contact = $('#contact');
$contact.on('change', fillPhone);

function fillPhone() {
    $('input[name="phone"]').val(
        $contact.find('option:selected').data('phone')
    );
}

fillPhone();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="contact">Contact</label>
<select id="contact" name="contact">
    <option data-phone="+14151234567" value="John Smith">John Smith</option>
    <option data-phone="+15151234567" value="Jessica Smith">Jessica Smith</option>
    <option data-phone="+16151234567" value="Jerome Smith">Jerome Smith</option>
</select>

<label for="phone">Phone</label>
<input type="text" name="phone"/>

edited Mar 20, 2017 at 15:13

answered Mar 20, 2017 at 14:48

sergdenisov

8,6129 gold badges52 silver badges67 bronze badges

Collectives™ on Stack Overflow

How do I fill a text input based on the data attribute of a select box

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related