You are viewing limited content. For full access, please sign in.

Question

Question

Using Javascript With Forms Tables

asked on June 10, 2014

 I am trying to use some script to manipulate the items in a table in the form editor. Such as showing a specific field when a check box is checked. I am not sure how to target a specific field/id in javascript. I have tried things such as 

$('#q25 input').val("afasdf");

to no avail.

 

I am wondering how exactly I target these fields in the tables if some of the tables have multiple columns.

 

I have attached a picture of the current setup.

problem.jpg
problem.jpg (75.22 KB)
0 0

Answers

APPROVED ANSWER
replied on June 11, 2014 Show version history

Generally, something like $('#q25 input') is the way to target most fields when they're not in a table. I like to make it easier and assign a CSS class to the fields I'm working with and just use that instead of the ID, but doing it this way is also fine.

 

Targeting the fields in a table is a little trickier, just because these fields can be repeatable. If you look at the HTML for a repeatable field in a table, you'll see something like this:

<input id="Field3(1)" class="singleline cf-xlarge form-ui-valid user-success" type="text" vo="e" list="datalist3" maxlength="4000" name="Field3(1)"></input>

Basically, the ID is the same as the column's ID with a number appended to the end. This is to ensure the uniqueness of each ID attribute. This is also why something like $('#q3 input') will not target this field.

 

I've found it is easiest to target each row or column and then find the correct fields within that context. The most straightforward way to reference these fields is to give the column a CSS class, and then look for fields with that class in each row.

 

Here's an example that calculates the subtotal for table rows:

 

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    function sumtotal() {
        var sum = 0;
        $('.cf-table-block tbody tr').each(function () {
            var s = 0;
            $(this).find('.price input').each(function () {
                s += parseNumber($(this).val());
            })
            $(this).find('.subtotal input').val(s);
            sum += s;
        });
        $('.total input').val(sum);
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

Basically, this code waits for the user to leave a field in the table, and then, for each table row, finds each field with the price CSS class, adds them together, and puts the total in the appropriate field.

 

Even though you're doing something different, this sort of structure should probably work for you. Watch for a blur event on .cf-table-block, then go through each row and perform the calculations you want.

1 0
replied on June 11, 2014

Thank you!

Now this is kinda involves this question but not really.. There is already an answer post on how to do phone number masks but I just cannot get it to work. If its not too reiterative, could you re-explain it?

 

Again, I appreciate your help!

0 0
SELECTED ANSWER
replied on June 11, 2014

You basically just need to make sure you're getting the jQuery mask library before running any code that uses the script. This help page gives step-by-step instructions for creating phone number field masks. If you still have questions after that, it's better to post a new question rather than add on to a mostly unrelated question.
 

0 0
SELECTED ANSWER
replied on June 11, 2014

You basically just need to make sure you're getting the jQuery mask library before running any code that uses the script. This help page gives step-by-step instructions for creating phone number field masks. If you still have questions after that, it's better to post a new question rather than add on to a mostly unrelated question.
 

0 0

Replies

replied on February 6, 2017

Hi Eric,

I want to know where should I specify the class for a table (i.e. cf-table-block)?  In my example, I have two tables to perform calculation on their fields. How to check for the class of the second table used?

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.