Get submission data on React App

  • Profile Image
    Dev_Team
    Asked on March 04, 2021 at 10:54 AM

    I'm trying to embed a form on my React App, (that's done so far).

    What I am trying now is to associate the submission data / id to the user filling in on my React App.

    I tried the Thank you redirect page approach, but the iframe redirects the whole page, wanted to only redirect inside the iframe.

  • Profile Image
    Yuta_J
    Answered on March 04, 2021 at 03:11 PM

    Hello,


    Thank you for reaching out to us. Have you checked Jotform API Documentation? Please take a look to see if you find something that can be useful to your apps development.


    Guides:

    API Documentation

    Libraries


    If you have any other questions, please reach out to us again.


    Best,

  • Profile Image
    relo_dev
    Answered on March 04, 2021 at 04:30 PM

    Hey, yes extensively thats exactly why I'm resorting to the support system.

  • Profile Image
    Yuta_J
    Answered on March 04, 2021 at 07:09 PM

    Hello,


    Thank you for coming back to us. Please allow me to check with someone who understands React Framework, API and get back to you shortly.


    Best,

  • Profile Image
    relo_dev
    Answered on March 05, 2021 at 09:12 AM

    Basically what I am trying to get is the submission id, when the form is submitted using the Embedded Iframe, I see that I get a message saying "submission-submitted", but no other information, I would just need the id, the rest I would get from the API.

  • Profile Image
    Patrick_R
    Answered on March 05, 2021 at 12:25 PM

    Hello!

    - I tried the Thank you redirect page approach, but the iframe redirects the whole page, wanted to only redirect inside the iframe.

    As far as I can test, changing this behavior isn't possible. Jotform redirects using top.location.href property. Example redirect code (generated by Jotform) provided below:

    <script>top.location.href = 'https://www.jotform.com/thankyou.html?submission_id=49x77x69x68x47x02x1';</script>

    - Basically what I am trying to get is the submission id, when the form is submitted using the Embedded Iframe, I see that I get a message saying "submission-submitted", but no other information, I would just need the id, the rest I would get from the API.

    The message is being shown inside an iFrame; I am not sure if there is a way to read it, it seems that the browser will throw cross-origin errors.

    But it is possible to show the submission id using the {id} placeholder in the 'Thank you' page.

    Also, It is possible to use the {id} placeholder in the redirect URL; so, you can catch the submission ID on your website with this URL format. But this will refresh your page.

    If you do not want browser refresh, then the following workaround might solve your purpose:

    1. Download the form's source code and embed it in your React App as a form, maybe using ReactDOM.render.
    2. You need to submit this form via AJAX; you can set this up by modifying form's source code.
    3. Make sure that in the 'Thank you' page of your form, you set submission ID to be shown using the {id} placeholder.
    4. Once the form is submitted via AJAX, HTML will be returned; you can then use regex or DOM functions to fetch the Submission ID from the returned HTML.

    I hope this solves your purpose. If you have any questions, let us know.

    Thank you!