Jump to content
Introducing AI-Powered GPT Connect!
  • 0

Multiple Submissions Of Form In One Page

Kirkman

Asked by Kirkman,

 Share

Question

Kirkman Newbie

Kirkman

Posted
Posted

I'm new to Caspio.

 

I've created two data tables. One is a parent table that will hold venue information, and the other is a child table that will hold a list of camps being held at various venues. A venue_id ties them together.

 

The camps form has just a couple fields: Camp name, ages, dates, cost.

 

What I want is for a venue to be able to enter its details, and then add as many summer camps as it plans to host. 

 

The way I have accomplished this so far is to make a datatable for the venue, then pass the venue_id parameter to a datatable for the camps form. The camps form is set to reload itself with that venue_id upon form submission.

 

This works, but the experience is less than ideal.

 

Is there some way that I could set up the camps form in a tabular style, so that each row is a camp. and each column is a field? The form would have an "add more" button to allow the user to add more rows as necessary. Then the "submit" button would submit all the rows, each as a separate record?

 

Here is a mock up of what I want to achieve:

 

post-17690-0-82058700-1421970140_thumb.j

 

How can I do this?

post-17690-0-82058700-1421970140_thumb.j

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
Jan Newbie

Jan

Posted
Posted

Hello Kirkman,

 

I think, it is possible.

General idea is: you create Virtual fields and then pass parameters to AutoSubmit DataPage.

AutoSubmit DataPage add a new record, and passed parameters to itself again, while parameters are exist.

 

Probably, you can add records to the table directly with API.

 

But maybe it is a good idea to ask a Professional Service, if it works for you.

Link to comment
Share on other sites
  • 0
cgonzalezalcala Newbie

cgonzalezalcala

Posted
Posted

Try this. After hours of googling came across it. Used on wordpress.

<script>
function submitallforms() {
setTimeout('document.forms[0].submit()',100);
setTimeout('document.forms[1].submit()',200);
setTimeout('document.forms[2].submit()',300);
}
// End -->
</script>

<input type=button value="Submit" onclick="submitallforms();">

Link to comment
Share on other sites
  • 0
codell Newbie

codell

Posted
Posted

This is obviously a little late but you can accomplish this by using the inline insert feature and a Search and Report Datapage.

 

First, as I do not know how you set up your venue table/process, we will just assume that the user first created the venue record leading them to this datapage, to add events.

 

  1. In the current example, you can pass the created VenueID field as a parameter is from the datapage used to create the Venue.
  2. Next you will build a search and results datapage from your events table (enable parameters and advanced features). Search based off of your predefined criteria and receive the VenueID parameter in the search field to ensure that the user only see's events applying to their venue.
  3. Add the VenueID, Name, Age, Date, and Cost to your results page.
  4. Check the box to enable inline editing.
  5. When configuring, hide the VenueID field and receive the same parameter so that every new record add on the results page applies the VenueID parameter. It will not allow them to submit 3+ records at the same time but the add record button will do this individually, without refreshing the page and will be no different than your provided example where they can choose to add new rows to fill in as they see fit.

The parameter set up will depend on how you have built your app so far. For example, if you instead have the venueID as part of the authentication table instead of coming from a previous datapage, you can receive this in the place of the initial parameter receiving from authenticated fields instead of external parameters. 

 

I hope this can help you or someone else in the future with this same end goal.

Link to comment
Share on other sites
  • 0
nightowl Newbie

nightowl

Posted
Posted

Hi Kirkman,

You can try this template code inside an HTML file or HTML DataPage: 

    <div class="forms-container" class="container-fluid">
        <div class="row datapage-row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <!-- TODO: Put your DataPage [iframe] embed code here -->
                <script type="text/javascript" src="https://c2eru839.caspio.com/scripts/embed.js"></script>
                <!--<script type="text/javascript">try{f_cbload(true, "c2eru839.caspio.com", "148b400049998e67f1434f05bf7f");}catch(v_e){;}</script>-->
                <iframe name="ACBL New Profile" title="ACBL New Profile" src="https://c2eru839.caspio.com/dp.asp?AppKey=148b400049998e67f1434f05bf7f" width="100%" height="200px" style="border-style: none">Sorry, but your browser does not support frames.</iframe>
            </div>
        </div>
        <div class="row spacer">&nbsp;</div>
        <button id="add-department" style="display: inline-block !important; float: right;">Add Department</button>
    </div>

    <!-- Latest jQuery + jQuery Migrate -->
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>

    <!-- Custom scripts -->
    <script>
        $(document).ready(
            function (event)
            {
                var formsContainer = $('.forms-container').last();
                var addDepartmentButton  = $('#add-department');
                addDepartmentButton.click(
                    function (event)
                    {
                        var dpClone = $('.datapage-row').last().clone();
                        var spacer  = $('.spacer').last();
                        var spacerClone = spacer.clone();

                        spacer.after(dpClone);
                        dpClone.after(spacerClone);
                    }
                );
            }
        )
    </script>

Hope this helps.

Link to comment
Share on other sites
  • 0
nightowl Newbie

nightowl

Posted
Posted

Hi Kirkman,

If you also want to duplicate a specific block/section of fields inside the DataPage, you can try the following:

  1. Add a Header/Footer section to your submission/update form.
  2. Go to the Header section.
  3. On the header section's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/
  4. Then add this code: 
    <!-- Header code -->
<!-- Latest jQuery + jQuery Migrate -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>
  5. Add an HTML block before the first field you want to include in the repeatable section.
  6. On the HTML block's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/
  7. Then add this code: 
    <!-- BEGIN: Repeatable Section -->
<table class="datapage-fields">
  8. Add an HTML block after the last field you want to include in the repeatable section.
  9. On the HTML block's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/
  10. Then add this code: 
    <!-- END: Repeatable Section -->
</table>

  11. Add another HTML block after the HTML block in STEP #8.

  12. On the HTML block's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/

  13. Then add this code: 
    <!-- HTML Block code -->
<button class="add-space" style="display: inline-block !important; float: right;">Add Space</button>

<!-- Custom scripts -->
<script>
    $(document).ready(
        function (event)
        {
            var addSpaceButton = $('.add-space');
            addSpaceButton.click(
                function (event)
                {
                    event.preventDefault();
                    var dpFields = $('.datapage-fields').last();
                    var dpFieldsClone = dpFields.clone();
                    dpFields.after(dpFieldsClone);
                }
            );
        }
    )
</script>

Hope this helps.

 

Link to comment
Share on other sites
  • 0
JasonKing Newbie

JasonKing

Posted
Posted
On 9/18/2017 at 10:14 PM, nightowl said:

Hi Kirkman,

If you also want to duplicate a specific block/section of fields inside the DataPage, you can try the following:

  1. Add a Header/Footer section to your submission/update form.
  2. Go to the Header section.
  3. On the header section's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/
  4. Then add this code: 
    
<!-- Header code -->
<!-- Latest jQuery + jQuery Migrate -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>
  5. Add an HTML block before the first field you want to include in the repeatable section.
  6. On the HTML block's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/
  7. Then add this code: 
    
<!-- BEGIN: Repeatable Section -->
<table class="datapage-fields">
  8. Add an HTML block after the last field you want to include in the repeatable section.
  9. On the HTML block's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/
  10. Then add this code: 
    
<!-- END: Repeatable Section -->
</table>

  11. Add another HTML block after the HTML block in STEP #8.

  12. On the HTML block's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/

  13. Then add this code: 
    
<!-- HTML Block code -->
<button class="add-space" style="display: inline-block !important; float: right;">Add Space</button>

<!-- Custom scripts -->
<script>
    $(document).ready(
        function (event)
        {
            var addSpaceButton = $('.add-space');
            addSpaceButton.click(
                function (event)
                {
                    event.preventDefault();
                    var dpFields = $('.datapage-fields').last();
                    var dpFieldsClone = dpFields.clone();
                    dpFields.after(dpFieldsClone);
                }
            );
        }
    )
</script>

Hope this helps.

 

This almost works the way I want it to, however, I want the answers from the repeated section to go into a new row of the database.  Is this possible?

Link to comment
Share on other sites
  • 0
testingout Newbie

testingout

Posted
Posted
On 4/28/2018 at 12:07 AM, JasonKing said:

This almost works the way I want it to, however, I want the answers from the repeated section to go into a new row of the database.  Is this possible?

I am facing the same issue as JasonKing. Anyone can help with this? The script is great but the data in the additional rows does not go into a new row in the database.

Link to comment
Share on other sites
  • 0
testingout Newbie

testingout

Posted
Posted
On 6/19/2019 at 3:07 AM, MayMusic said:

You can create a predefined report with Inline Insert option, make venue_id  to be hidden and receive the value as a parameter. This way you can keep adding new rows for that  venue :

https://howto.caspio.com/datapages/reports/data-editing-options-in-reports/

 

Hi MayMusic, can you explain in detail? I am now using DataPages, so I have to create a new Report now? Sorry i am new to this.

Link to comment
Share on other sites
  • 0
MayMusic Newbie

MayMusic

Posted
Posted

Correct, you need to create a report DataPage then in 'Search type' screen  select 'Filter data based on predefined criteria' and receive parameter from bridge and external. Then in the next page select the ID field and receive the ID value to filter this report. Refer to this article https://howto.caspio.com/datapages/reports/data-editing-options-in-reports/

The first option in the screenshot is 'Add Records, Inline Insert'. Check that option and then in 'Configure Report Pages Fields' screen check the ID field to be hidden and receive the same parameter you are receiving to filter the report. 

Link to comment
Share on other sites
  • 0
DefinitelyNot31337 Newbie

DefinitelyNot31337

Posted
Posted
On 6/18/2019 at 7:37 AM, testingout said:

I am facing the same issue as JasonKing. Anyone can help with this? The script is great but the data in the additional rows does not go into a new row in the database.

Hello,

 

I am attaching one solution you may want to try. Just download the attached ZIP file and follow the documentation to upload the app to your account.

https://howto.caspio.com/apps/importing-an-app/

https://howto.caspio.com/apps/sharing-an-app/

 

Next, just select all your DataPages and deploy them:

image.thumb.png.528abc16d520626edfc02435b9966822.png

Lastly, just preview, deploy, or access the Direct URL of the DataPage named "HTML Page".

 

How this works will be discussed in the next post.

 

Hope this helps.

DN31337!

Multiple_Instances_of_SF_1_0_2019-Jul-19_0611.zip

Link to comment
Share on other sites
  • 0
DefinitelyNot31337 Newbie

DefinitelyNot31337

Posted
Posted

Continuation from my previous response:

 

How this works is:


DataPage "tbl Web Form" has this script in the Footer (HTML Editor disabled from the Advanced Tab). This script is responsible for submitting the instantiated form when function bulkSubmit() is called from  HTML DataPage (i.e. when Bulk Submit! button is clicked). 

<script>

function displayMessage (evt) {
  document.querySelector(`.cbSubmitButtonContainer [id*=Submit]`).click();
}

if (window.addEventListener) {
 // For standards-compliant web browsers
 window.addEventListener("message", displayMessage, false);
}
else {
 window.attachEvent("onmessage", displayMessage);
}

</script>

 

Next, let's talk about HTML Page (DataPage). So, we have two buttons. One, for instantiating a Submission Form DataPage upon click; and another button to submit all the instantiated DataPages. 

<button type="button" onclick="addIframe()"> Add </button> | <button type="button" onclick="bulkSubmit()"> Bulk Submit! </button>

 

We also have an HTML container for the instantiated DataPages. 

<div id="ifr-container"></div>

 

Finally, we have our JavaScript functions definition: 

<script type="text/javascript">
  var ifrContainer = document.getElementById('ifr-container');
  
  function addIframe() {
    var ifrCount = ifrContainer.childElementCount;
    console.log(ifrCount);
    ifrContainer.insertAdjacentHTML('beforeend', `<iframe class="cdr-iframes" src="[@app:URL_1]"></iframe>`);
  }

  function bulkSubmit() {
    document.querySelectorAll('iframe.cdr-iframes').forEach(function(elem){
      elem.contentWindow.postMessage("", "*");
    });
  }
</script>

 

addIframe() inserts a new instantiation of the Submission Form in the HTML container.

bulkSubmit() submits the instantiated Submission Forms one by one

 

DN31337!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to question listing
×
×
  • Create New...