Auto Populate Field Base on What Was Entered in Another Field Simultaneously

Auto populate field base on what was entered in another field simultaneously

I made a js fiddle based on what you're asking for.

HTML

Home Address:
<input id="address" name="address" type="text" />
<br/>Apt or Suite Number:
<input id="suite" name="suite" type="text" />
<br/>City/Town:
<input id="city" name="city" type="text" />
<br/>State:
<select id="state" name="state" value="">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
</select>
<br/>Zip:
<input id="zip" name="zip" type="text" value="" />
<br/>
<p>Select Shipping Address Below:</p>
<input type="checkbox" id="shipping-address-1" name="address1" value="">
<label for="shipping-address-1" id="shiadd1">(Print auto-populated shipping address here...)</label>
<input type="checkbox" id="shipping-address-2" name="address2" value="">
<label for="shipping-address-2">ABC Corp 123 Main Street, My City, State Zip</label>

JavaScript

$("#address,#suite,#city,#state,#zip").change(function () {
    var addressArray = [$("#address").val(), $("#suite").val(), $("#city").val(), $("#state").val(), $("#zip").val()];
    $("#shiadd1").text(addressArray.join(' '));
});

how to populate form fields on the basis of other field's value in html using javascript

From what I understand; When a user writes 'A', a javascript should run and put 'B' in the other field.

If so, in my following code, I first placed an onchange function, meaning it will only run when the user clicks away from the textbox (You can instead use an onsubmit and a submit button, I just used this to avoide using a form). It will call the function "autofill()". autofill() has 3 lines of code, the first will search the document for an id "field1" and gets its value and saves it as variable x. The second will compare that to a hard coded character 'A', if it equals A it will then move to the third line where it will place 'B' in the second field with id "field2".

HTML:

<input type='text' id='field1' onchange="autofill()">
<input type='text' id='field2'>

Javascript:

function autofill(){
    var x = document.getElementById('field1').value;
    if(x=='A')
    {
        document.getElementById('field2').value= 'B';
    }
}

You can create multiple 'if' statments to check for other characters, or remove the if statment all together if you want it to show 'B' regardless!

Hope this helped, and don't forget to "check" the right answer!

Auto populate field based on data entered in another field

Copy/Pastable code, should not interact poorly with other JS on the page. Built for one set of elements only.

var outputController = (function(){
  function getYear(){      return document.getElementById('selectField').value;    }    function getText(){      return document.getElementById('textField').value;    }    function applyFields(text, year){        document.getElementById('output').value = text().trim().replace(/[^a-zA-Z\d\s]/g, '').replace(/ /g, '-').toLowerCase()+'-'+year();    }  function setListeners(){        document.getElementById('textField').addEventListener('keyup', function(){                applyFields(getText, getYear);            });            document.getElementById('selectField').addEventListener('change', function(){                applyFields(getText, getYear);            });    }    return {      init: function(){          setListeners();        }    }
})();
outputController.init();

.inputWrapper {
  width: 100%;  text-align: center;  margin-bottom: 1em;
}
#output {
  display: block;  width: 90%;  margin: 0 auto;  height: 50px;
}

<div class="inputWrapper"><input id="textField"></input><select id="selectField"><option>2017</option><option>2016</option><option>2014</option></select></div><textarea type="textarea" id="output"></textarea>

Auto populate a field based on the value of the other field

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.

Autofill <select> from MySQL and auto-populate <input> fields

You are using the same id for all of your input boxes. id is a unique property, you should be using different ids on each of your inputs. Add a common class to your drop downs and change your event handler to the class of your select elements. Then change your setting of the description and price inputs using jquery functions .closest and .next and .find, like so:

Change each of your select's like so:

<p><select class='nameItems' name="items[]">

Change each of your inputs like so:

<p>Description:<input type="text" class="description" name="description[]" value=""></p>
<p>Price: <input type="text" class="price" name="price[]" value=""></p>

Then in your script, change to this:

$( ".nameItems").click(function() {
            const itemSelected = $(this).val();
            const $selectedElement = $(this); //Store a reference to the select element

            $.each(JSON.parse(dataSource), function( index, value ) {
                var itemType = value.item;

                if(itemSelected == itemType){
                    // Extract related Craft values from JSON object
                    var description = value.description;
                    var price = value.price;

                    // Place craft value in respective INPUT box
                    $selectedElement.closest('p').next('p').find('input').val(description);
                    $selectedElement.closest('p').next('p').next('p').find('input').val(price);
                }

            });
        });

Auto populate second EditText based on first EditText input

I think you should use TextWatcher.

Just get value from edittext1
Find appropriate text for edittext2

Set text to second edittext.

edittext.addTextChangedListener(new TextWatcher() {

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        // do some stuff

    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count,
            int after) {
        // do some stuff

    }

    @Override
    public void afterTextChanged(Editable s) {
        // do some stuff

    }
});

How to populate the values of one field to another field in angular?

change your second input to be like this :

<input
    [value]="form.get('fullname').value"
    type="text"
    formControlName="username"
    class="form-control"
    [ngClass]="{ 'is-invalid': submitted && 
    f.username.errors }"
/>

Auto Populate Field Base on What Was Entered in Another Field Simultaneously