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?

Answer 1

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"/> 

Answer 2

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"/>