On my checkout page, I have a separate Billing Address form, but for better UX, I only use one button: “Place Order” (no separate submit button for the form). On the click of Place Order, I check a variable (v.address_id === "different"). If true, I need to submit the billing address form before placing the order. The button itself cannot be placed inside the form. I tried triggering the form submit via document.getElementById("billing_submit_hidden").click() (hidden submit button inside the form), But it doesn’t work. I also tried calling the POST request directly on button click and used preventDefault() it on the form,the request runs, but the form fields come through empty, possibly because it’s not a real submit event. What’s the correct Wized-friendly way to submit a form programmatically from an external button while preserving field values?
Read-only Link- Wized
Path- “/checkout”
Hi @littlegeniustoyspvtl
You can perform this action by adding a wized attribute to the button - also if the button is inside a form element you need to add a type attribute with its value being button so that the form doesn’t submit on click of the button.
Next, access the wized attribute name assigned to the button on the elements panel in the configurator and assign a click event on it.
Place it to run the request on the condition v.address_id === 'different' - then change the request to use inputs (ie https://docs.wized.com/data-store/inputs) and not the form. This is because the form values only get populated by the conventional submit event on forms
Let me know if this works for you!
1 Like
In my setup, the Place Order button is outside the billing form, and the submit button inside the form is only being triggered programmatically. From what I’m observing, Wized only populates form.* values on a real, user-initiated submit event, so triggering a submit from an external button or via JS never hydrates the form fields, which is why the request receives empty values. Can you confirm whether this flow is actually supported in Wized? Also, if you could check the read-only link shared earlier, it should make the structure clearer.
Yes, Wized only populates the form values on conventional submit events(ie the normal ones when the form is actually submitted). However you can propagate the submit event on the form and get Wized to populate the form values.
First you’ll need to query for the form
const myForm = document.querySelector('#myForm')
Then dispatch the submit event on it
myForm.dispatchEvent(new Event('submit'))
Thanks for confieming that Wized only hydrates form values on conventional submits. I did try programmatic approaches earlier (triggered submits / JS-based submits), but the requests still received empty form.* values. Does Wized treat dispatched submit events (dispatchEvent(new Event('submit'))) the same as native, user-initiated submits internally? In my testing it doesn’t seem to hydrate form values the same way. If possible, could you also check the read-only link I shared earlier to see if I’m missing somthing in the setup?
Yes, Wized will treat the dispatched JS events as native and populate the form.* values. In your project I haven’t seen the querying of the form and the subsequent dispatch of the submit event.
