Custom Fields
Re-Envisioned
Support MB Frontend Submission How to maintain a counter/score based on values in radio boxes?

  • Creator
    Topic
  • #10380
    Resolved LFFprop
    Participant

    Hi,

    I have a website where members offer their services, and guests can search through these offerings.

    I have a large list of ‘likes’ from which a seller can select up to 30. This limitation of 30 helps to avoid that sellers select all ‘likes’ and end up in all searches from potential buyers.
    This way, the seller has to choose with which ‘likes’ he wants to be found on my website.

    In the Meta Boxes the likes is a large set of radio boxes with label “Yes” and “No”, value 1 and 0.

    Questions:
    1. How can I add the total value of all these radio boxes, and display that on screen, as a sort of counter while selecting the ‘likes’?

    1. How can I show an error message when there are more than 30 ‘likes’?
Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #10385
    Anh Tran
    Keymaster

    Hi,

    To make things easier, I’d suggest adding a common CSS class (like) for all the radios. You can do that with the class attribute of the field.

    Then, you can perform some JS code like this:

    1. Get total value:
    var total = 0;
    $( '.like input:checked' ).each( function() {
        total += $(this).val();
    } );
    // Output total somewhere
    $( '#selector' ).text( total );

    Anyway, as all the radio have values 1 or 0, the total value is equal to the number of “likes”, which can be done with the following code.

    1. Get number of likes:
    var total = $( '.like input:checked' ).length;
    // Show an error message
    if ( total > 30 ) {
        alert( 'You have selected more than 30 likes. Please select again' );
        // or
        $( '.error-message' ).text( 'You have selected more than 30 likes. Please select again' );
    }
    #10411
    LFFprop
    Participant

    I am trying to understand how this should work.
    Should I include this in the page.php of my theme? Or actually in a separate theme for the frontend submission page to avoid that it is show on each and every page?

    I included it in page.ph, but just the text “var total = 0; $( ‘.like input:checked’ ).each( function() { total += $(this).val(); } ); // Output total somewhere $( ‘#selector’ ).text( total );” is shown on each and every page.
    I am obviously doing something wrong.

    #10420
    Anh Tran
    Keymaster

    Oh, I should have made it clear. It’s the JavaScript code, so you should put it in your theme main script file. Or better, create a JS file (assume its name is custom.js) in your theme folder, and put this content inside:

    $( function() {
        // Snippet goes here.
        var total = 0;
        $( '.like input:checked' ).each( function() {
            total += $(this).val();
        } );
        // Output total somewhere
        $( '#selector' ).text( total );
    
        // More snippet goes here.
    } );

    And then in your functions.php file of the theme, add the following code:

    add_action( 'wp_enqueue_scripts', function() {
        wp_enqueue_script( 'custom-handle', get_template_directory_uri() . '/custom.js', array( 'jquery' ), '', true );
    } );

    This thing is quite technical, though.

    #10422
    LFFprop
    Participant

    For my understanding, what this js is doing is counting the number of checked items with class=like, and displaying the counter, right?

    I was wondering, can I also include this in the page from where I launch the Frontend Submission?
    Because then I can control the location where I want the counter to be displayed.

    It would then look like:

    <script>
    var total = 0;
    $( '.like input:checked' ).each( function() {
        total += $(this).val();
    } );
    // Output total somewhere
    $( '#selector' ).text( total );
    </script>

    By the way, I created the .js file, stored it in the js folder of my theme, and included the call in the functions.php, but it doesn’t show a counter, and I don’t know if it counts…

    #10423
    Anh Tran
    Keymaster

    For my understanding, what this js is doing is counting the number of checked items with class=like, and displaying the counter, right?

    Yes, that’s right.

    I was wondering, can I also include this in the page from where I launch the Frontend Submission? Because then I can control the location where I want the counter to be displayed.

    Yes, by putting it in a custom JS file will help you control everything easier.

    By the way, I created the .js file, stored it in the js folder of my theme, and included the call in the functions.php, but it doesn’t show a counter, and I don’t know if it counts…

    As it’s in the js folder of your theme, you need to change the code in functions.php code to this:

    add_action( 'wp_enqueue_scripts', function() {
        wp_enqueue_script( 'custom-handle', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '', true );
    } );

    And please change the #selector in the snippet to the CSS selector of the element you want to show the total likes.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.