How can I add a matrix with multiple checkboxes preselected

  • ugrinoskiwinner
    Asked on August 4, 2016 at 7:57 AM

    Hello,

     

    I need a table like the one on the screenshot with multiple choices preselected. I need it for display purposes only.

    For calculation purposes I only need the last row to be selected and to contain values, but am thinking to create another form for it if nothing else works.

     

    Best regards,

    Goran

    Jotform Thread 898264 Screenshot
  • ugrinoskiwinner
    Replied on August 4, 2016 at 9:30 AM

    I need it to look like the photo bellow. And to be read only.

     

    Is it doable?

     

    Thanks

    How can I add a matrix with multiple checkboxes preselected Image 1 Screenshot 20

     

  • Support_Management Jotform Support
    Replied on August 4, 2016 at 12:23 PM

    Hello Goran, yes that's achievable by using our Matrix Field.

    How can I add a matrix with multiple checkboxes preselected Image 1 Screenshot 30

    Once added, click the GEAR icon at the top right of the Matrix dragged on your Form Builder and make the following changes:

    1. Set the ROWS and COLUMNS as you see fit (separate them with a new line). I was hoping to emulate the same labels you had on the screenshot but I don't know Russian :)

    2. Change the INPUT TYPE to Checkbox

    3. Set your CALCULATION VALUES since you mentioned you would need one for the last row

    Here's a related guide How-to-Perform-Form-Calculation-in-the-Matrix-Field (you can pick which row you would like to be included in the calculation) The guide will be accompanied with screenshots so it's easy to follow.

    How can I add a matrix with multiple checkboxes preselected Image 2 Screenshot 41

    Now, for your requirement to have it as "read-only" I'm afraid there's no current way to achieve that. Since our forms only accept CSS, and there's no real way to disable an input fields via CSS, your only option is to use the Form's full source code. The general workflow would be as follows:

    1. Finish your Matrix table and finalize your form.

    2. Grab your form's source code [GUIDE: How-to-get-the-Full-Source-Code-of-your-Form

    3. Embed it on your website.

    4. Then either use HTML or JS to disable the checkboxes within the table.

       a. You may either manually set each checkbox with the disabled="disabled" HTML tag

       b. Or use Javascript (or jQuery to make use of selectors easier) A good selector that you can try is .form-matrix-values input (this means it will target ALL input fields within the table that has a class name "form-matrix-values")

    Hope these helped, if you have further questions, don't hesitate to ask.

  • Support_Management Jotform Support
    Replied on August 4, 2016 at 12:27 PM

    BTW, I forgot to mention, you may also preselect the checkboxes based on your preference by using the full source code. Just append the "checked" attribute to your desired checkboxes.

  • ugrinoskiwinner
    Replied on August 5, 2016 at 2:34 AM

    Thanks for the detailed answers.

     

    Was hoping for a more in-house solution, but a man's gotta do, what a man's gotta do.

     

    Thanks again.

  • Elton Support Team Lead
    Replied on August 5, 2016 at 3:09 AM
  • Support_Management Jotform Support
    Replied on August 5, 2016 at 2:00 PM

    Thanks for the input Randy :)

    @Goran, please give it a whirl and let us know how it goes (prepopulating the checkboxes using URL parameters and the workaround suggested by Randy to disable the matrix field using Conditional Logic)

    Don't hesitate to get back to us if you need further help.

  • ugrinoskiwinner
    Replied on August 9, 2016 at 2:03 AM

    Thank you guys for the fantastic solutions. I was in a hurry and turned the form around.

     

    Namely, I needed the form as some sort of pricing table showing features (rows values) for each package (column).

    What I did is a dropdown menu with packages, that shows features for the package you select. Works for my scenario.

     

    Again, thanks for the help.

  • beril JotForm UI Developer
    Replied on August 9, 2016 at 4:35 AM

    On behalf of my colleagues and Randy, you're kindly welcome. When I've checked your forms I see that you're using hidden fields on your form. And, you're trying to show hidden fields with a condition.

    How can I add a matrix with multiple checkboxes preselected Image 1 Screenshot 30

    Please note that hidden box fields can never be displayed in a form because they use the HTML tag "<input type="hidden">" which, when interpreted by the browser is a field that's invisible to the user so it causes conflict and your form will not work properly.To solve that issue, please show your fuels as you see below:

    How can I add a matrix with multiple checkboxes preselected Image 2 Screenshot 41

    If you want to show/hide your fields you need to use conditions. Please, check the guide below for more information:

    https://www.jotform.com/help/316-How-to-Show-or-Hide-Fields-Base-on-User-s-Answer

     

     

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.