Can any one correct my javascript error while clicking Radio Buttons.

Error while matching actions on click event of Radio Button.

[srins]

From my code below,
There are two radio buttons based on clicking the radio button I should enable/disable another file field i.e Browse button.

By Default the selected will be in the radio button
with value "Import results for testcases exported from hotice web tool"
will be checked when loaded first time.

Now,When I click the radio button "Import results with testcase and command for non-existing testcases",It should enable the theTestcaseFile property.

When i click on the radio button "Import results for testcases exported from hotice web tool",It should disable the theTestcaseFile property.

<code>
<tr>
<bean:define id="selectedImportResultOption"
property="selectedImportResultOption" name="FileUploadForm" />
<logic:iterate id="importResultOptions"
property="importResultOptions" name="FileUploadForm">
<td width=50%>
<bean:define id="importResultOptionsValue">
<bean:write name="importResultOptions" />
</bean:define>
<html:radio property="selectedImportResultOption"
value="<%=importResultOptionsValue%>"
styleId="<%=importResultOptionsValue%>"
onclick="enabledisableTextField()" />
<bean:write name="importResultOptions" />
</td>
</logic:iterate>
</tr>

<tr>
<td width=25%>
<b>Upload TestCase Template File: </b><span class="warning">*</span>
</td>
<td width=75%>
<html:file property="theTestcaseFile" disabled="true" />
&nbsp;&nbsp;&nbsp;
</td>
</tr>

<script type="text/javascript">
var selectedImportResultOption = document.getElementById("<bean:write name="selectedImportResultOption"/>");
var selectedImportResultOption =
document.forms["FileUploadForm"].elements["<bean:write name="selectedImportResultOption"/>"];
selectedImportResultOption.checked=true;

//alert("Selected varible" +selectedImportResultOption.value);

function enabledisableTextField()
{
var selectedImportResultOptions = document.getElementById('Import results with testcase and command for non-existing testcases');
alert("Selected varible" +selectedImportResultOptions.value);

var selectedoption = document.getElementById('Import results for testcases exported from hotice web tool');
alert("Selected varible option default" +selectedoption.value);


if(selectedImportResultOptions.value == "Import results with testcase and command for non-existing testcases")
{
alert("Inside Import results with testcase and command for non-existing testcases");
document.getElementById('theTestcaseFile').disabled = false;
}else
{
alert("Import results for testcases exported from hotice web tool");
document.getElementById('theTestcaseFile').disabled = true;
}
}
</script>
<code>

The Result,I am getting are,

First time while loading,
Getting alert as ,
Import results for testcases exported from hotice web tool as checked,and theTestcaseFile property as disabled.

Now,I click on the other radio button,
I am getting following alerts specified in the code above.

alert("Selected varible" +selectedImportResultOptions.value);
alert("Selected varible option default" +selectedoption.value);
alert("Inside Import results with testcase and command for non-existing testcases");

and Enable is true .Working fine.

Again,When i click on radio button as "Import results for testcases exported from hotice web tool "

All the three are again matching and enable is true.

i.e

alert("Selected varible" +selectedImportResultOptions.value);
alert("Selected varible option default" +selectedoption.value);
alert("Inside Import results with testcase and command for non-existing testcases");

But i need to make enable = false.

Can any one correct the code.
Where i am going wrong.

I will attach the view source of neccessary,
<code>

<td width=50%>

<input type="radio" name="selectedImportResultOption" value="Import results for testcases exported from hotice web tool" checked="checked" onclick="enabledisableTextField()" id="Import results for testcases exported from hotice web tool">
Import results for testcases exported from hotice web tool
</td>

<td width=50%>

<input type="radio" name="selectedImportResultOption" value="Import results with testcase and command for non-existing testcases" onclick="enabledisableTextField()" id="Import results with testcase and command for non-existing testcases">
Import results with testcase and command for non-existing testcases
</td>

</tr>
<tr>
<td width=25%>
<b>Upload TestCase Template File: </b><span class="warning">*</span>
</td>
<td width=75%>
<input type="file" name="theTestcaseFile" value="" disabled="disabled">
&nbsp;&nbsp;&nbsp;
</td>

================
<script type="text/javascript">
var selectedImportResultOption = document.getElementById("Import results for testcases exported from hotice web tool");
var selectedImportResultOption =
document.forms["FileUploadForm"].elements["Import results for testcases exported from hotice web tool"];
selectedImportResultOption.checked=true;

//alert("Selected varible" +selectedImportResultOption.value);

function enabledisableTextField()
{
var selectedImportResultOptions = document.getElementById('Import results with testcase and command for non-existing testcases');
alert("Selected varible" +selectedImportResultOptions.value);

var selectedoption = document.getElementById('Import results for testcases exported from hotice web tool');
alert("Selected varible option default" +selectedoption.value);


if(selectedImportResultOptions.value == "Import results with testcase and command for non-existing testcases")
{
alert("Inside Import results with testcase and command for non-existing testcases");
document.getElementById('theTestcaseFile').disabled = false;
}else
{
alert("Import results for testcases exported from hotice web tool");
document.getElementById('theTestcaseFile').disabled = true;
}
}
</script>

</code>

Thanks,
Srins.

[Arno_Adams]

Hi,

Hope this will do the trick:

function foo(state){
var o = document.getElementById('file');
o.disabled = (state == true) ? false : true;
}
<form name="frm1" id="frm1" method="post" action="">
<label for="hotice">Import results for testcases exported from hotice web tool</label><input type="radio" name="choice" id="hotice" value="1" onclick="foo(false);" checked="checked" /><br />
<label for="other">mport results with testcase and command for non-existing testcases</label><input type="radio" name="choice" id="other" value="1" onchange="foo(true);" /><br />
<input type="file" name="file" id="file" disabled="disabled" />
</form>