cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
1510
Views
0
Helpful
1
Replies

Ise guest self registration page checkbox requirement for newsletter

ittechk4u1
Level 4
Level 4

Hi

I want to add a check box in my hot-spot redirect page so that guest can receive information about the latest news from us.

Thanks

1 Accepted Solution

Accepted Solutions

Serhii Pustovit
Cisco Employee
Cisco Employee

Hi Thomas,

Could you try please this script for "Self-registration" page:

<script>

setTimeout(function() {

 

    var text = "Do you want to get newsletters?";                              // Button text

    var fieldName = "testfield";                                                            // Here should be a name of custom field

    var customInput = $('[name="guestUser.fieldValues.ui_' + fieldName + '_text"]');

    var checkbox = $('<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br"><fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical" aria-disabled="false" data-disabled="false" data-shadow="false" data-corners="true" data-exclude-invisible="true" data-type="vertical" data-mini="false")">'

    + '<div class="ui-controlgroup-controls">'

    + '<div class="ui-checkbox"><input type="checkbox" name="aupAcceptedCustom" id="aupAcceptedCustom" value="true" data-mini="true">'

    + '<label for="aupAcceptedCustom" data-inline="true" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="a" data-mini="true" class="ui-first-child ui-last-child ui-checkbox-off ui-btn ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-a">'

    + '<span class="ui-btn-inner"><span class="ui-btn-text">' + text + '</span>'

    + '<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span>'

    + '</span>'

    + '</label>'

    + '</div>'                         

    + '</div></fieldset></div>');

    customInput.hide();

    $('fieldset').append(checkbox);

    $('#aupAcceptedCustom').on('change', function(evt){

        if(this.checked){

            $('label[for="aupAcceptedCustom"]').removeClass('ui-checkbox-off');

            $('label[for="aupAcceptedCustom"]').addClass('ui-checkbox-on');

            $('.ui-icon-checkbox-off').addClass('ui-icon-checkbox-on');

            $('.ui-icon-checkbox-on').removeClass('ui-icon-checkbox-off');

            customInput.text('Yes');

        }else{

            $('label[for="aupAcceptedCustom"]').removeClass('ui-checkbox-on');

            $('label[for="aupAcceptedCustom"]').addClass('ui-checkbox-off');

            $('.ui-icon-checkbox-on').addClass('ui-icon-checkbox-off');

            $('.ui-icon-checkbox-off').removeClass('ui-icon-checkbox-on');

            customInput.text('');

        }

    })

}, 1500);

</script>

Thanks.

View solution in original post

1 Reply 1

Serhii Pustovit
Cisco Employee
Cisco Employee

Hi Thomas,

Could you try please this script for "Self-registration" page:

<script>

setTimeout(function() {

 

    var text = "Do you want to get newsletters?";                              // Button text

    var fieldName = "testfield";                                                            // Here should be a name of custom field

    var customInput = $('[name="guestUser.fieldValues.ui_' + fieldName + '_text"]');

    var checkbox = $('<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br"><fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical" aria-disabled="false" data-disabled="false" data-shadow="false" data-corners="true" data-exclude-invisible="true" data-type="vertical" data-mini="false")">'

    + '<div class="ui-controlgroup-controls">'

    + '<div class="ui-checkbox"><input type="checkbox" name="aupAcceptedCustom" id="aupAcceptedCustom" value="true" data-mini="true">'

    + '<label for="aupAcceptedCustom" data-inline="true" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="a" data-mini="true" class="ui-first-child ui-last-child ui-checkbox-off ui-btn ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-a">'

    + '<span class="ui-btn-inner"><span class="ui-btn-text">' + text + '</span>'

    + '<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span>'

    + '</span>'

    + '</label>'

    + '</div>'                         

    + '</div></fieldset></div>');

    customInput.hide();

    $('fieldset').append(checkbox);

    $('#aupAcceptedCustom').on('change', function(evt){

        if(this.checked){

            $('label[for="aupAcceptedCustom"]').removeClass('ui-checkbox-off');

            $('label[for="aupAcceptedCustom"]').addClass('ui-checkbox-on');

            $('.ui-icon-checkbox-off').addClass('ui-icon-checkbox-on');

            $('.ui-icon-checkbox-on').removeClass('ui-icon-checkbox-off');

            customInput.text('Yes');

        }else{

            $('label[for="aupAcceptedCustom"]').removeClass('ui-checkbox-on');

            $('label[for="aupAcceptedCustom"]').addClass('ui-checkbox-off');

            $('.ui-icon-checkbox-on').addClass('ui-icon-checkbox-off');

            $('.ui-icon-checkbox-off').removeClass('ui-icon-checkbox-on');

            customInput.text('');

        }

    })

}, 1500);

</script>

Thanks.