PDA

View Full Version : onkeyup seems to not be working in FireFox



livegenesis
01-27-2011, 10:11 PM
I have a function that checks to see the number entered in a textfield and then, if greater than 1, will change a radio button from Single to Multiple and visa versa. The function is called from the textfield with an onkeyup="function()". The problem I am having is that it works in IE just fine, but in Firefox it doesn't seem to be doing anything. I'm not getting any errors and can't seem to see what is the problem. Google doesn't seem to be any help... Anyone have any ideas?

Thanks!

devnull69
01-27-2011, 10:18 PM
I'm afraid you will have to post the code of the function because onkeyup generally is a valid event for both <input type="text"> and <textarea> in Firefox ... there must be some other problem

livegenesis
01-27-2011, 10:21 PM
function getUses() {
var listcost = document.getElementsByName('form[listcost]');
var uses = document.getElementById('Uses');

if (uses.value == 1) {
listcost[0].checked = true;
}
else {
listcost[1].checked = true;
}
}

Is it the radio button code that may be causing the problem?

Here is the HTML too:

<ol class="formContainer" id="rsform_5_page_1">
<li class="rsform-block">
<div><img src="/images/n2nsites_list/img2.gif"></div>
</li>
<li class="rsform-block rsform-block-totalrecords">
<div class="formCaption">Total # of records<strong class="formRequired">(*)</strong></div>
<div class="formBody"><input type="text" value="" size="20" name="form[TotalRecords]" id="TotalRecords" class="rsform-input-box"/><span class="formClr"><span id="component82" class="formNoError">Invalid Input</span></span></div>

<div class="formDescription"></div>
</li>
<li class="rsform-block rsform-block-dont-know">
<div class="formCaption"></div>
<div class="formBody">Don't know... Use the Calculator below to figure it out.<span class="formClr"></span></div>
<div class="formDescription"></div>
</li>
<div class="calcformpopup"><a href="/images/formcalcpopup.jpg" rel="shadowbox"><img src="/images/info.png"></a></div>

<li class="rsform-block rsform-block-totalbudget">
<div class="formCaption">Budget<strong class="formRequired">(*)</strong></div>
<div class="formBody"><input type="text" value="" size="20" name="form[TotalBudget]" id="TotalBudget" class="rsform-input-box"/><span class="formClr"><span id="component84" class="formNoError">Invalid Input</span></span></div>
<div class="formDescription"></div>
</li>
<li class="rsform-block rsform-block-listcost">
<div class="formCaption">Uses<strong class="formRequired">(*)</strong></div>

<div class="formBody"><input name="form[ListCost]" type="radio" value="Single" id="ListCost0" /><label for="ListCost0">Single</label><input name="form[ListCost]" type="radio" value="Multiple" id="ListCost1" /><label for="ListCost1">Multiple</label><span class="formClr"><span id="component153" class="formNoError">Invalid Input</span></span></div>
<div class="formDescription"></div>
</li>
<li class="rsform-block rsform-block-postage">
<div class="formCaption">Postage per Piece<strong class="formRequired">(*)</strong></div>
<div class="formBody"><input type="text" value="0.37" size="20" name="form[Postage]" id="Postage" class="rsform-input-box"/><span class="formClr"><span id="component86" class="formNoError">Invalid Input</span></span></div>

<div class="formDescription"></div>
</li>
<li class="rsform-block rsform-block-printing">
<div class="formCaption">Printing per Piece<strong class="formRequired">(*)</strong></div>
<div class="formBody"><input type="text" value="0.20" size="20" name="form[Printing]" id="Printing" class="rsform-input-box"/><span class="formClr"><span id="component87" class="formNoError">Invalid Input</span></span></div>
<div class="formDescription"></div>
</li>

<li class="rsform-block rsform-block-uses">
<div class="formCaption">Number of Uses<strong class="formRequired">(*)</strong></div>
<div class="formBody"><input type="text" value="1" size="20" name="form[Uses]" id="Uses" onKeyUp="getUses();" class="rsform-input-box"/><span class="formClr"><span id="component88" class="formNoError">Invalid Input</span></span></div>
<div class="formDescription"></div>
</li>
<li class="rsform-block rsform-block-calculate">
<div class="formCaption"></div>

<div class="formBody"><input type="button" value="Calculate" name="form[Calculate]" id="Calculate" onclick="calculateBudget()" class="rsform-button" /><span class="formClr"></span></div>
<div class="formDescription"></div>
</li>
<li class="rsform-block rsform-block-goto3">
<div class="formCaption">&nbsp;</div>
<div class="formBody"><input type="button" value="Back" class="rsform-button" onclick="preV(5, 0, 3)" id="GoTo3Prev" /><input type="button" value="Next" class="rsform-button" onclick="preV(5, 2, 3, false)" id="GoTo3Next" /></div>
</li>
</ol>

oVTech
01-28-2011, 10:35 AM
It is very hard to see your mistakes when you have all that code in there. Every time you need to debug JS code just limit everything to what your JS code is concerned with.

Here is your mistake:
var listcost = document.getElementsByName('form[listcost]');

<input name="form[ListCost]" type="radio" value="Single" id="ListCost0" />

<input name="form[ListCost]" type="radio" value="Multiple" id="ListCost1" />

Those names do not match.

Here is a working version.


<html>
<head>
<title>onkeyup</title>
</head>
<body>

<form>
Single: <input name="form[ListCost]" type="radio" value="Single" id="ListCost0"/> <br />

Multiple: <input name="form[ListCost]" type="radio" value="Multiple" id="ListCost1"/> <br />

<input type="text" value="1" name="form[Uses]" id="Uses" onKeyUp="getUses()"/>
<br />
</form>


<script type="text/javascript">
function getUses() {
var listcost = document.getElementsByName('form[ListCost]');
var uses = document.getElementById('Uses');

if (uses.value == 1) {
listcost[0].checked = true;
}
else {
listcost[1].checked = true;
}
}
</script>

</body>
</html>

livegenesis
01-28-2011, 10:39 AM
I figured it out. The problem was the way I was getting the values of the radios and the check boxes. In any browser other than IE, getElementsByName("") doesn't work. So, I got the values I needed by using getElementById("") and just used the individual IDs for each of the options.

oVTech
01-28-2011, 10:41 AM
I figured it out. The problem was the way I was getting the values of the radios and the check boxes. In any browser other than IE, getElementsByName("") doesn't work. So, I got the values I needed by using getElementById("") and just used the individual IDs for each of the options.


The getElementsByName() method is supported in all major browsers.

Your problem was spelling! :)

ListCost & listcost are not referring to the same element in JS.

livegenesis
01-28-2011, 10:45 AM
You are right, as far as the above code I posted earlier, but I figured that out as well. And that did not fix it. After doing a bit of research I found the getElementsByName is very unreliable. After changing the code to use getElementById instead everything worked in all web browsers.

oVTech
01-28-2011, 10:48 AM
You are right, as far as the above code I posted earlier, but I figured that out as well. And that did not fix it. After doing a bit of research I found the getElementsByName is very unreliable. After changing the code to use getElementById instead everything worked in all web browsers.


The getElementsByName() method is supported in all major browsers.

Yes it is fixed, just try the code I posted. :)

IE7 and lower are not considered major browser anymore. It works fine in IE8 & latest versions of Firefox, Safari & Opera.

livegenesis
01-28-2011, 10:53 AM
Okay, there is no need to try what I already know does not work for me. What I have now works fine. The solution was inspired by others that have been on this forum for a long time and their knowledge of it pointed me in the right direction. Your solution may work for you, but the form and the javascript I am using has become more complex and multiple elements using the getElementsByName were not working. The spelling was checked on those as well. There are no issues anymore.

oVTech
01-28-2011, 11:04 AM
I do not see anyone else in this thread that pointed you to the right direction. devnull69 told you to post your code and you did - therefore I assumed you still needed help. If someone has been in this forum for a decade has nothing to do with this, so please be nice when someone offers you help!

Oh! If there are no more issues than mark your post as RESOLVED.