Input Table: How to add a warning message per cell?

on the attached form I am trying to Compare the hidden field Max Temp, with temperatures entered in the temp table, I the temperature is greater than the Max Temp, I want to display "Out of temperature range" (in red) to the right of the entered temperature in the temperature table for each of the 5 coolers. If it is equal to or less than the Max Temp, I want to display "In temperature range" to the right of the entered temperature in the temperature table for each of the 5 coolers.

Hi Thomas,

Thanks for reaching out to Jotform Support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Thanks for your patience and understanding, we appreciate it.

Thank you.
Thomas A Michaud
tommichaud007@gmail.com
405-474-0492
...

Hi Thomas,

Input table is considered a single field. As a workaround, you need to add a 10 Paragraph Elements and 5 Form Calculation widget. The Form Calculation widget will extract the value on each cell of the Input Table field. Then, you will also need a Show/Hide field condition. After you set this up, you need to inject a Custom CSS code. Let me show you how:

1. In Form Builder, click on Add Element menu on the left side of the page.

2. Under the Basic Tab, scroll down and add two Paragraph elements.

3. Then, click on the Pencil icon and add your message.

4. Cick on the Save button on the left side of the field.

To change the color. Here's how:

1. In Form Builder, click on the Paragraph Element.

2. Then click on the Pencil icon on the left.

3. Select all text and click on Text Color at the top.

4. In the dropdown menu, select the color you want.

You need to add 8 more Paragraph elements in this case, 2 for each cell of the Input Table element. After that, we need to add a Form Calculation widget and select each cell of the Input Table element to extract the Value. Here's how:

1. In Form Builder, click on the Add Form Element menu on the left side of the page.

2. Click on the Widgets tab, click on the Form Calculation widget to add it to your form.

3. In the menu on the left, click on Add Field.

4. Search for the Input Table field, and click on it.

5. Then, select the first cell of the field, and click on Done.

6. Finally, click on it to make it A-Z, for String type, and click on the Save button below.

You also need to do this for each cell of the Input Table element. After that, we can now create a Show/Hide a field condition. Let me show you how:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Settings.

2. Click on Conditions on the left of the page.

3. Then, click on Add Condition.

4. Select Show/Hide a field condition.

5. Set the conditions like you see below and click on Save.

Condition for Equal to and Less Than:

Condition for Greater Than:

You will need to set up 2 conditions for each cell of the Input Table. So, you'll need a total of 10 Show/Hide a field condition. After that, we can now inject the custom CSS code to make the error messages align with each cell in the Input Table element. Here's how:

1. First, copy this code:

/*Align Paragraph Element to Input Table cell #25345711*/

div#text_626,div#text_627  {

    margin-left: 220px;

    margin-top: -280px;

}

div#text_641,div#text_642 {

    margin-left: 220px;

    margin-top: -225px;

}

div#text_645,div#text_646 {

    margin-left: 220px;

    margin-top: -168px;

}

div#text_649,div#text_650 {

    margin-left: 220px;

    margin-top: -112px;

}

div#text_651,div#text_652 {

    margin-left: 220px;

    margin-top: -60px;

}

/*Ends here*/

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

That's it. Here's a screencast on how it should work:

You can check my cloned form here. You might also want to check out this guide about How to Clone an Existing Form From a URL.

Give it a try and let us know how it goes.

https://form.jotform.com/250254770002142

Jenette:

I changed the temperature input table before I received your solution. Can you please edit your CSS code to align with the temp inputs?

Thanks very much.

Tom

Also, why can't we use the same temperature in range, temperature out of range statements multiple times instead of having separate statements for each calculation?

Tom

Hi Tom,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Thanks for your patience and understanding, we appreciate it.

Thanks. You’re doing great!

Hi Thomas,

We need multiple paragraph element because each cell of the Input Table that will pass the data in the Form Calculation widget needs a Show/Hide a field condition that will show or hide the Paragraph element. Since you have 5 fields in the Input Table, then we need 5 In temperature and 5 Out Temperature. If we base the condition in the Input Table element, you need to manually add the numbers in the Condition. Here's an example screenshot:

You'll need to add all the numbers in the Value field. Also, we need 5 Form Calculation widgets to extract the value inside the Input Table. You can follow the steps above on how to add the Form Calculation widget and add the Input Table cell inside it. The condition will also be the same, and you need to create 10 Show/Hide a field conditions.

Now, regarding with the CSS code, I cloned your latest form, and you can inject these updated custom CSS codes below:

/*Align Paragraph element inside Input Table*/ 

div#cid_626 {

margin-left: 100px;

margin-top: -330px;

width: fit-content;

}

div#cid_641 {

margin-left: 100px;

margin-top: -295px;

width: fit-content;

}

div#cid_642 {

margin-left: 100px;

margin-top: -255px;

width: fit-content;

}

div#cid_643 {

margin-left: 100px;

margin-top: -220px;

width: fit-content;

}

div#cid_644 {

margin-left: 100px;

margin-top: -180px;

width: fit-content;

}

div#text_627 {

margin-left: 100px;

margin-top: -330px;

width: fit-content;

}

div#cid_645 {

margin-left: 100px;

margin-top: -295px;

width: fit-content;

}

div#cid_646 {

margin-left: 100px;

margin-top: -260px;

width: fit-content;

}

div#cid_647 {

margin-left: 100px;

margin-top: -220px;

width: fit-content;

}

div#cid_648 {

margin-left: 100px;

margin-top: -185px;

width: fit-content;

}

/*Ends here*/

You can also follow the steps above on how to inject the custom CSS codes. Here's a screencast of the result:

I will also attach my cloned form here. You can test and check it if you want. Additionally, you can also clone it, we have a guide on how to do that here.

Give it a try and let us know if you need any help.

Hi Tom,

As for your other question, I've moved that to a new thread. You can check that out here.

Let us know if you have any other questions.