CODEWITHSUNDEEP
amp-htmlgoogle-amp
yajiv
yajiv

Reputation: 2941

How to submit form only if some condition match from other form?

I am using AMP. I am asking mobile no of user and then hit api(let's X). If response was success then showing result to the user and if response is error then I asked otp. After entering otp and clicking on verify I hit api(let's Y). Response of api Y are followings.

Response code=200
code=1 or 2 or 3
Response code=400
Message:"some error"

On success response of api Y and if code=1 then only I want to hit api X. I don't know how to do this. Following is what I have done.

<form method="post"
      id="form1" 
      action-xhr="url of X api" 
      on="submit-error:otpScreen.show">
.
.
.
</form>
<form method="get"
      action-xhr="url of Y api"
      on="submit-success:event.response.code==1?form1.submit:otpScreen.hide"  //here i getting syntax error
>
<div id='otpScreen'>.......</div>
</form>

Is it even possible to submit second form on some condition from first form?

Upvotes: 0

Views: 583

Answers (1)

Sebastian Benz
Sebastian Benz

Reputation: 4288

You use amp-bind to disable the second form's submit button until the first one has been submitted. For example:

<form id=form1 on="submit-success:AMP.setState({form1Success: true})">...</form>
<form id=form2>
   ...
  <input type=submit disabled [disabled]="!form1Success">
</form>

... or you could hide the second form using the hidden attribute:

<form id=form1 on="submit-success:AMP.setState({form1Success: true})">...</form>
<form id=form2 hidden [hidden]="!form1Success">
   ...
</form>

Upvotes: 2

Related Questions