Jump to content

Recommended Posts

I am trying to create an increment/decrement button so that the user doesn't have to type in the value manually but rather use the arrow buttons do increase/decrease the input on the fly. How would I do it on Caspio Submission Form?

Share this post


Link to post
Share on other sites

HTML5 introduces this new type of input field called number:

<input type="number" />

For supported browsers, this new input field displays an increment/decrement spinner control. IE11 seems to support the new input type, but the UI images for the increment/decrement are not included. Thus, in IE11, this control does not appear as a spinner, but as a normal text field.

This feature has been tested on the latest versions of Google Chrome, Firefox, and Opera. See http://caniuse.com/#feat=input-number for a full list of supported browsers.

Share this post


Link to post
Share on other sites

Hi Nightowl,

You can create one HTML Block for increment button and another one for decrement. Place both HTML Blocks below the field that you will be using the buttons for. In Advanced Settings of the Field enable "Continue next element on the same line" checkbox. In Advanced Settings of the HTML Block1 enable "Continue next element on the same line" checkbox.

Use the following script in Increment HTML Block:

<input type="button"  onclick="incrementValue()" value="↑" >
<script>
function incrementValue()
{
    var value = parseInt(document.getElementById('InsertRecordFieldName').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('InsertRecordFieldName').value = value;
}

</script>

 

Replace FieldName with the name of your field. 

 

For Decrement HTML Block use this script:

 

<input type="button"  onclick="decrementValue()" value="↓" >
<script>
function decrementValue()
{
    var value = parseInt(document.getElementById('InsertRecordFeildName').value, 10);
    value = isNaN(value) ? 0 : value;
    value--;
    document.getElementById('InsertRecordFieldName').value = value;
}

</script>

Make sure to replace FIeldName to match your table field.

The resulting Submission Form should look similar to this: https://c0ebl246.caspio.com/dp.asp?AppKey=7c243000f0418aaa32b7442ba529

I found this script at http://stackoverflow.com/questions/9186346/javascript-onclick-increment-number

Hope this helps.

 

Ariel

Share this post


Link to post
Share on other sites

To use this new HTML5 number spinner in a submission DataPage, please follow these steps:

  1. Create a Header and Footer.
  2. Select the footer section and click the Advanced tab.
  3. Uncheck Enable HTML Editor.
  4. Click the Standard tab, paste the following code, and hit Finish:
  5. <script type="text/javascript">
        // TODO: Duplicate this script for every numeric field that you want to convert to an HTML5 spinner -->
        document.getElementById('InsertRecordFIELD_NAME').type = 'number';
    </script>

     

Share this post


Link to post
Share on other sites

I have tried this solution and it works.  Please follow this link for the demo page https://c0abv972.caspio.com/dp/237360005ed7882610a24e37b2e2
The first element is just 

<input type="number" value="0"/>

It works in Chrome and Firefox but it doesn't work in IE and Edge even with the latest version.

The second element contains the followings:

 

<input id="number" type="text" value="0" />
<input onclick="incrementValue()" type="button" value="↑" />
<input onclick="decrementValue()" type="button" value="↓" />



and the script that has given above. It works in every browser.
 

Share this post


Link to post
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
Reply to this topic...

×   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...

×
×
  • Create New...