Jump to content

Js: Virtual Field Radio Buttons Values With Javascript


Go to solution Solved by Jan,

Recommended Posts

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!

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites
  • Solution

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...