US States Dropdown for International Address Field [RESOLVED]

Get Help
, , , ,
1

I am using the International Address field which has a text field for the State/Province/Region. I can only accept the state abbreviation (two characters) so if the user selects the United States, I need to replace the text input field with a select field of US States. Using jQuery, I get the text fields name and id and then change it to a select field, using the same name and ID. The jQuery code works great but I the select value is not being saved when the form is submitted. In theory, this should work.

<?php
*
 * Gravity Forms: Replace State text field with US States if Country selected is United States
*/
function country_state_list(){
	if( is_page( 'request-quote' ) ) : ?>
        <script>
        jQuery(document).ready(function($){
            
            // Use US States if Country selected is United States
            $(".ginput_address_country select").change(function(){
                var selectedCountry = $(this).children("option:selected").val();
                
                // Get original State form field
                var stateFieldID = $(this).closest('.ginput_complex').find('.ginput_address_state input, .ginput_address_state select').attr('id');
                
                if(selectedCountry == 'US') {
        
                    $('#' + stateFieldID).replaceWith(
                        '<select name="'+stateFieldID+'" id="'+stateFieldID+'" aria-required="false" autocomplete="new-user-state">' +
                        '<option value="">Select State</option>' +
                        '<option value="AL">Alabama</option>' +
                        '<option value="AK">Alaska</option>' +
                        '<option value="AZ">Arizona</option>' +
                        '<option value="AR">Arkansas</option>' +
                        '<option value="CA">California</option>' +
                        '<option value="CO">Colorado</option>' +
                        '<option value="CT">Connecticut</option>' +
                        '<option value="DE">Delaware</option>' +
                        '<option value="DC">District Of Columbia</option>' +
                        '<option value="FL">Florida</option>' +
                        '<option value="GA">Georgia</option>' +
                        '<option value="HI">Hawaii</option>' +
                        '<option value="ID">Idaho</option>' +
                        '<option value="IL">Illinois</option>' +
                        '<option value="IN">Indiana</option>' +
                        '<option value="IA">Iowa</option>' +
                        '<option value="KS">Kansas</option>' +
                        '<option value="KY">Kentucky</option>' +
                        '<option value="LA">Louisiana</option>' +
                        '<option value="ME">Maine</option>' +
                        '<option value="MD">Maryland</option>' +
                        '<option value="MA">Massachusetts</option>' +
                        '<option value="MI">Michigan</option>' +
                        '<option value="MN">Minnesota</option>' +
                        '<option value="MS">Mississippi</option>' +
                        '<option value="MO">Missouri</option>' +
                        '<option value="MT">Montana</option>' +
                        '<option value="NE">Nebraska</option>' +
                        '<option value="NV">Nevada</option>' +
                        '<option value="NH">New Hampshire</option>' +
                        '<option value="NJ">New Jersey</option>' +
                        '<option value="NM">New Mexico</option>' +
                        '<option value="NY">New York</option>' +
                        '<option value="NC">North Carolina</option>' +
                        '<option value="ND">North Dakota</option>' +
                        '<option value="OH">Ohio</option>' +
                        '<option value="OK">Oklahoma</option>' +
                        '<option value="OR">Oregon</option>' +
                        '<option value="PA">Pennsylvania</option>' +
                        '<option value="RI">Rhode Island</option>' +
                        '<option value="SC">South Carolina</option>' +
                        '<option value="SD">South Dakota</option>' +
                        '<option value="TN">Tennessee</option>' +
                        '<option value="TX">Texas</option>' +
                        '<option value="UT">Utah</option>' +
                        '<option value="VT">Vermont</option>' +
                        '<option value="VA">Virginia</option>' +
                        '<option value="WA">Washington</option>' +
                        '<option value="WV">West Virginia</option>' +
                        '<option value="WI">Wisconsin</option>' +
                        '<option value="WY">Wyoming</option>' +
                        '</select>');
                } else {
                    $('#' + stateFieldID).replaceWith(
                        '<input type="text" name="'+stateFieldID+'" id="'+stateFieldID+'" value="" aria-required="false" autocomplete="new-user-state">');
                }
            });    
            
            // Set Request Quote default Country to US
            $('.ginput_address_country select').val('US').trigger('change');
        
        })
        </script>
    <?php
    endif;
}
add_action('wp_footer', 'country_state_list');
?>

I would appreciate it if I could get some insight into this issue.

2

The issue you’re running into is probably because Gravity Forms doesn’t recognize the select field you created with jQuery when the form is submitted. But you can fix it using Gravity Forms’ built-in hooks!

add_filter( 'gform_pre_submission_filter', 'customize_state_field_submission' );

function customize_state_field_submission( $form ) {
    // Replace '1' with your form ID.
    if ( $form['id'] != 1 ) {
        return $form;
    }

    foreach ( $form['fields'] as &$field ) {
        // Replace '3' with the ID of your state field.
        if ( $field->id == 3 ) {
            $state_field_name = 'input_' . strval( $field->id );
            $state_value = rgpost( $state_field_name );

            // Check if the submitted value is a US state abbreviation.
            $us_states = array( 'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY' );
            if ( in_array( $state_value, $us_states ) ) {
                // Update the field's $_POST value.
                $_POST[ $state_field_name ] = $state_value;
            }
            break;
        }
    }

    return $form;
}

This code helps update the state field’s value in the $_POST data before Gravity Forms processes the form. Just make sure to replace ‘1’ with your form ID and ‘3’ with the ID of your state field.

Now, when you submit the form, Gravity Forms should be able to recognize and save the value of the select field you created.

I hope this helps!

Ref: https://docs.gravityforms.com/gform_pre_submission_filter/

3

Thank you for your reply.

I am toggling between a text field and a select field depending on the value of the Country select field. The select field that I use is a perfectly valid element, with name and id fields.

Is there some reason why that select field that is generated would not work?

4

As pointed out by support, I was using the ID value for both the ID and name attributes. Once I added the name value to the name attribute, it worked.