Amphtml: Unable to setState on chained submit-success

[cw-ashish-sharma]

unable to set states on submit-success event of form
getting Trust level error as low
can we have it as High?

this happens when we are trying to submit another form on the submit-success event of a form

example:

<form action="apicall1" on="submit-success: AMP.setState({dummyName:"Asda"})" id="f1">
<!-- fields -->
</form>

<form action="apicall2" on="submit-success: f1.submit" id="f2">
<!-- fields -->
</form>

on the submit-success of form f1 it is not able to set the state because it shows it has low trust level to set the state

[sanjay-soni]

@choumx can u give explanation on this?

[cw-arvindkumar]

@choumx our leads have been dropped. can you help !!

[choumx]

24894 has details. Can you give more details about the impact of this change on your site?

[cw-ashish-sharma]

we have a main form that collects user name and mobile no. we then on submission of mobile no. verify it by calling an otp verificationApi (by submitting a form). If the verificationApi returns success, we call the form.submit of the main form in the submit-success event. once the mai form is submitted ans successfull we setStates in the submit-success of the main form.

[arvindnitharwal]

@choumx if you req. we can share code also.

[cw-ashish-sharma]

@choumx this case is different from the recursion one right? In the above #24894 pr the example is of the same form submitting itself. But here we are chaining calls right?

[cw-ashish-sharma]

for example:

<form id="f1" action="endpoint1" method="post"
on="submit-success:AMP.setState({dummy:'dummy'})">
name:<input type="text"/>
mobile:<input type="text"/>
</form>

<form id="f2" action="endpoint2" method="post"
on="submit-success:f1.submit"
>
otp:<input type="text"/>
<input type="submit">
</form>

something like this

so the user clicks on submit of form f2 and on the successful submission submit-success of f2 will trigger the submit of form f1 and on the success of form f1 the event submit-success of form f1 should trigger setState

[sanjay-soni]

I will try to explain in layman terms
Our page consists two form section

1. Form 1 - User info section like Name, Email
2. Form 2 - Mobile field with OTP section
   After succesful OTP verification in Form 2, we call both Amp.setState and Form 1 submit action in chain from Form 2 success-submit event.

This Form 1 submit action failed and we get following error in console -
"submit-success" event with "low" trust is not allowed to invoke "amp.setState".

above we try to frame a pseudo code for this instance also. I hope we were able to explain from our side this scenario. In case you need more info then let us know.

[choumx]

we have a main form that collects user name and mobile no. we then on submission of mobile no. verify it by calling an otp verificationApi (by submitting a form). If the verificationApi returns success, we call the form.submit of the main form in the submit-success event.

Why not do OTP verification on the backend at the same time as the username/mobile number submission? This would avoid two roundtrips on client which is definitely slower.

[choumx]

Also, is this a live site?

[arvindnitharwal]

Also, is this a live site?

yup. https://www.carwale.com/

[cw-ashish-sharma]

we have a main form that collects user name and mobile no. we then on submission of mobile no. verify it by calling an otp verificationApi (by submitting a form). If the verificationApi returns success, we call the form.submit of the main form in the submit-success event.

Why not do OTP verification on the backend at the same time as the username/mobile number submission? This would avoid two roundtrips on client which is definitely slower.

Because they are 2 seperate endpoints and doing 2 seperate things.

1. Otp verification
2. Submitting user details and returning some data

We can create a single endpoint but then it will become amp specific

[cw-ashish-sharma]

@choumx any updates on this?

[choumx]

We can create a single endpoint but then it will become amp specific

I'd recommend doing this for the best user experience. However we can also consider support slightly longer submit chains.

Are any other sites affected?

@arvindnitharwal How can I repro the issue on www.carwale.com?

[arvindnitharwal]

we have removed from our prod servers but if you req we can share a video.