Update form field based upon another form field

Question

I have a form field, called customer. I have a 2nd form field called "gatecode". I want to be able to select a customer(which works right now via an autocomplete script), and upon select of an existing customer, auto-populate the corresponding "gatecode" for that customer. Is this possible?

Right now what happens is the 2nd form field is blank upon load, and it overwrites the "gatecode" whenever the form is saved.

Corresponding Customer Code :

<input data-type="customerName" value="<?php echo isset($invoice['Client']['customerName']) ? $invoice['Client']['customerName']: ''; ?>"  type="text" class="form-control" id="clientCompanyName" placeholder="Company Name">

Gate Code

  <input type="text" class="form-control" id="customer_GateCode_modal" name="customer_GateCode_modal" placeholder="Gate Code">

Current Jquery code :

$('#clientCompanyName').autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : 'ajax.php',
            dataType: "json",
            method: 'post',
            data: {
                name_startsWith: request.term,
                type: 'customerName'
            },
            success: function( data ) {

                if(!data.length){
                    var result = [
                      {
                          label: 'No Client found', 
                          value: ''
                      }
                    ];
                    response(result);
                }else{
                    response( $.map( data, function( item ) {
                        var code = item.split("|");
                            return {
                                label: code[1],
                                value: code[1],
                                data : item
                            }
                        }));
                    }
                }



            });
    },
    autoFocus: true,            
    minLength: 2,
    select: function( event, ui ) {
        if( typeof ui.item.data !== "undefined" ){
            var names = ui.item.data.split("|");
            $(this).val(names[1]);
            getClientAddress(names[0]);
            //getAlarmCode(names[0]);
            //getOtherData(names[0]);
            //getOtherData2(names[0]);
            //getOtherData3(names[0]);
            //getOtherData4(names[0]);
            $('#client_id').val( names[0] );
        }else{
            return false;
        }

    }               
});
function getClientAddress(id){

     $.ajax({
         url: "ajax.php",
         method: 'post', 
         data:{id:id, type:'clientAddress'},
         success: function(result){
            $("#clientAddress").html(result);
        }
     });
}
function getAlarmCode(id){

     $.ajax({
         url: "ajax.php",
         method: 'post', 
         data:{id:id, type:'alarmcode'},
         success: function(result){
            $("#alarmcode").html(result);
        }
     });
}

Current Post Code(for alarmcode value) :

if(isset($_POST['type']) && $_POST['type'] == 'alarmcode' ){
    $id = $_POST['id'];
    $query = "SELECT id, alarmcode FROM customers WHERE id =$id";
    $result = mysqli_query($db->con, $query);
    $data = mysqli_fetch_assoc($result);
    $alarmcode = '';
    if(!empty( $data )){
        $alarmcode = isset($data['alarmcode'])? $data['alarmcode']: ''; 
    }
    mysqli_close($db->con);
    echo $alarmcode;exit;
}

You want something to happen when a field is changed. Bind the `.change()` event to that element using jQuery. In the event handler do the whatever-you-need-to-do to change the *other* field. Try looking at the example on the documentation page. — Draco18s no longer trusts SE, Jan 15 '16 at 21:12
There are a number of ways to achieve this. How have you stored the customer/gatecode data? In a database? As a JavaScript object? — showdev, Jan 15 '16 at 21:15
All the example on the page does is change an element that is on the page already with the same content already labelled - changing a div to show the selected form field in that case. I need to basically do an in page reload of only that form field, pulling the comparable sql code — Steven, Jan 15 '16 at 21:15
Here is one method that might be helpful: [jquery populate text input from table based on select value](http://stackoverflow.com/questions/3657127/jquery-populate-text-input-from-table-based-on-select-value) — showdev, Jan 15 '16 at 21:17
The general idea is to use AJAX to pass data about the selected ` — showdev, Jan 15 '16 at 21:30

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

uses jQueryUi. jQueryUi offers an auto complet function that calls to a webservice (that is the ajax call). you need to pass in what you re searching for ('{value:"' + request.term + '"}'). it expects a list of items with clientCompanyName and gatecode elements. whensomething is selected from the list of available items the gate code is updates. when focus is recieved on an item both text boxes are updated.

$("#clientCompanyName").autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: //webservicecall,
                    dataType: "json",
                    data: '{value:"' + request.term + '"}',
                    success: function(data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.clientCompanyName,
                                value: item.gateCode
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function (event, ui) {
                event.preventDefault();
                $("#clientCompanyName").val(ui.item.key);
                $("#customer_GateCode_modal").val(ui.item.value);
            },
            focus: function (event, ui) {
                event.preventDefault();
                if (ui.item != null) {
                    $("#clientCompanyName").val(ui.item.key);
                    $("#customer_GateCode_modal").val(ui.item.value);
                }
            }
        }

Reference:

jQueryUI AutoComplete

I second that :D a little trippy around jquery, mainly a php person :D — Steven, Jan 15 '16 at 21:25
Where does it talk with the sql database? Also, can I edit it to where it puts out values to 3 other form fields at the same time? — Steven, Jan 15 '16 at 21:32
This calls to the server through a webservice. The server then queries the db and responds with a Json response of all of the user code pairs that match what was entered for the user name. a list is displayed client side for the user to pick from. once selected the gatecode is populated — Mat Forsberg, Jan 15 '16 at 21:34
to add info to three other fields you would return the info as an element of the items returned from the server and update their textboxes accordingly — Mat Forsberg, Jan 15 '16 at 21:35
how do I use the webservice part? edit : NM, figured that out. Still unsure how to tie in the locations, uploading my code now — Steven, Jan 15 '16 at 21:46

Update form field based upon another form field

1 Answers1

Reference: