Send a value to a second input field from first input field selection

Question

I have 2 input fields. When I select option from 1 input field let's say "Bahamos Bank" I want to get this country "Bahamos" to second input field there're option - "Bahamos - BS". Don't know where to start. Can you give me some recommendations ? I can do it with jQuery or I need to use Ajax for it?

All number 2 input field options i have in php file. I using Laravel PHP framework.

Answer 1

You can bind on focusout event in first input, and update second input value when focus event fire;

First Input : <input type="text" id="input1"> </input><br/>
      Second Input: <input type="text" id="input2"> </input>

      <script>

        document.getElementById("input1").addEventListener('focusout',function () { 
            document.getElementById("input2").value = this.value;
        });   
      </script>

Answer 2

You can use jQuery to make an Ajax call. You could do something like this on the front end.

<script>
$(document).ready(function(){
    $('#idOfFirstInput').change(funcntion() {
         $.ajax({
            url: 'PHP_Controller_Function_You_Write',
            data: { 
                'bank_type': ('#idOfFirstInput').val()
            },
            type: 'POST',
            success: function(response) {
                ('#idOfSecondInput').val(response.country);
            }
        });
    });
});
</script>

This says, when the page is loaded, every time the first input is changed, use jQuery to make an Ajax call. You'll need to create a PHP function to that accepts the value of the first input, and returns Json that has a property 'country', which will set the value of the 2nd input when the Ajax call succeeds. Make sure your input have id="Whatever" tags so that jQuery can access them like $('#Whatever').

Answer 3

Maybe something like this?

 <select class="dropdown"> <option value="-">Please select..</option> <option value="Netherlands">Netherlands Amsterdam</option> <option value="Germany">Germany Berlin</option> <option value="Russia">Russia Moscow</option> </select> <input class="country" readonly type="text" value="" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $('document').ready(function(){ $('.dropdown').change(function(){ $('.country').val($(this).val()); }); }); </script>