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

Question

Question

How to add options to radio button in a table using javascript

asked on January 29, 2021

Can someone help with how to populate radio button in a table using javascript

0 0

Answer

SELECTED ANSWER
replied on February 2, 2021

Hi Vineela,

 

Sorry for the late, I was in weekend ^^.

First, check if your table have a checkbox with 1 value

 

 

 

 

Then find your field number. Let's see the preview then right click on your checkbox and select "Examine the item".

 

 

Then check your field number.

 

 

Then change it in the Javascript's code.

0 0

Replies

replied on January 29, 2021

I have done it using Checkboxes

$(document).ready(function() {
  $('.myTable').on('click', '.checkBox input', unCheck);
  function unCheck() {
     $('.checkBox input').removeAttr("checked");
     $(this).prop("checked", true);
});

 

myTable is the class of the Table

checkBox is the class of the checkbox field "Display"

1 0
replied on January 29, 2021

May I suggest that you will get better responses if you offer a more detailed description of what you trying to develop.

0 0
replied on January 29, 2021

I want something like this, a static table with 3 rows and each row should have a radio button, the user can select only 1 row in a table by choosing any 1 radio button

0 0
replied on January 29, 2021

Do they need to behave as a group or are they independent of one another?

replied on January 29, 2021

I'm sure it's possible through Javascript. Would you get what you need by showing the table of information/input and then populate a separate radio button group from that they would use to make the selection? that may be easier.

0 0
replied on January 29, 2021

No, I would like this in one table, all I need is JavaScript syntax to set the text of radio button to Option 1 for row 1.

0 0
replied on January 29, 2021

Hi Vineela!

 

I created not radiobutton but a checkbox button ; then in my javascript, I said to use this checbox button like a radiobutton (means you can only choose 1 option).

 

 

//Page is laoded
$(document).ready(function ()
	{
      	//Set Text of each box
      	$('#Field3\\(1\\) label').text("Text 1");
       	$('#Field3\\(2\\) label').text("Text 2");
       	$('#Field3\\(3\\) label').text("Text 3");
      
      	//Set Value of each box
      	$('#Field3\\(1\\) input').val("Value 1");
       	$('#Field3\\(2\\) input').val("Value 2");
       	$('#Field3\\(3\\) input').val("Value 3");
      
      	//Click on box
      	$('[id^="Field3"] input').click(function(){
          	//Uncheck others checkbox
     		Uncheck($(this).attr('id'));
		});
    });

// Function Uncheck
function Uncheck(e){
  	//Uncheck all checkbox with not this id
  	$(':checkbox').each(function() {
      		if($(this).attr('id') != e)
            	{
            		this.checked = false;                        
                }
        });
}

 

2 0
replied on January 29, 2021 Show version history

I changed mine to checkbox and tried with your code but it did not work. Checkboxes are not showing.

 


        //Set Text of each box
        $('#Field2\\(1\\) label').text("Text 1");

        $('#Field2\\(2\\) label').text("Text 2");

        $('#Field2\\(3\\) label').text("Text 3");
 

//Set Value of each box

        $('#Field2\\(1\\) input').val("Value 1");

        $('#Field2\\(2\\) input').val("Value 2");

        $('#Field2\\(3\\) input').val("Value 3");

       

 

0 0
replied on January 29, 2021

You have to assign a Choice Value, Just one such as "Y" for a checkbox to appear

If you don't want to see the Choice value you can hide it with JS

0 0
replied on January 29, 2021 Show version history

For the Options 1,2 and 3, I might just show the Row Label, but change the row name from Row{n} to Option {n}.

Actually in the case of Fixed Rows you can just enter the name for each row.

0 0
replied on January 29, 2021

In my scenario, checkbox option is not the same for all three rows, it is option 1, option 2, option 3 for each row.

0 0
replied on January 29, 2021

Other than the visual of the checkbox being selected for what line the user selects. How else is the value of the Checkbox used in your form/process?

0 0
replied on January 29, 2021

nothing much, I can use your suggestion as a work around, display row label for option. wondering why Olivier's code is not working for me to display check box option.

0 0
replied on January 29, 2021

Did you change the #Field3 to your field number?

0 0
replied on January 29, 2021

Yes I did

0 0
SELECTED ANSWER
replied on February 2, 2021

Hi Vineela,

 

Sorry for the late, I was in weekend ^^.

First, check if your table have a checkbox with 1 value

 

 

 

 

Then find your field number. Let's see the preview then right click on your checkbox and select "Examine the item".

 

 

Then check your field number.

 

 

Then change it in the Javascript's code.

0 0
replied on February 2, 2021

Great thanks Olivier. I did not add choice for checkbox and so it did not work. 

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

Sign in to reply to this post.