Okay
  Public Ticket #2491834
auto filling in custom fields of the booking form
Closed

Comments

  • Douglas Fraser started the conversation

    Hi,

    I am trying to setup a Amelia to Zapier to Quickbooks connection for a client. Everything basically works ok, but the problem is the invoices need the customer's address on them. So Quickbooks needs to be sent that info from our website.

    Amelia's custom fields would be the solution, but the customers are people who have registered with the website and so making them fill out the address fields every time they buy something is bad UX.

    I have Javascript code that fills out the custom fields (based on info from the WP database) but in the posting of the Amelia booking form info to the website, those text inputs always have a value of "".  Only if those text inputs (Address, City...) are manually typed in does the data ever get sent to the website and thus to Zapier/Quickbooks. Actually, I just need to type just one character and then the entire string / value within the text input is sent. Is there is something going on in amelia-booking.js that is preventing the programmatically set values of the inputs from being used?  What handler could I hook into or override perhaps?  Or is this just some stupid browser nonsense?

    The thing is, using a textarea works fine - the html contents can be set, the whole string is sent to Quickbooks.... but it would be nicer if the address was broken up properly into specific things so Quickbooks can do its thing right.

    Perhaps this is a feature that other customers might find useful - the ability to set default values of custom fields based on data from ... elsewhere.

    thanks

  • [deleted] replied

    Hello Douglas Fraser,

    Thank you for your purchase.

    There isn't a possibility of setting default values for the custom fields with the plugin's built-in features, I will add that as a feature request to our list so it can be considered for implementation in the future.

    You can try adding this script , with it the first custom field that has an input field is changed, you need to modify it, of course:

    <script>
    window['beforeConfirmBookingLoaded'] = function () {
      var customFieldsBlock = document.getElementsByClassName('am-custom-fields')[0];
      var customFields = customFieldsBlock.getElementsByClassName('el-input__inner');
      customFields[0].value = 'abc';
      customFields[0].dispatchEvent(new Event('input'));
    }
    </script>
    Hope this helps. 

    If you have any further questions feel free to ask.


  • Douglas Fraser replied

    Hi,

    thank you.  My original code was basically the equivalent of yours - I use jQuery (shouldn't matter) and my code was waiting till the custom fields element was visible/in the page, so it is not hooked into window[] etc.  But I was issuing the input event after filling in the field, so the only difference is maybe when the function gets executed...

    I tried using your code, and the fields get filled in (visually), but it still does not work.  The JSON payload request is still going out with blank fields. I tried both with Chrome and Firefox (nothing else). I also tried making the phone field non-required and testing that, but still no good...

    At this point, I really suspect it is something with browser security/privacy settings - it makes sense the browser would prevent fields that are not typed into directly from having data pre-filled in - but still display it as if the user did type it in??  Bad UX. Or perhaps a firefox bug...

    But I'd have to turn down security or do some more research into this. I solved the problem of getting Quickbooks the address data another way actually, so I am not going to spend any more time on this.  Thanks again for the code, it showed me I do know what I'm doing, it is the computer's fault!

    Doug



  • Douglas Fraser replied

    Scratch that... I do not know what I am doing.

    There was a typo in my code (wrong element getting issued an input event) and another test shows Zapier getting the updated data like I'd expect.  so I think the crucial difference between your code and my first version was the use of the window['beforeConfirmBookingLoaded'] part.

    Doug


  • [deleted] replied

    Hello Douglas, 

    You are welcome. 

    So, just to confirm - everything works well now? Thank you.


  • Douglas Fraser replied

    Hi Marija,

    yes, everything is working as i ought to. And now the client wants to add a checkbox that must be ticked before the booking can actually be confirmed.... I don't think that will be a problem (i.e. disable the button until it is checked).  Thanks for the quick response

    Doug


  • [deleted] replied

    Glad to see that. THank you for letting me know.

    You are welcome. 

    If you have any other questions or concerns feel free to open a new ticket and we will gladly help.