Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

EasyAutocomplete Form Fields are not Sent on Form Submission

See original GitHub issue

I’ve successfully implemented EasyAutoComplete with an address form.

On the back-end, I have a DB table with all of the Villages in Uganda. Each record contains a village, sub-county and district.

The address form contains a text input for each of these fields:

<input type="text" class="form-control" name="S_Village_Edit" id="S_Village_Edit" onkeyup="msgClear('S_Address_Msg');"  onclick="console.log(this.value); "/> 

<input type="text" class="form-control" name="S_SubCounty_Edit" id="S_SubCounty_Edit" onkeyup="msgClear('S_Address_Msg');"  onclick="console.log(this.value); "/>

<input type="text" class="form-control" name="S_District_Edit" id="S_District_Edit" onkeyup="msgClear('S_Address_Msg');" onclick="console.log(this.value); "/>

Here is my EasyAutoComplete code:

<script>
var options_Village = {
    url: function(phrase) {
        return "Uganda_Villages.asp?type=village&phrase=" + document.getElementById('S_Village_Edit').value + "&format=json";
    },

    getValue: function(element) {
        return element.village;
    },

    template: {
        type: "description",
        fields: {
            description: "district"
        }
    },

    list: {
        onSelectItemEvent: function() {
            var selectedItemValue_SubCounty = $("#S_Village_Edit").getSelectedItemData().subcounty;

            var selectedItemValue_District = $("#S_Village_Edit").getSelectedItemData().district;

            $("#S_SubCounty_Edit").val(selectedItemValue_SubCounty).trigger("change");
            $("#S_District_Edit").val(selectedItemValue_District).trigger("change");
        }
    }

};

var options_SubCounty = {
    url: function(phrase) {
        return "Uganda_Villages.asp?type=subcounty&phrase=" + document.getElementById('S_SubCounty_Edit').value + "&format=json";
    },

    getValue: function(element) {
        return element.subcounty;
    },

    template: {
        type: "description",
        fields: {
            description: "district"
        }
    },

    list: {
        onSelectItemEvent: function() {
            var selectedItemValue_District = $("#S_SubCounty_Edit").getSelectedItemData().district;

            $("#S_District_Edit").val(selectedItemValue_District).trigger("change");
        }
    }

};

var options_District = {
    url: function(phrase) {
        return "Uganda_Villages.asp?type=district&phrase=" + document.getElementById('S_District_Edit').value + "&format=json";
    },

    getValue: function(element) {
        return element.district;
    }
};

$("#S_Village_Edit").easyAutocomplete(options_Village);
$("#S_SubCounty_Edit").easyAutocomplete(options_SubCounty);
$("#S_District_Edit").easyAutocomplete(options_District);
</script>

EasyAutoComplete works correctly for each of these fields. When I type the first four letters of a village (ex: Nsasa), the correct options are displayed and sub-county and district fields are autopopulated.

I can verify that the values of the form fields are correct with a console log printout onclick. After autocomplete, each of the 3 fields have the correct values.

But when I submit my form, the values aren’t passed through. I have verified this with print-outs on the submission page:

Response.Write("Village: "& Request.Form("S_Village_Edit") &"<br><br>")
Response.Write("SubCounty: "& Request.Form("S_SubCounty_Edit") &"<br><br>")
Response.Write("District: "& Request.Form("S_District_Edit") &"<br><br>")

These all come out empty.

I have confirmed that this is because of EasyAutoComplete by changing the ids of the fields so that the script doesn’t fire. When I submit, the form field values are sent.

I would be very grateful for any helpful advice.