|
JavaScript - Onchange Behaving Differently On Firefox And Ie
I am creating web page. I am in the early stages of building. But I have found that my onChange function behaves different on Firefox and IE.
It work as it suppose to on Firefox but not on IE. On IE, onChange is not triggered when you select the an option. But triggers when you click the mouse the second time. Here the code, Code: <html>
<head>
<title>Compatibility Test</title>
<script type="text/javascript">
var myScore = 0.1;
function correct(val)
{
alert(val.value);
}
</script>
</head>
<body>
<center>
<font size=7>Welcome to Compatibility Test</font><BR>
<I>by<BR>Rohn DeSilva<BR></I>
</center>
<BR><BR><BR>
1. Who is the father of relativity?<BR>
<input type="radio" name="q1" value=2 onchange="correct(this)">
<B>Isaac Newton</B>
<input type="radio" name="q1" value=3 onchange="correct(this)">
<B>Albert Einstein</B>
<input type="radio" name="q1" value=1 onchange="correct(this)">
<B>Marie Currie</B>
<BR><BR>
</body>
</html>
Similar TutorialsSorry if the title is not so good! Im trying my best. I got my new website in jquery and js, but it behaves very strange. It like bugging, and the fading feels not so smooth as it should. Maybe someone know what the problem is? If you go to www.webblord.se/sv/index.php and then click on the first image at the left-panel menu, its a green button with a home image. You will see that the new content dosn't load raelly smooth, more bugging up. And the loading function dosn't disspear... Why :S? Hi I have a problem with the javascript menu. Currently when you click on the "Login" button then it opens and when you click it again while it is open it closes ands opens again. What I want is when you click the login button while it is open then it closes as toggleable button. I have posted the javascript to this page: http://jsbin.com/uhefoc/edit#javascript,html,live So there it is possible to make realtime updates to the script and see the result real time I also posted the script here so not to break the rules: Code: $(document).ready(function() {
$("#login-menu a.signin").click(function(event) {
var link = $(this),
box = $("fieldset#signin_menu"),
inputs = $("#signin_menu .form-input input");
event.preventDefault();
link.toggleClass("menu-open");
box.toggle("signin_menu");
if(link.hasClass("menu-open")) {
$("#username").focus();
} else {
inputs.val('');
}
inputs.bind("focus keydown", function(action) {
if((action.type == "keydown" && action.keyCode == 27) || (action.type == "focus" && !link.hasClass("menu-open")) ) {
link.trigger("click");
}
});
box.mouseup(function () {
return false;
});
$(document).mouseup(function(what) {
if($(what.target).parent("a.signin").length == 0 && link.hasClass("menu-open")) {
link.trigger("click");
}
});
});
});
Does anyone know why Chrome's alert responses are different to IE and FF? Code: <script>
function checkDriveletter(){
var drive=0;
var drive = readCookie('choose');
alert(drive);
createCookie('choose',1,9999);
var drive = readCookie('choose');
alert(drive);
}
window.onload=checkDriveletter;
</script>
In Chrome the cookie never seems to get set. My cookie code is: Code: function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
hi all , i want that user can not enter text in multiline textbox more than specific characters but it behaves differently in IE and FF. In Internet explorer when i press enter key it takes two character whereas in firefox when i press enter it takes only one character. so this way user can enter more data in FF which is not correct. how to fix that behavior so that both browsers give same result. My javascript code is given below <HTML> <HEAD> <TITLE> Javascript Character Count by WebSewak.com </TITLE> <script language="Javascript"> function counterUpdate(opt_countedTextBox, opt_countBody, opt_maxSize) { var countedTextBox = opt_countedTextBox ? opt_countedTextBox : "counttxt"; var countBody = opt_countBody ? opt_countBody : "countBody"; var maxSize = opt_maxSize ? opt_maxSize : 1024; var field = document.getElementById(countedTextBox); if (field && field.value.length >= maxSize) { field.value = field.value.substring(0, maxSize); } var txtField = document.getElementById(countBody); if (txtField) { txtField.innerHTML = field.value.length; } } </script> </HEAD> <BODY> <textarea id="counttxt" name="counttxt" rows="10" onkeyup="counterUpdate('counttxt', 'countBody','30');"></textarea> You typed <B><span id="countBody">0</span></b> characters Max. Length : 30 Chars </BODY> </HTML> Code: <input type = "text" style ='display:none;' onchange="display_data_from_server(this.value)"/> Value inside that input is cahanged from js. Is there any reason that onchange would not happen ? i mean, it does not. I have a onChange value
Code:
var people = [
["Timothy Conner", "1999-Present", "Age: 12", "Male", ""],
["Andrew Conner", "1992-Present", "Age: 19", "Male", ""]
];
var how = "Brothers";
function find()
{
if(document.getElementById("name").value == people [0] [0])
{
document.getElementById("desc").value = people [0] [1] + " " + people [0] [2] + " " + people [0] [3];
}
if(document.getElementById("name").value == people [1] [0])
{
document.getElementById("desc").value = people [1] [1] + " " + people [1] [2] + " " + people [1] [3];
}
document.getElementById("relateb").value = document.getElementById("name").value;
}
Code: Name: <input type="text" id="name" value="" onChange="find()"/> So for it to proses a name you must click out of a box is ther a way to make it instead of when you click out of it, it would immidiatly change? Hi folks. I'm working on a calculator and need to use the 'onchange' function. Basically, the user selects the year (id=taxYear) and once the year is select (default is 2008) this year will appear in 2 different lines of the page under 2 seperate ID's(ageYear & totalYear). I've looked at a few example of the function but I'm still not sure how to approach it. At the moment the year changes once I hit the 'calculate' button but the onChange would obviously offer a better alternative with the date changing once 'taxYear' is changed. here is the script; Code: //check the year
var taxYear = document.getElementById('taxYear').options[document.getElementById('taxYear').selectedIndex].value;
document.getElementById('ageYear').innerHTML = taxYear;
document.getElementById('totalYear').innerHTML = taxYear;
Here is the jsp; Code: <tr>
<td align="left" width="203" colspan=""><p> Your Tax Year: </p></td>
<td align="left" >
<s:select name="taxYear" id="taxYear" list="#{'2008':'2008', '2009':'2009'}" theme="simple" />*
</td>
</tr>
<tr>
<td align="left" width="203"><p> Age at December 31st <span id="ageYear"></span></p></td>
<td align="left" colspan="1">
<s:textfield name="age" id="age" theme="simple" cssClass="text" value="30" /> *
<div id="errorage" class="warningmessage" style="display:none">
Please enter your Age to proceed.
</div>
</td>
</tr>
<tr>
<td colspan="2" class="basicboldtext">
<br/>
The total pension contribution you can make for year <span id="totalYear"></span> is €<span id="totalTax2"></span>
<br/>
</td>
</tr>
Appreciate any help on this! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" > <title>Assignment 5 - JavaScript Loops</title> <head> <script type="text/javascript"> function getGrade(){ var i= Number(document.getElementById("input1").value); m=Math.floor(i/2); for(var k=1; k<=i; k++){ for(var j=1; j<=k; j++){ document.write(j+" "); if(j==k){ document.write("\n"); } if(j==i){ decreaseLoop(j, k); } } } function decreaseLoop(j, k){ for(k=k-1; k>0; k--){ for(var l=1; l<=k; l++){ document.write(l+" "); if(l==k){ document.write("\n"); } } } } } </script> <style type="text/css"> #main{ margin:auto; width:70%; } #top{ font-size:20px; font-weight:bolder; color:#007700; text-decoration:underline; } #s1{ font-size:20px; font-weight:bold; color:#7700ff; } #s2{ font-size:20px; font-weight:bold; color:#00ff00; } #s3{ font-size:20px; font-weight:bold; color:#ff0000; } #form1{ width:600px; height:80px; padding:20px; background-color:#aaaaaa; } </style> </head> <body> <div id="main"> <p id="top">Assignment 5 - JavaScript Loops</p> <span id=s1>This is Form for checking Loop</span> <form id=form1 name=form1> <table> <tr><td>Enter Number </td><td>: <input type="text" id=input1 name="input1" /></td></tr> <tr><td><input type="button" name=btn1 value="Get Number" onclick=getGrade() /></td></tr> </table> </form> </div> </body> </html> When I execute this code, on the screen I see all output in one line. Which is not hat I want. But when I see it in Firebug (for firefox)or Developer Tool Bar(for IE) , I see it printed out in pyramid form(as required). So why is this output in one line on screen ? How cn I get it in pyramid form ? Thanks Hi I'm a newbie. Please help me. I'm using Joomla. I've got a dropdown which reads the filename from the database. When the user selects it I want an onchange event to open the pdf. I've been at it for 2 days now. Code: <?php
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("metnet", $con);
$sql="SELECT * FROM newsletter";
$result = mysql_query($sql);
echo "<form method='post'>";
$dropdown = "<select name='sname' onChange='location(this.form.sname)' >";
while($row = mysql_fetch_assoc($result)) {
$dropdown .= "\r\n<option value='{$row['fpath']}'>{$row['fpath']}</option>";
}
$dropdown .= "\r\n</select>";
echo $dropdown;
?>
Hi everyone. i hope you could help me for my problem. I want to place a value in the option when i change the contenent. ie when i select North America It shoulde be <option value='1'>Canada</option><option value='2'>United States</option> and so on and so fort... Please help. Code: <script type="text/javascript">
//<![CDATA[
// array of possible countries in the same order as they appear in the country selection list
var countryLists = new Array(4)
ccountryLists["empty"] = ["Select a Country"];
countryLists["North America"] = ["Canada", "United States", "Mexico"];
countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"];
countryLists["Asia"] = ["Russia", "China", "Japan"];
countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"];
/* CountryChange() is called from the onchange event of a select element.
* param selectObj - the select object which fired the on change event.
*/
function countryChange(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the countryLists array
cList = countryLists[which];
// get the country select element via its known id
var cSelect = document.getElementById("country");
// remove the current options from the country select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList[i]; // assumes option string and value are the same
newOption.text=cList[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);
}
}
}
//]]>
</script>
Code: <noscript>This page requires JavaScript be available and enabled to function properly</noscript>
<h1>Dynamic Select Statements</h1>
<label for="continent">Select Continent</label>
<select id="continent" onchange="countryChange(this);">
<option value="empty">Select a Continent</option>
<option value="1">North America</option>
<option value="2">South America</option>
<option value="3">Asia</option>
<option value="4">Europe</option>
</select>
<br/>
<label for="country">Select a country</label>
<select id="country">
<option value="0">Select a country</option>
</select>
How can i change this code to do not duplicate the boxes when one option is selected in the same box as before? http://www.plpgolfandturf.com.au/rr/rrboxes_test.php Code: <script type="text/javascript">
function SetHTML2(type) {
//document.getElementById("1").style.display = "none"
//document.getElementById("2").style.display = "none"
//document.getElementById("3").style.display = "none"
//document.getElementById("4").style.display = "none"
//document.getElementById("1.1").style.display = "none"
//document.getElementById("1.2").style.display = "none"
//document.getElementById("1.3").style.display = "none"
//document.getElementById("1.4").style.display = "none"
document.getElementById("2.1").style.display = "none"
document.getElementById("2.2").style.display = "none"
document.getElementById("2.3").style.display = "none"
document.getElementById("2.4").style.display = "none"
document.getElementById("3.1").style.display = "none"
document.getElementById("3.2").style.display = "none"
document.getElementById("3.3").style.display = "none"
document.getElementById("3.4").style.display = "none"
document.getElementById("4.1").style.display = "none"
document.getElementById("4.2").style.display = "none"
document.getElementById("4.3").style.display = "none"
document.getElementById("4.4").style.display = "none"
document.getElementById("1.1.1").style.display = "none"
document.getElementById("1.1.2").style.display = "none"
document.getElementById("1.1.3").style.display = "none"
document.getElementById("1.1.4").style.display = "none"
document.getElementById("1.2.1").style.display = "none"
document.getElementById("1.2.2").style.display = "none"
document.getElementById("1.2.3").style.display = "none"
document.getElementById("1.2.4").style.display = "none"
document.getElementById("1.3.1").style.display = "none"
document.getElementById("1.3.2").style.display = "none"
document.getElementById("1.3.3").style.display = "none"
document.getElementById("1.3.4").style.display = "none"
document.getElementById("1.4.1").style.display = "none"
document.getElementById("1.4.2").style.display = "none"
document.getElementById("1.4.3").style.display = "none"
document.getElementById("1.4.4").style.display = "none"
document.getElementById(type).style.display = ""
}
</script>
<!--Display box -->
<font face="Verdana, Geneva, sans-serif" size="4" color="#FF0000"><br />
Search Parts</font><br />
<br />
<select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1">Beck</option>
<option value="2">BobCat</option>
<option value="3">Briggs</option>
<option value="4">Yazoo</option>
</select>
<span id="1" style="display:none" ><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.1">Beck 1</option>
<option value="1.2">Beck 2</option>
<option value="1.3">Beck 3</option>
<option value="1.4">Beck 4</option>
</select></span>
<span id="2" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="2.1">BobCat 1</option>
<option value="2.2">BobCat 2</option>
<option value="2.3">BobCat 3</option>
<option value="2.4">BobCat 4</option>
</select></span>
<span id="3" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="3.1">Briggs 1</option>
<option value="3.2">Briggs 2</option>
<option value="3.3">Briggs 3</option>
<option value="3.4">Briggs 4</option>
</select></span>
<span id="4" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="4.1">Yazoo 1</option>
<option value="4.2">Yazoo 2</option>
<option value="4.3">Yazoo 3</option>
<option value="4.4">Yazoo 4</option>
</select></span>
<span id="1.1" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.1.1">Beck 1.1</option>
<option value="1.1.2">Beck 1.2</option>
<option value="1.1.3">Beck 1.3</option>
<option value="1.1.4">Beck 1.4</option>
</select></span>
<span id="1.2" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.2.1">Beck 2.1</option>
<option value="1.2.2">Beck 2.2</option>
<option value="1.2.3">Beck 2.3</option>
<option value="1.2.4">Beck 2.4</option>
</select></span>
<span id="1.3" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.3.1">Beck 3.1</option>
<option value="1.3.2">Beck 3.2</option>
<option value="1.3.3">Beck 3.3</option>
<option value="1.3.4">Beck 3.4</option>
</select></span>
<span id="1.4" style="display:none"><br /><select onchange="SetHTML2(this.value)">
<option selected="selected">Choose your option</option>
<option value="1.4.1">Beck 4.1</option>
<option value="1.4.2">Beck 4.2</option>
<option value="1.4.3">Beck 4.3</option>
<option value="1.4.4">Beck 4.4</option>
</select></span>
<span id="2.1" style="display:none"> text </span>
<span id="2.2" style="display:none"> text </span>
<span id="2.3" style="display:none"> text </span>
<span id="2.4" style="display:none"> text </span>
<span id="3.1" style="display:none"> text </span>
<span id="3.2" style="display:none"> text </span>
<span id="3.3" style="display:none"> text </span>
<span id="3.4" style="display:none"> text </span>
<span id="4.1" style="display:none"> text </span>
<span id="4.2" style="display:none"> text </span>
<span id="4.3" style="display:none"> text </span>
<span id="4.4" style="display:none"> text </span>
<span id="1.1.1" style="display:none"> text </span>
<span id="1.1.2" style="display:none"> text </span>
<span id="1.1.3" style="display:none"> text </span>
<span id="1.1.4" style="display:none"> text </span>
<span id="1.2.1" style="display:none"> text </span>
<span id="1.2.2" style="display:none"> text </span>
<span id="1.2.3" style="display:none"> text </span>
<span id="1.2.4" style="display:none"> text </span>
<span id="1.3.1" style="display:none"> text </span>
<span id="1.3.2" style="display:none"> text </span>
<span id="1.3.3" style="display:none"> text </span>
<span id="1.3.4" style="display:none"> text </span>
<span id="1.4.1" style="display:none"> text </span>
<span id="1.4.2" style="display:none"> text </span>
<span id="1.4.3" style="display:none"> text </span>
<span id="1.4.4" style="display:none"> text </span>
<br />
<br /><a href="http://www.plpgolfandturf.com.au/rr/rrboxes_test.php"><img src="http://www.plpgolfandturf.com.au/rr/bt2.png" border="0" /></a>
hi i have a form where i need to join fields from the form prior to submission to flow into a pdf form. here is the function PHP Code: <SCRIPT language='javascript' type='text/javascript'> function joinna(form, elemName, ttl) { form.bname.value = form.b_fname.value + ' ' + form.b_lname.value; } </script> here is what the form input looks like PHP Code: <input class="left" onBlur="mark(this,'#ffffff','#000000')" name="b_fname" size="20" maxlength="40" onFocus="nextfield ='cb_fname'; mark(this,'#FFFF99','#0000FF')" value="<?php echo $row['b_fname'];?>" onChange="joinna(this.form,'b_fname','p1f6');"> </span> <input class="left" onBlur="mark(this,'#ffffff','#000000')" name="b_lname" size="20" maxlength="40" onFocus="nextfield ='cb_fname'; mark(this,'#FFFF99','#0000FF')" value="<?php echo $row['b_lname'];?>" onChange="joinna(this.form,'b_lname','p1f6');"> </span> and here is the calc field PHP Code: <input type="hidden" NAME="bname" value="" Size="7" onBlur="mark(this,'#ffffff','#000000')" onFocus="blur();document.smartform.bname.focus()" onChange="this.form.b_fname.value + this.form.b_lname.value; joinna(this.form,'field');" > this works fine IF i manually insert something new into the b_fname field. but lets say a user pulls the for to edit, and then makes no changes, "bname" will remain blank. what i want to do is call the function and/or force an 'onchange' or do whatever so bname is not left blank in the event the user submits w/o making any changes to the form tia Hello all, I have a translation script that I want to modify to use select boxes instead of divs, but I have a little problem with what I have. Bascially, the user selects an option and it changes the text in between the ' ' (VALUE) to whatever the value of the option is: Code: <select onchange="updateLangTo('VALUE')">
<option value="en">English</option>
<option value="ar">Arabic</option>
</select>
So how would JavaScript be able to accomplish this? i keep getting the following error: - there is no attribute "onChange" Code: <select name="type" id="type" onChange="gettype('type');">
<option selected="selected">--Car type--</option>
<option value="1">Bmw</option>
<option value="2">Merc Blinds</option>
<option value="3">Ford</option>
<option value="4">Saab</option>
</select>
Evening all. I have a little bit of code, thus: Code: var data = document.createElement("td");
box = document.createElement("input");
box.id = headercategories[i];
box.type = text;
box.value = "Ten";
box.onChange = alter("11");
data.appendChild(box);
in which I insert a text input box into a table data element. When the value of the input is changed, I would like to call the function alter(). However, what's happening in practice is that the function alter is getting called straight away, without waiting for any changes. Is there any way I can stop this? It doesn't seem to happen if you actually write the onchange bit into the HTML by hand rather than doing it dynamically. Thanks, Chris Hi, I am trying to copy the value of one textbox to another using onchange event. For some reason, my code does not work, please let me know where I went wrong. here is my code: Code: <html>
<head>
<script type="text/javascript">
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
</head>
<body>
Field1: <input type="text" id="field1"/><br />
Field2: <input type="text" id="field2" onchange="copyText()"/>
</body>
</html>
Thank you. This code works great for splitting value to textbox.. However; It quits working in example 2 when I move the select outside the form tags Code: <!-- EXAMPLE 1 WORKS-->
<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.value.split(",");
sel.form["F"+first].value = temp[0];
sel.form["F"+(first+1)].value = temp[1];
sel.form["F"+(first+2)].value = temp[2];
}
</script>
<form method='post'>
<input type="text" name="F1" value="" >
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >
<select onChange="Split(this,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>
</form>
Help with the onChange to work outside the form tags. Code: <!-- EXAMPLE 2 NEED HELP-->
<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.value.split(",");
sel.form1["F"+first].value = temp[0];
sel.form1["F"+(first+1)].value = temp[1];
sel.form1["F"+(first+2)].value = temp[2];
}
</script>
<form method='post' name="form1">
<input type="text" name="F1" value="" >
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >
</form>
<!-- NEED TO MODIFY THE ONCHANGE TO WORK IN THIS POSITON?? -->
<select onChange="Split(this.form1.value,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>
All, If I have the following code: Code: <form name="datatoshow" id="datatoshow"> Want to learn more about the sie? Use the drop down menu:<br /> <select name="thingtoshow" onchange="javascript:showvalues(this.datatoshow);"> <option value="home">Home</option> <option value="help">Help!</option> <option value="refer">Refer a Friend</option> </select> </form> This doesn't do anything on the onchange. The code it's supposed to send to is: Code: function showvalues(selObj){
alert("it gets here");
var valuetoshow;
valuetoshow = "valuetoshow="+selObj.options[selObj.selectedIndex].value;
alert(valuetoshow);
makePOSTRequest('showhome.php', valuetoshow);
}
This is in external js file. For some reason it doesn't send it and the alert never gets triggered. Thanks. |
|||||||