Capture a change event triggered by a script (Programatically)

Hello

I have a Wordpress gravity form plugin that uses Google Address API to automatically populate address fields such as city, state, zip and country.

I have written a jQuery script that grabs the country and state and auto-populate those fields with the value and made State to be readonly.
Similarly if the user tries to change the country, the script will set back the value to the original one.

I want State to remain unchanged (readonly), the user can’t change it since it is readonly BUT the autocomplete script can change it after the user change the address using autocomplete.

The jQuery trigger() should capture the change event done programmatically, I have written the script below but the autocomplete can still change the State.

$("#input_54_3_4").trigger("change");
        $("#input_54_3_4").on('change', function(){
            console.log("Inside change")
           if ($("#input_54_3_4").val() != $("#input_54_1").val()){
            $("#input_54_3_4").val(provSelected);
                console.log("Inside if");               
                alert("Only " + provSelected +" addresses are allowed in this address field");
                $(".address_line_2 > input, .address_city > input,  .address_zip >input").val("");
           }
        });

When the user changes their address, do you want the state to remain unchanged?

Yes i want to capture the change event on State when the user use Address Autocomplete and the script change the address.

If the state is different from the one set when the page loads. I will execute my own code. I want the change to be prevented and my code executed.

I want to alert the user that he can not change the state, i will set all the fields except State and Country to .val(“”).

Why is a person not allowed to change the state that they live in?

The form receives data through a Query String from a first form. User in the first form has options to choose from (Ex: Country and State).

Country and State are using Query String to the second form

Based on the selection from the first form, the second form (containing the address Autocomplete) will receive the state and the country.

For that reason they should be uneditable by the user or by a script.

Why don’t you just set the form field to be readonly?

<input name="state" readonly value="Oregon">

I already set the state to readonly

var readOnlyFields = $(".address_line_2 > input, .address_city > input, .address_state > input, .address_zip >input");
readOnlyFields.addClass("readOnly");
$(".readOnly").attr("readonly",true);

And value of the State set too:

 var provSelected = $("#input_54_1").val();
 $("#input_54_3_4").val(provSelected);

Please put together some simple test code that demonstrates what you are doing. That way a working solution can be developed for you.

until now i am using this custom code.

jQuery(document).ready(function($){
        
        // add line2, city, state and zip top
        var readOnlyFields = $(".address_line_2 > input, .address_city > input, .address_state > input, .address_zip >input");
        readOnlyFields.addClass("readOnly");
        
        $(".readOnly").attr("readonly",true);
        
        $(".readOnly, .address_country > select").css("backgroundColor","whitesmoke");
        
        $("#input_54_3_6").change(function(){
           $("#input_54_3_6").val("Canada");
        });
        
        $("#input_54_3_6").val("Canada");
        var provSelected = $("#input_54_1").val();
         $("#input_54_3_4").val(provSelected);
        console.log("Province: " + provSelected);

        
        $("#input_54_3_4").trigger("change");
        $("#input_54_3_4").on('change', function(){
            console.log("Inside change")
           if ($("#input_54_3_4").val() != $("#input_54_1").val()){
            $("#input_54_3_4").val(provSelected);
                console.log("Inside if");               
                alert("Only " + provSelected +" addresses are allowed in this address field");
                $(".address_line_2 > input, .address_city > input,  .address_zip >input").val("");
           }
        });
        
                
        $('.address_line_1 > input').keypress(function(event){
            
            if (event.keyCode == 13) 
                event.preventDefault();
            
          });
        
        });

It’s kind of hard to explore and develop a working solution for you without HTML code to go with the scripting code.

please how can i send you a private message ?

I prefer for help and assistance to be done in public, so that others may benefit from the assistance too.

1 Like

Test Link for what i am trying to achieve
http://bit.ly/2Dlt0ef

Thank you for that. It’s likely to be 24 hours before I return, but your assistance has made it much more likely that someone else here will be able to assist in the interim.

Thank You very much for your assistance, I hope somebody will :). I really appreciate it.

This section of code is where you can do your alert:

                    jQuery('#input_'+form_id+'_'+field_id+'_1').val(addressLine1);
                    jQuery('#input_'+form_id+'_'+field_id+'_2').val(addressLine2);
                    ...

First, declare a currentState variable in the the place_changed event:

                google.maps.event.addListener(autocomplete[name], 'place_changed', function() {
                    var currentState = jQuery("#input_54_1").val();

then you can check that the autocomplete state matches the currentState.

                    if (state !== currentState) {
                        alert(`Only addresses in ${currentState} are allowed to be selected`);
                        return;
                    }
                    jQuery('#input_'+form_id+'_'+field_id+'_1').val(addressLine1);

That prevents any autocomplete results that are outside of the desired state, from being added to the form.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.