Cognito-forms – How to retain form data for subsequent entries

cognito-forms

I let my staff book their shifts using a form and once they have booked a particular shift and pressed submit, I used a redirect URL with a simple Java history code that took them back to the form before it was submitted.

That way, if they wanted to book another shift and all the details were the same, except the date, then they didn't have to fill out all their details again, just alter the date and submit again.

On Cognito, once the submit button is pressed all info is gone. Any way to solve this?

Best Answer

I am a developer for Cognito Forms.

With our testing we did not use any JavaScirpt history code. We used the redirect url and added JavaScript to the embed code in order to pull the entry parameters out of the query string.

Based on your ability to add JavaScript to your website, we are assuming that you are hosting the form. We started by setting the Redirect url to the page your Cognito Form is currently embedded on.

Update your redirect url to include each field as a query sting parameter, as seen below.

enter image description here

Next you will need to add some script to your embed code. Here is what it should look like:

<script type="text/javascript">
   function getParameterByName(name) {
          name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
          var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                 results = regex.exec(location.search);
          return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
   }

We will also be editing one line of script code where the form id is assigned. This is the code we will be adding just after the id call in your embed code:

, entry: { "Textbox": getParameterByName("textbox") } });

Once added your new embed code will look like this: 

<div class="cognito">
<script src="https://services.cognitoforms.com/include/required"></script>
<script src="https://services.cognitoforms.com/session/script/h581285g-2b60-153d-b3d4-ff29acd6jt0f"></script>
<script>Cognito.load("forms", { id: "1", entry: { "Textbox": getParameterByName("textbox") } });</script>
</div>

All total your Final embed code will look something like this when all put together: 

    <script type="text/javascript">
       function getParameterByName(name) {
              name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
              var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                     results = regex.exec(location.search);
              return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
       }
</script>
    <div class="cognito">
    <script src="https://services.cognitoforms.com/include/required"></script>
    <script src="https://services.cognitoforms.com/session/script/h581285g-2b60-153d-b3d4-ff29acd6jt0f"></script>
    <script>Cognito.load("forms", { id: "1", entry: { "Textbox": getParameterByName("textbox") } });</script>
    </div>

You will be able to add information to your text field and submit your form. You will then be redirected to the same form on your page and the text will be populated with the same information you just entered. You will want to make sure your users know that this will happen or they might think that the form did not submit.

One last item to note is that Names and Addresses work slightly differently from other fields in that they have more information associated with them. If you need further help with the Name or Address field please submit a Support Ticket via our Feature Request so that we can help walk you through this process.

Related Topic