How to work with data returned after form submit

I have an AMP form that calls a web service on submit, and after that, I have a JSON as result. The JSON contains data and in order to see them, I am using amp-mustache template in submit-success div. And all is working fine. I see all the data I need. But I am unable to access that data from outside the submit-success div. Since I need to set some controls on my form that are out of submit-success div, I need to access the JSON result outside thesubmit-success div. Can anybody share how can I do this?

Solution

One way of doing it would be by saving your JSON response to a state. You can do this by using the on attribute of the form to set the state on the event submit-success as follows:

<form id="form123" 
      action-xhr="/formHandle" 
      method="POST"
      on="submit-success:AMP.setState({ msg : event.response.message })"
>

Now you can use this state to implement your control logic anywhere in your page by using it with an amp-bind expression. For example,

<p class="" [text]=" 'Response is :' + msg">

If you just want to perform common actions like hide, show, toggling accordion, scroll, opening a ligthbox etc., you can do this by using the corresponding AMP action inside the on attribute against the submit-success event, without having to use amp-bind.