What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by swaplist on June 26, 2015 at 06: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. 

     

    Page URL:
    http://form.jotformpro.com/form/51760730285960

    Screenshot
    using form text boxes Form Calculation matrix cell matrix form conditions
  • Profile Image

    Answered by Ben 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.

  • Profile Image

    Answered by swaplist on June 27, 2015 at 08: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"
    ...
  • Profile Image
    JotForm Support

    Answered by Welvin on June 28, 2015 at 04: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

    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

  • Profile Image

    Answered by swaplist on June 28, 2015 at 05: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.
    ...
  • Profile Image

    Answered by swaplist on June 28, 2015 at 05: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.
    ...
  • Profile Image
    JotForm Support

    Answered by Welvin 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