Cannot get OnClick Radio Button to function properly

Applications Forms
, ,
#1

I created a form application that contains a number of radio buttons. Depending on if particular radio buttons are checked, I decide if certain text fields are editable or not.
To accomplish this feat, I created code that looks like the following:

if(document.F1.Tractor_Exp[0].checked){
document.F1.Tractor_Yrs.value = “”;
document.F1.Tractor_Yrs.disabled = true;
document.F1.Tractor_Yrs.style.background=‘CCCCCC’
}
if(document.F1.Tractor_Exp[1].checked){
document.F1.Tractor_Yrs.disabled = false;
document.F1.Tractor_Yrs.style.background=‘FFFFFF’
}

Since this method mimics the example provided in the ScriptCase Documentation, I thought it would work perfectly.
However, the javascript event is not functioning at all.

Can another see what I am doing wrong, or make suggestions to get this event to work?

Please Advise

#2

Can you describe what you have done exactly? Which events did you use etc. I have a very complicated form with a lot of ajax events. Clicking on checkboxes opens certain blocks and these settings are stored in the database. So when the record is retrieved the visibility of blocks adjust to these settings. It’s all working very well, so I wonder how you have implemented this.

#3

Thanks Aducum,

I have a single digit column in my table called Tractor_Exp, and I am using it as a radio button on my form application. If my user clicks “YES” on my radio button, I want another column called Tractor_Yrs to have a white background and become enabled for my user. But if the user clicks “NO” on my Tractor_Exp radio button, I want the Tractor_yrs column on my form to have a grey background, and become disabled. The javascript code that I created to accomplish this was coded under the OnClick event for the Tractor_Exp radio button.

#4

Can you put some alert javascript to prove that the event is firing? I think that you might need to dive into the generated code / html to retrieve the correct form and fieldnames. It’s most likely that the problem resides here.

#5

I am having the same problem, scriptcase documentation does not explain much. the javascript event is firing, i guess the syntax of the “document.F1.xxx” command is not working.
Did anyone managed to find the solution to this?

#6

In Chrome or Firefox: go to your application, open the ‘Developer Tools’ by pressing F12 and select the ‘Console’ tab; then test your application and watch for any error message in the Console tab.

#7

Thanks Mamede.
I used the developer tools and found that the way thes scriptcase generate the code for the radio button is by name is by record no (row).
E.g if I have 10 records list and my radio button field is opt1, the name of the field is opt1_x where x is the row.
The js script works only if I enter the following to uncheck the radio button :
Document.F1.opt1_1.checked = false; // row1 first radio field
Document.F1.opt1_2.checked = false; // row 2 first radio field
Document.F1.opt2_1.checked = false; // row1 second radio field
Document.F1.opt2_2.checked = false; // row 2 second radio field
Is there a way to use a Generate the statement using the row & radio button? I tried but did not work.

#8

Try to use jQuery and the name selector with an expression:


$("[name^='opt1_']").prop("checked", false); // change all elements which the attribute 'name' starts with "opt1_" (e.g., opt1_1, opt1_2, opt1_3, ...)
$("[name^='opt2_']").prop("checked", false); // change all elements which the attribute 'name' starts with "opt2_" (e.g., opt2_1, opt2_2, opt2_3, ...)
#9

Mamede, your code works, but it clears all records (vertically down) for the first and second radio field which is not right.,

This code solve the problem. Thanks

var elename = ‘opt’+prev_sel+’_’+recno;
$("[name=’" + elename + “’]”).prop(“checked”, false);

#10

How to get the text() of the particular radio button and change the color?

I need to extract the text value “>30” to compare with another string, if equal change the text color :

The chrome developer tool show the following field opt6_1 as below:

<td class=“scFormDataFontOddMult css_opt6__line”>
<input type=“radio” name=“opt6_1” value=“1” onclick=“do_ajax_perform_assessment_event_opt6__onclick(1);”> 30 </td>

#11

You can get that text with this code:


$("[name='" + elename + "']").parent().text()
#12

Thanks a lot Mamede. :slight_smile:

Here is my final code, hope others will find it useful.


var elename = 'opt6_'+recno;
var eleprev = 'opt5_'+recno;

// get the text of the radio button
var eletext = $("[name='" + elename + "']").parent().text();

if (($.trim(eletext)=="-") || ($.trim(eletext)=="")) {
    
    // disable the radio button
    $("[name='" + elename + "']").prop("disabled", true);
    
    // change the color of the prev radio button text
    $("[name='" + eleprev + "']").parent().css("color", "red");
}
else {

    // change the color of the radio button text
    $("[name='" + elename + "']").parent().css("color", "red");
}
#13

You’re welcome! :slight_smile: :slight_smile: