Increment/Decrement Button

[nightowl]

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?

[nightowl]

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.

[Ariel]

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

[nightowl]

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>

    

[Alison]

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.