homepage Welcome to WebmasterWorld Guest from 54.167.249.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Can any one correct my javascript error while clicking Radio Buttons.
Error while matching actions on click event of Radio Button.
srins




msg:3710335
 3:41 pm on Jul 29, 2008 (gmt 0)

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




msg:3710502
 6:13 pm on Jul 29, 2008 (gmt 0)

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>


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved