How to detect when all of the matrix cells have been filled out?

  • swaplist
    Asked on June 26, 2015 at 6:36 AM

    I am using form collapse so that, the user does not get to see the 4th question, until they have answered the third  question.

    The 3rd question is in the form of a TEXT MATRIX.

    The user needs to fill out 5 text boxes in a matrix. 

    I'd like the matrix (question #4) to HIDE once the matrix is FILLED....Which, I can do with CONDITIONS.

    However... currently, the matrix HIDES when the FIRST of five text boxes are filled.

    The condition... IF ___ is FILLED, hide ____.

    Is there a way to make it so that... "HIDE" = ALL BOXES within that matrix?

    PS- I am a novice computer user. 

     

    Jotform Thread 597267 Screenshot
  • Ben
    Replied on June 26, 2015 at 10:59 AM

    What I would suggest is to add the Form Calculation widget to your jotform and then set it up to capture one of the cells only.

    This should then be repeated for the amount of times as there are fields in your matrix. In the above sample, you would need 5 Form Calculation widgets in total to detect this.

    All that is required is to set the conditions to check if the form calculation is filled and if all of them are, to show the next field, otherwise to not do that.

    In such condition you will need and AND action clause or "all" as shown.

    You can see more about this here: How to Find The OR operator in conditions?

    If you happen to have any questions in regards to this, do let us know and we would be happy to assist.

  • swaplist
    Replied on June 27, 2015 at 8:18 PM
    The last option in the matrix asks the user to specify number of hours.
    The user CAN submit "1".
    However, when the user wants to submit 10 or 11 or 12 hours, the matrix disappears when "1" is typed.
    As a work-around, I tried a condition.... if cell "contains"
    12,11,10.5,10,9.5,9,8.5,8,7.5,7,6.5,6,5.5,5,4.5,4,3.5,3,2.5,2,1.5,01,
    I also tried
    12,11,10.5,10,9.5,9,8.5,8,7.5,7,6.5,6,5.5,5,4.5,4,3.5,3,2.5,2,1.5,1.0
    Neither solves the issue.
    Any suggestions?
    Reminder again- I'm a novice computer user but,
    I did a google search for the same question and got stuff like this:
    function allFilled() {
    var filled = true;
    $('#add_prod_name, #add_prod_image, #add_prod_description_short, #add_prod_description_long, #add_prod_price').each(function() {
    if($(this).val() == '') filled = false;
    console.log($(this).val())
    });
    return filled;
    }
    The problem is, of course, it looks like "blah blah blah blah blah" to me.
    Found it here: http://stackoverflow.com/questions/30115866/how-to-properly-check-if-all-form-elements-are-filled-with-javascript?lq=1
    I was able to adjust box sizes and colors via the CSS "designer" tool but, you guys made that idiot proof so I could do it.
    Stuff like above? Have NO IDEA how to implement.
    I know, for example, when I'm in "designer" and click on the example in the picture I sent with my last email...
    "1) Hours I want to unload"
    The CSS response is...
    .form-input-wide.jf-required {
    }
    #cid_181 {

    }
    IS IT JUST A MATTER OF CUT& PASTE???
    And, if yes, where do I put it?
    within the { } after #cid_181?
    within the { } after ".form-input-wide.jf-required"
    function allFilled() {
    var filled = true;
    $('#input_181_0_0, #input_181_0_1, #input_181_0_2, #input_181_0_3, #input_181_0_4').each(function() {
    if($(this).val() == '') filled = false;
    console.log($(this).val())
    });
    return filled;
    }
    PS- I would NOT take offense if your response it...
    "Dont add stuff when you're clueless"
    ...
  • Welvin Support Team Lead
    Replied on June 28, 2015 at 4:00 AM

    Why not use a radio button or a dropdown field that would serve as your gateway to proceed to another field and hide the previous one?

    I have created this form for example: http://www.jotformpro.com/form/51778680177973

    How to detect when all of the matrix cells have been filled out? Image 1 Screenshot 20

    Your current settings won't work because as soon as the field is filled, the conditional logic will be triggered without any delay.

    This is the easiest way I could think to make this possible. Let me know your thoughts and/or feedbacks on this method.

    Thanks

  • swaplist
    Replied on June 28, 2015 at 5:18 AM
    After I sent that message, I continued to surf the web looking for an answer.
    I now realize that my proposed solution would not solve the problem of "1" being interpreted as "finished" when the user meant to type "10".
    You're right in thinking about drop down boxes... but they're a pain in the ___ on mobile phones.
    I have tried not to use them.
    Here is my most current thought over the past several hours...
    Is there a way to REQUIRE the user to input a 2 digit entry?
    That way, in theory, we wouldn't have the "01" vs "10" problem?
    I read something about inserting "printf" and %2f but not sure what that means.
    ...
  • swaplist
    Replied on June 28, 2015 at 5:28 AM
    After I sent that message, I continued to surf the web looking for an answer.
    I now realize that my proposed solution would not solve the problem of "1" being interpreted as "finished" when the user meant to type "10".
    You're right in thinking about drop down boxes... but they're a pain in the ___ on mobile phones.
    I have tried not to use them.
    Here is my most current thought over the past several hours...
    Is there a way to REQUIRE the user to input a 2 digit entry?
    That way, in theory, we wouldn't have the "01" vs "10" problem?
    I read something about inserting "printf" and %2f but not sure what that means.
    ...
  • Welvin Support Team Lead
    Replied on June 28, 2015 at 10:04 AM

    I know what you mean about the dropdown field. So maybe, you can use the radio button field as per my test form.

    Unfortunately, there's no limit validation in the matrix field so I'm afraid that's not going to be possible at all. 

    The "IF" Javascript function is a different approach which will require you to use the form source codes. But I think that's too complicated since you have multiple fields in the form. 

    For now, the best option would be to use the radio button field as the gateway to hide the previous field and show the next field.

    Thanks