This article shows how to limit submissions based on a maximum number. The process is to have a listing from where users go to a submission form. The article explains how to toggle the link to the submission form based on the maximum number.

Note: This implementation method can NOT be used if users open the submission form directly.
If users open the submission form directly, validation is required upon submission. Therefore a combination of JavaScript and Web Services API is needed which can be programmed by our Professional Services team.

In this example you set up a “Course sign-up” system where there are a limited number of available seats in each Course. This sample system can be applied in any situation where inventory is limited.

This process includes a customizable message to display when all available submissions have been filled. This process requires a total of 3 DataPages and uses some basic JavaScript.


Steps to limiting submissions to a maximum number

Table setup

This technique involves two separate tables. One table keeps track of submissions and the other holds information about the main records. In this example, you create one table for Courses (main records) and the second table for Attendees (submissions).

Courses Table (contains the main records)

For this system to work, you must include at least the following three fields:

  • An ID field such as an AutoNumber (Course_ID)
  • The maximum submissions as a Number DataType (Maximum_Attendees)
  • The current number of received submissions as a Number DataType(Attendees)
Attendees Table (records the submission)

In this table, you only need the following field to make the system work:

  • The foreign ID field from the main records table (Course_ID), which must be a Number datatype

You can, of course, add any additional fields you wish to this functional skeleton.

Create a Report for your primary records table (Courses)

Now that the tables have been designed, create a Report for our main records table (Courses). The same basic technique could be used for List or Gallery Reports or even on Details Pages.

  1. From the DataPages’ listing screen click New DataPage to open the DataPage wizard.
  2. In the DataPage Type screen, select Reports.
  3. On the DataPage DataSource screen, select your Courses table as your data source. You can configure the Search page anyway you’d like. It does not affect this technique.
  4. Proceed to the Configure Results Page Fields screen. You are going to include some JavaScript to display a link to a Submission Form (Course signup form) if there are spaces available.
  5. Add an HTML block using the insert button at the lower right-hand corner of the DataPage Elements panel.

In the HTML block, go to the Source mode and add the following JavaScript:

<span id="Course[@field:Course_ID#]"></span> 
  var data = '';
if (parseInt('[@field:Attendees#]' || '0') < parseInt('[@field:Maximum_Attendees#]' || '0')){
  data = "<a href='SubmissionURL?Course_ID=[@field:Course_ID]'> Signup </a>";
  data = "<p>Signup Closed</p>";

document.getElementById("Course[@field:Course_ID]").innerHTML = data;

Replace Attendees, Maximum_Attendees, and Course_ID with the appropriate field names from your table. In our example this would look like:

The submission URL will be replaced in a later step. You can also replace Signup and Signup Closed with more appropriate messages for your app.

At this point you can also add a calculated field to show the remaining submissions available.

Continue with the wizard until you can select “No Details Page”. Press Finish to save your DataPage.

Create the New Record Submission Form

Now we are going to create the Submission Form. In this example, the Submission Form will allow students to sign-up for a Course.

  1. Click New DataPage to create a Submission Form.
  2. On DataPage DataSource screen, choose submissions table (Attendees) as the data source.
  3. This Submission Form can include any field you would like to record about each submission, but it must include the foreign key value (Course_ID). The one crucial thing this form must do is receive the query string parameter from the course listing report, and pass it on to the final Single Record Update Form, which will be created in the last step.
  4. In Configure Fields Screen, select the foreign key value (Course_ID) and click Advanced Tab. To receive a parameter in a field, enable the On load option by checking the Receive value or parameter. Ensure the parameter name that is generated matches exactly with the query string in the hyperlink we created in the previous step (Course_ID).

Also, to pass the parameter, enter the same parameter name by enabling On exit option and by checking Pass field value as parameter.

In the Standard tab hide this element from the user by selecting Hidden from the form element dropdown:

Click Finish. You will customize the destination of this page after we create the next Single Record Update Form.

The last DataPage we need to create will be a Single Record Update Form that will automatically increment the number of attendees in the main record (Courses).

  1. To create this DataPage, click New DataPage. Select Single Record Update Form from the Forms DataPage Type.
  2. On the DataPage DataSource screen, select your Courses table as the data source.
  3. On the Identifying Record to Update screen, select Find record through Unique ID and locate the record using a Unique ID (Course_ID). Select Course_ID from the Unique ID field dropdown and add the parameter as shown below.
  1. On the Select Fields screen, include only the current number of submissions (Attendees) field. Move Attendees to the right-hand panel using the arrow button.
  1. Using the Insert Button at the lower right-hand corner of the DataPage Elements panel add Header & Footer sections. Click on the Header and disable the HTML editor in the Advanced tab. Add the following div tag in the Header to hide this DataPage, so your end users cannot access the number of attendees.
    <div style="display:none">
    Next, click on the Footer and disable the HTML editor in the Advanced tab. Add the following JavaScript in the Footer to increment the Attendees by one and submit this Single Record Update Form automatically.
    document.getElementById('EditRecordAttendees').value = parseInt(document.getElementById('EditRecordAttendees').value) + 1;

    Replace “Attendees” with the actual fieldname from your table as it is listed in the DataPage Elements panel.

    Click Next.

  2. On the Destination and Emails screen, you can choose what the final destination will be after a user completes their registration / submission. In this example direct the user to a page indicating that their submission has been sent, and to watch their email for a message containing their confirmation number. Click Finish.
DataPage, Web Form Wizard, Destination and Emails, Screenshot

Deployment and tying it all together

Now that all of the DataPages have been created, you can work backwards to connect them into a single process.
  1. Select the Single Record Update Form created in the last step and click Deploy. Enable the Deployment Status for the DataPage. Click Close.
  2. Select the New Record Submission Form and click Edit. Navigate to the Destination and Emails screen (the last screen in the wizard). When the user submits this form they should be directed immediately to the (Increment Attendees) Single Record Update Form. Select the Go to a DataPage. Using the Browse button, locate the Single Record Update Form and click to select. At this point, you can also set up an Acknowledgement Email to notify the user that their submission has been received. Click Finish to save your DataPage.
  3. Deploy the Submission Form. Select this DataPage and click Deploy. Enable the Deployment Status for the DataPage. This submission form can be embedded into a webpage or deployed using the URL method. Deploy the DataPage and copy the URL where this DataPage is hosted for use in the last step. Click Close.
  4. Finally, tie the original Report DataPage to the Submission Form. Select your original Report DataPage and click Edit. Proceed to the Configure Results Page Fields screen and select the HTML block. Within the JavaScript we added in a previous step, locate the “SubmissionURL” text. This Submission URL can now be replaced with the URL of the Submission Form. Click Finish to save your DataPage.
Test the application and you will see that when the number of submissions surpasses the maximum number of allowed submissions, the link to the signup/submission form becomes unavailable.
Go to a DataPage, DataPage, Web Form Wizard, Destination and Emails, Screenshot

Drawback: In this implementation, there is no validation if users access the submission form directly.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.