Skip to content
Advertisement

Auto populate a field based on the value of the other field [closed]

I need a JavaScript that will let me auto-populate a text field based on another field which is a select list type.

Here is my HTML markup:

<div class="attribute-16 even"><div id="edit-attributes-16-wrapper" class="form-item">
 <label for="edit-attributes-16">Position: <span class="form-required">*</span></label>
 <select id="edit-attributes-16" class="form-select required" name="attributes[16]"><option selected="selected" value="">Please select</option><option value="32">Content</option><option value="33">Footer</option></select>
</div> </div>

<div class="attribute-17 odd"><div id="edit-attributes-17-wrapper" class="form-item">
 <label for="edit-attributes-17">Anchor Text: <span class="form-required">*</span>: </label>
 <input type="text" class="form-text attribute" value="" size="60" id="edit-attributes-17" name="attributes[17]" maxlength="128">
</div> </div>

The former field’s value will be automatically entered as the latter field’s value. That’s what I want to do here.

Advertisement

Answer

You have to add an event listener to your select field and populate its value to your text field. Your HTML is a little messy.. so I will just write the jquery in general. You can fiddle around with it.

you have to set this event listener as soon as the body is loaded. So on your HTML

<body onload="init()" id="stage" class="theme">

and on your javascript

function init() {
   $("#selectListID").on("change", function(){
      var value = $(this).val();
      $("#inputFieldID").val(value);
   };)
}

Hope this helps.

Advertisement