Support

Account

Home Forums Front-end Issues Link a select field to a text field with ajax.

Helping

Link a select field to a text field with ajax.

  • Hi, all

    I wonder if there is a way to populate the list of choices in a select field (ajax lazy load) with the values stored in a database.
    The goal is to populate the select choices with a list of cities with the same postcode.
    The postcode will be entered in a text field before, with an ‘onblur’ event to trigger the select choices load.
    Last detail: this form will be on the front-end.

    Thanks!

    Fred

  • Yes, there is. I have been working on a project where I needed to do this.

    I’m not going to go into the PHP side and creating an AJAX action in WP, for that you’ll need to look at this https://codex.wordpress.org/AJAX_in_Plugins

    I’m also not going to explain all the details of exactly what you want here.
    Some of the JS code for the project I’m working on is here https://github.com/Hube2/blunt-parametric-search/blob/master/admin/js/admin.js. Take a look at the function _para_tax_change that starts on line 363. This function gets the selected taxonomy and populates the terms of that taxonomy into another select field (this happens in request2 which starts on line 402, the taxonomy field value is retrieved on line 376). This happens on the ‘change’ event, but you’ll also find blur events in there that are attached to text fields, one example is the _para_title_change function on line 337.

    As far as loading it on the front end you just need to enqueue your custom JS file at the right time. Adding custom JS is covered here https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

    I’ll be happy to answer any questions here about the code.

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Link a select field to a text field with ajax.’ is closed to new replies.