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 1 month, 2 weeks ago.

  • Creator
    Topic
  • November 30, 2018 at 11:17 PM #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?

  • Creator
    Topic
Viewing 8 replies - 1 through 8 (of 8 total)
  • Author
    Replies
  • December 2, 2018 at 12:45 PM #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.

    December 5, 2018 at 12:26 AM #12476

    LFFprop
    Participant

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

    April 22, 2019 at 8:30 PM #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?

    April 23, 2019 at 10:25 AM #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 );
    }
} );
    April 23, 2019 at 11:11 PM #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 );
    }
} );
    April 25, 2019 at 10:26 AM #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 );
    }
  });
});
    April 26, 2019 at 2:56 AM #14290

    LFFprop
    Participant

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

    April 27, 2019 at 10:56 AM #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 }

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

You must be logged in to reply to this topic.