Getting the clicked item from a ajax completed list

user_3613255 0
Viewed 127

I am using a lookup for UK postcodes which generates a simple form, does an api call and them fills in the list with returned items:

<script>
$('#postcode_lookup').getAddress(
{
api_key: 'XXXXX',  
output_fields:
    {
    line_1: '#line1',
    line_2: '#line2',
    line_3: '#line3',
    post_town: '#town',
    county: '#county',
    postcode: '#postcode'
    },
input_label:'Please enter your postcode',
input_class:'form-control',
button_label:'Search',
button_class:'btn btn-primary'
});
</script>

So I end up with

enter image description here

What I now want to do is select one of the items and take the address line off to another page.

Any best way of doing this please?

select api jquery
3 Answers

It looks like you're using plug-in https://getaddress.io. This allows for custom code to be called by registering a callback method. The function you''ll want is onAddressSelected.

Below is an example for illustration purposes (as I don't have a valid license) of how to redirect to another page with the selected address.

$('#postcode_lookup').getAddress(
{
    api_key: 'YOUR_API_KEY',
    output_fields:
    {
        line_1: '#line1',
        line_2: '#line2',
        line_3: '#line3',
        post_town: '#town',
        county: '#county',
        postcode: '#postcode'
    },
    <!-- Optionally register callbacks at specific stages -->
    onLookupSuccess: function (data) {/* Your custom code */ },
    onLookupError: function () {/* Your custom code */ },
    onAddressSelected: function (elem, index) {
        /* Your custom code */
        window.location.replace("/other-page?address=" + index.formatted_address);
    }
});

You can read more about the documentation https://getaddress.io/Documentation (see JQuery link on left-hand-side)

Also the plugin provide API, which means you're not limited to JQuery.

user_136281630

Is this a DropDownList?

"What I now want to do is select one of the items and take the address line off to another page. Any best way of doing this please?"

(I actually honestly don't know the answer, or know 100% what you mean, but hope this helps in some kind of way)

the first thing that comes in my mind is a POST when you click on SUBMIT.

that or you want to submit with a onclick?

if that's the case,

<element onclick="this.form.submit()">

if you want to have the whole dropdownlist to another page, i think the easiest way is to have that part saved as a own page, like for instance, "DropDownListCode.php"

then you do: <?php require_once('DropDownListCode.php'); ?>"

In that page you save things like

<element id="postcode_lookup">
    <script>
        $('#postcode_lookup').getAddress(
        {
            api_key: 'YOUR_API_KEY',
            output_fields:
            {
                line_1: '#line1',
                line_2: '#line2',
                line_3: '#line3',
                post_town: '#town',
                county: '#county',
                postcode: '#postcode'
            },
            <!-- Optionally register callbacks at specific stages -->
            onLookupSuccess: function (data) {/* Your custom code */ },
            onLookupError: function () {/* Your custom code */ },
            onAddressSelected: function (elem, index) {
                /* Your custom code */
                window.location.replace("/other-page?address=" + index.formatted_address);
            }
        });
    </script>
user_142860460

Having got some help from GetAddress.io - it turns out the elem is no longer an array but an object that you simply access using the properties e.g. elem.county

building_name: ""
building_number: "44"
country: "England"
county: "East Sussex"
district: "Brighton And Hove"
formatted_address: (3) ["40 Wordsworth Street", "Hove", "East Sussex"]
line_1: "40 Wordsworth Street"
line_2: ""
line_3: ""
line_4: ""
locality: ""
sub_building_name: ""
sub_building_number: ""
thoroughfare: "Wordsworth Street"
town_or_city: "Hove"
user_148716740
Related