Toggle slider as select- or radio-buttons in Scriptcase

Show graphical on/off-switches in select or radio-elements of Scriptcase Forms

Usually Scriptcase Form-Applications use the HTML elements to show Select- and Radio-elements:

select or radio buttons standard

This can be changed by using a CSS and a ‘replace’-code:

select or radio buttons new


1. Load the new CSS definition in the onLoad-Event of the form application.

This defines the ‘look’ and the ‘animation’ of the new ‘sliders’:

These is HTMP/CSS code. Therefore the PHP-code of the Scriptcase-form has to be stopped with   ?>  and started again   <?php after the new code.

This definiton was used in a presentation done by Marcia (Scriptcase) on Youtube
Any other CSS-definition can be used. For example – this is a website with a generation for such a definition:
And there are much more on the Web…

If you find nice ones, please leave the URLs as comment to this article 😉

2. The form has to have some Select- and/or Radio-Fields:

This sample uses:

Definition Radio Element

Click to enlarge


Definition Radio Element

Click to enlarge


3. Define, which fields (select/radio) will show the new form:

To do this, you can add a jQuery code in the onLoad-event of the form.

Sample 1 – ALL select and radio-fields:

Sample 2 – Only the select fields on the form:

Sample 3 – Only the radio field with the name radio_1:

Hint: This is JQuery-code, which has to be enclosed by  ?>  and  <?php  too.

Hint: Scriptcase contains the jQuery libraries in development and deployed applications. Thus the jQuery libraries have not to be loaded.

Such a form could look like:

Scriptcase Form with toggle slider as select or radio

Posted in Scriptcase Sniplets Tagged with: , , , ,