Js: Virtual Field Radio Buttons Values With Javascript

[MostlyJava]

Hi there. Is it possible to condition the values of a radiobutton using Javascript? What I want to do is that, when the Data Page loads, checks if it meets a condition, and if it does, based on that is the value of the first option of my radiobutton. I haven't been able to make the first part work, and i want to make sure that works before adding the 'If' statement. Here's the code I'm currently using:

 

<script>
window.onload=function(){
document.getElementByname("InsertRecordVirtual1")[0].value="AAA";
}
</script>

 

I have also change it used "getElementById", and change the statement inside the parenthesis with "InsertRecordVirtual10", that last one based on what I found here:

• Radio Button: A radio button includes multiple options and each option has an associated ID. The ID is a name followed by a number:

          -   InsertRecordFIELDNAMEX
          -   X is the radio button option order, which starts at 0 and increments based on the order of each radio option.

         For example if your radio button has three options: Red, Blue, Green
          -   Red is InsertRecordFIELDNAME0
          -   Blue is InsertRecordFIELDNAME1
          -   Green is InsertRecordFIELDNAME2

 

 

Is it possible to do what I am trying to do with a Virtual Field? If it is, how can I make it work? I appreciate your help!

[Jan]

Hello MostlyJava,

 

Welcome to Caspio forum!

If I understand correctly, you can use the following code:

<script>
window.onload=function(){
document.getElementById("cbParamVirtual1").value="AAA";
}
</script>

As far as I know, it is better to add a Header&Footer element, select the Footer element, click the "Source" button and enter the code.

The code works, if the Virtual field is the first ("Virtual1") and if the Form element of the field is Text Field.

 

If you could provide the URL of your page, maybe I can find the reason of the issue.

[MostlyJava]

Hello Caspio Evangelist, and thank you for your help!

 

I do have the code in the Footer section of the Data Page, and i can make the code work on a virtual field that is text. What I want to do is change the first option on a radio button, which belongs to a virtual field.

 

this is the link to the form I am using. It's a test form that I am using just to not mess up the main one:

http://b4.caspio.com/dp.asp?AppKey=e6b82000ba913c04f9af42f4b38b

 

This is the code I currently have in the Footer of the Data Page:

 

<script>
window.onload=function(){
document.getElementById("cbParamVirtual1").value="AAA";
}
</script><script>
window.onload=function(){
document.getElementById("cbParamVirtual2").value="AAA";
}
</script>

 

 

If you open the link, you will see that the Virtual2 (Text Field) works, but the Virtual1 (Radio Button) doesn't. I know that Radio Buttons are referenced differently, but I have tried some variations and haven't been able to make it work. I have seen how to reference a Radio Button, and how to reference a Virtual Field, but haven't seen how to reference a Radio Button that is part of a Virtual Field.

[Jan]

Hello MostlyJava,

 

As far as I know, the id of the first option of the Virtual1 field is "cbParamVirtual10".

Do you want to change only the value of the option?

You can use the next script, it changes also the label of the option:

<script>
window.onload=function(){
var new_value = "AAA";
document.getElementById("cbParamVirtual10").value=new_value;
/* change the label text */
document.getElementById("cbParamVirtual10").nextSibling.innerHTML = new_value;
}
</script>

I hope, it helps.

[MostlyJava]

Sorry, tried the code, but still unsuccessful.

The first Radio Button on Virtual Field 1 still displays "BBB".

I'll keep trying some variations on my own, if you find something else that can help me, please let me know.

 

Thank You!

[Jan]

Hello MostlyJava,

 

If I understand correctly, you use two scripts that use "window.onload=function()", but the onload event happens once. In this case, only the last function executes.

 

You can concatenate both scripts as follows:

<script>
window.onload=function(){
var new_value = "AAA";
/* change the value of the first option of the checkbox */
document.getElementById("cbParamVirtual10").value=new_value;

/* change the label text of the first option of the checkbox */
document.getElementById("cbParamVirtual10").nextSibling.innerHTML = new_value;

/* change the Virtual text field */
document.getElementById("cbParamVirtual2").value=new_value;
}
</script>

I hope, it helps.

[MostlyJava]

You are absolutely right, my mistake was having two separate "onload"s instead of putting both actions inside the same function.

 

This helps me a lot! Thank you very much!