Question

Javascript: table field dropdown option

Forms

Updated April 5, 2016

asked on April 4, 2016

Hello,

I am trying to populate Dropdown option of a Field which is a part of table.

When I inspect the item it shows id=Field243(1)

I have tried these, but to no avail:

$($('#q243\$1\$ option')[1]).text("-XYZ);

$($('#q243\$1\$ option')[2]).text("-ABC");

Can someone please help in letting me know where I am going wrong?

Thanks in advance.

0 0

Answer

APPROVED ANSWER SELECTED ANSWER

replied on April 4, 2016

Sahil,

I'm guessing what you are doing is a multi-language form though and you just want to change it between French and German.

Assuming that the number of options within the dropdown is the same for both DE and FR then I would add that number of options to the drop-down at the start (they can just say "choice 1", "choice 2", "choice 3", etc). You can add separate values to these to make your logic in Workflow a little easier if you like.

Then use the first piece of code to just alter the text (if you need to alter the value as well, let me know and I can provide code).

To keep the form tidy, you may want to set it to not show the table until after someone has selected a language (to prevent them seeing "choice 1", "choice 2", etc. in the dropdown).

If I've missed the mark, let me know.

0 0

Replies

replied on April 4, 2016 • Show version history

Sahil,

Tables are referenced a little differently. Try the following:

$($('#Field243\\(1\\) option')[1]).text("ABC");

When you inspected the field, it should also have had an attribute called "name" and should have read name=Field243(1).

When you are referencing fields using jQuery, the '#' indicator refers to the "name" attribute of the field.

Hence, $('#Field243\$1\$') would locate the field with name "Field243(1)" (with the double backslashes to escape the literal parentheses).

EDIT: Added explanation behind the code.

0 0

replied on April 4, 2016

Thanks John,

But unfortunately, it doesn't work...

Can you please check again?

Thanks.

0 0

replied on April 4, 2016

Sahil,

Can you try pasting that line into your console and see if it changes it? I'm wondering if the problem is with your trigger rather than the code you are trying to change.

What code are you using for the trigger?

0 0

replied on April 4, 2016 • Show version history

John,

I have a if condition before:

$('#q280').click(function () {

if($('input[value="DE"]').is(':checked'))
{
$($('#Field243\$1\$ option')[1]).text("ABC");

Rest of the code in both blocks works fine.

the second part is in else statement...

0 0

View 11 previous replies

replied on April 4, 2016

Is Field 280 inside the table?

0 0

replied on April 4, 2016

0 0

replied on April 4, 2016

The trigger looks like it should be okay then (assuming all the values, etc. match up).

Have you tried running the debugger to see if the trigger is firing?

0 0

replied on April 4, 2016

0 0

replied on April 4, 2016

I am not really good with debugging....

0 0

replied on April 4, 2016

Ok. The easiest way to test whether the problem is with the code for changing the dropdown or with the trigger is to test the code independently.

Try pasting the code for changing the dropdown directly into the prompt at the bottom of the console and press enter.

It should change your drop-down if it is working correctly.

0 0

replied on April 4, 2016

no it doesn't :(

0 0

replied on April 4, 2016

Does your dropdown have any values?

0 0

replied on April 4, 2016

0 0

replied on April 4, 2016

should there be any, i mean the default ....

0 0

replied on April 4, 2016

Ok. The code we used only changes existing values. If you want to add a new value you would need something along the lines of:

$('#Field16\\(1\\)').append($('<option></option>').val('abc').html('abc'));

This will add a new value to the end of your drop-down.

Realize though, with your trigger this will add an identical option every time Field 280 is clicked.

If you can explain a little about your use case, I'd be glad to help try to identify a nicer solution.

0 0

replied on April 4, 2016

John,

It works great, however with one problem...

the append adds all the values to dropdown, let me clarify you the case.

IF q280 = DE

Then ABC

IF q280 = FR

Then XYZ

it's the same language thing, but got more complicated.

The replace works fine, but if somehow it's possible to work with filling the values on the fly, would be Awesome!!!

Thanks.

0 0

APPROVED ANSWER SELECTED ANSWER

replied on April 4, 2016

Sahil,

I'm guessing what you are doing is a multi-language form though and you just want to change it between French and German.

Then use the first piece of code to just alter the text (if you need to alter the value as well, let me know and I can provide code).

To keep the form tidy, you may want to set it to not show the table until after someone has selected a language (to prevent them seeing "choice 1", "choice 2", etc. in the dropdown).

If I've missed the mark, let me know.

0 0

replied on April 4, 2016

I think you are bang on!

Thanks a lot & very kind of you!!!

0 0

replied on April 4, 2016

I get these two in Console:

Failed to parse SourceMap: http://localhost/Forms/bundles/math.map;
Failed to parse SourceMap: http://localhost/Forms/bundles/angular-route.min.js.map

0 0

replied on April 5, 2016

John,

Sorry , but another road block...

The table where the field is part of has options to add rows, when I add rows the id changes to 243(2), 243(3) & so on & the values revert back to one which are hard coded.

I tried the following syntax, but doesn't work...

$($('[id^=Field243\\(] option')[1]).text('ABC');

the idea is, no matter what the id changes to, till the time it's in Field 243 the values should be as selected by the trigger.

Please help...

0 0

View 2 previous replies

replied on April 5, 2016

I would use something like this:

$(document).ready(function () {
  $('.language').on('blur','input',function () {
    $('.table tr').each(function () {
      targetField = $(this).find('.field');
      $(targetField.find('option')[1]).text("ABC");
    });
  });
});

0 0

replied on April 5, 2016

Thanks John,

Is there any way, I mean the way I was looking to achieve?

I ask so because I have many fields where the language has to be changed, so that way I can target the table fields separately....

0 0

replied on April 5, 2016

The problem (which I forgot to mention in my previous post), is that you also need this piece of code to execute when the "Add Row" button is clicked. For that reason, I would separate this section out into a separate function.

$(document).ready(function () {
  $('.language').on('blur','input',changeTableText);
  $('.table .cf-table-add-row').on('click', changeTableText);

changeTableText() {
    var language = $('.language input').val();
    $('.table tr').each(function () {
      targetField = $(this).find('.field');
      switch(language) {
        case 'DE':
          $(targetField.find('option')[1]).text("German Text 1");
          break;          
        case 'FR':
          $(targetField.find('option')[1]).text("French Text 1");          
          break;
      }
    });
  });
});

This way your code for altering the tables is executed under either of these conditions.

1. The user changes the language field

2. The user adds an additional row to the table

0 0

replied on April 5, 2016

The each() function on line 7 tells the code to repeat for every row in the table. That way it doesn't matter how many rows you have, it will run the text replacement on each row.

0 0

replied on April 5, 2016

Thanks John,

I will give it a shot, thanks again!!!

0 0

You are not allowed to follow up in this post.

Question

Question

Javascript: table field dropdown option

Answer

Replies

Sign in to reply to this post.