Miko. eCommerce Template

Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Edit the filed ID

2 months 2 weeks ago #1

  • tony's Avatar
  • tony
  • Posts: 36
HI, I need to integrate an address auto lookup but i think in order for it to work i need to edit the field id's to match as shown below and for the auto fill to work when select address from input id="input". How can i edit the field ids? other form ive used can do this but i cant find anywhere in balbooa forms admin to do it

<input id="input" type="text" />

<label>Address Line One</label>
<input id="first_line" type="text">
<label>Address Line Two</label>
<input id="second_line" type="text">
<label>Address Line Three</label>
<input id="third_line" type="text">
<label>Post Town</label>
<input id="post_town" type="text">
<label>Postcode</label>
<input id="postcode" type="text">
Attachments:

2 months 2 weeks ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
Hello,
Thank you for contacting us

1. Add to the each field suitable custom class, what you need: first_line or second_line or third_line or post_town or postcode
2. Add this javascript code to the forms editor:
document.addEventListener('DOMContentLoaded', function(){
    ['first_line', 'second_line', 'third_line', 'post_town', 'postcode'].forEach(function(id){
        document.querySelectorAll('.'+id+' input').forEach(function(input){
            input.id = id;
        });
    });
    //javascript code from the screenshot
});

Best Regards,
Vyacheslav, Balbooa Support Team

2 months 2 weeks ago #3

  • tony's Avatar
  • tony
  • Posts: 36
Would this also apply to the main <input id="input" type="text" />
where the address search is done before it populates the other fields?

thanks again

2 months 2 weeks ago #4

  • tony's Avatar
  • tony
  • Posts: 36
HI, i have managed to do it this way using the field name to map the correct form fields. Would adding this script into the code editor work? as i have tested using jsfiddle and it works ok but when added to the form nothing seems to happen.

IdealPostcodes.AddressFinder.setup({
apiKey: "ak_kkmxlmzaKH44sVRsXEFi7NUS",
inputField: "input[name='54']",
outputFields: {
line_1: "input[name='36']",
line_2: "input[name='37']",
line_3: "input[name='38']",
post_town: "input[name='39']",
postcode: "input[name='40']"
}
});

2 months 2 weeks ago #5

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 16531
Hello,
Thank you for contacting us

You did everything right,
Most likely this does not work because the IdealPostcodes library was not connected.

Best Regards,
Vyacheslav, Balbooa Support Team
Powered by Kunena Forum