It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 10 years ago. I need a JavaScript that will let me auto-populate a text field based

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>

JavaScript
​x
 
<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.

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

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

and on your javascript

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

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

Hope this helps.

Advertisement

Answer