Custom Fields
Re-Envisioned
Support MB Frontend Submission Limit the number of "favorites" in radio buttons

This topic contains 8 replies, has 2 voices, and was last updated by  Anh Tran 5 months, 4 weeks ago.

  • Creator
    Topic
  • #12411

    LFFprop
    Participant

    I am building a membersite where the members can specify what their specialties are, and what services they offer and which services not.

    This is implemented by a large list of services (radio buttons), and for each service 3 options:
    – favorite
    – offered
    – not offered

    To avoid that a member marks everything as favorite, I want to limit the number of services that he can mark as favorite.

    How to do that?

    Also, I would like to maintain a counter visible on screen, so that he can see how many favorites are marked.
    How would I do that?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Author
    Replies
  • #12438

    Anh Tran
    Keymaster

    Hi,

    I think this can be done with custom JavaScript only. So you need to enqueue a JS file, and in that file track the number of choice and show an alert when they select more.

    #12476

    LFFprop
    Participant

    OK, so that will be quite some work. Doubt whether it’s worth the efforts.
    Thanks.

    #14224

    LFFprop
    Participant

    Hi Anh,

    I have taken up this idea again to limit the number of favorites.
    Currently the number of favorites is counted and that number is shown on screen.

    What I want to do next is to dim the Save/Confirm button as long as the counter is higher than the number of allowed favorites.

    How can I do that?

    #14233

    Anh Tran
    Keymaster

    In the latest version of the MB Frontend Submission plugin, I added some code to disable the submit button when it’s already clicked (to prevent duplicated submission). You can take it as a sample and write your own code, like this:

    function count_favorites() {...}
    
    $( 'input[type="radio"]' ).on( 'change', function() {
        var $submitButton = $( '.rwmb-form-submit' ).children( 'button' );
        if ( count_favorites() > 3 ) {
            $submitButton.prop( 'disabled', true );
        } else {
            $submitButton.prop( 'disabled', false );
        }
    } );
    #14251

    LFFprop
    Participant

    Hi Anh,

    To count the number of favorites, I have the following JS:

    jQuery(document).ready(function( $ ){
    $(document).ready(function () {
      $('.count input').attr('readonly', true);
      $('.radio').change(function () {
        var count=0;
        $('.radio input:checked').each(function(){
          if ($(this).val().replace(/V_/g,'')=="Specialiteit") {
            count += 1;
          }
        });
        $('.count input').val(count);
      });
    });
    });

    That works nicely. (Btw: “Specialiteit” = Specialty, so I’m counting the specialties instead of favorites)

    How to add your code there?
    I created another JS file with the following code, but the submit button never gets disabled.

    $( 'input[type="radio"]' ).on( 'change', function() {
        var $submitButton = $( '.rwmb-form-submit' ).children( 'button' );
        if ( .count() > 3 ) {
            $submitButton.prop( 'disabled', true );
        } else {
            $submitButton.prop( 'disabled', false );
        }
    } );
    #14272

    Anh Tran
    Keymaster

    Please try this:

    jQuery(document).ready(function( $ ){
      $('.count input').attr('readonly', true);
      $('.radio').change(function () {
        // Counting.
        var count=0;
        $('.radio input:checked').each(function(){
          if ($(this).val().replace(/V_/g,'')=="Specialiteit") {
            count += 1;
          }
        });
        $('.count input').val(count);
    
        var $submitButton = $( '.rwmb-form-submit' ).children( 'button' );
        if ( count > 3 ) {
          $submitButton.prop( 'disabled', true );
        } else {
          $submitButton.prop( 'disabled', false );
        }
      });
    });
    #14290

    LFFprop
    Participant

    Unfortunately not. The submit button doesn’t get dimmed when more than 3 items are marked as specialty.

    #14321

    Anh Tran
    Keymaster

    Ah, I forgot to tell you that the code above only add or remove disabled attribute for the button. The disabled makes the button un-clickable. However, it doesn’t change the style. You might need to add something like this to the theme’s CSS:

    button[disabled] { background: #999 }

Viewing 8 replies - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.