PDA

Click to See Complete Forum and Search --> : XHTML doesnt recognize onChange event...

Da Warriah
05-29-2003, 06:08 PM
alright, im working on a page that has a drop-down menu in it...it uses the onChange event to trigger the different links (only one at the moment, but still)...and now XHTML doesnt validate it as a recognizable attribute...so is there some way to somehow target the drop-down menu's onChange event from a separate .js file? heres the basic code:

<select class="members" onChange="if(this.options[this.selectedIndex].value) window.location=this.options[this.selectedIndex].value;">
<option>» Members</option>
<option>---------------------</option>
<option value="news/">News Login</option>
</select>

also, does this need to be put into a <form> in order to be targeted?
jeffmott
05-29-2003, 06:32 PM
XHTML 1.0 (SE) specification (http://www.w3.org/TR/2002/REC-xhtml1-20020801/)
4.2. Element and attribute names must be in lower case
XHTML documents must use lower case for all HTML element and attribute names. This difference is necessary because XML is case-sensitive e.g. <li> and <LI> are different tags.
Charles
05-29-2003, 06:53 PM
As an aside, in the HTML Document Type Definitions (http://www.w3.org/TR/REC-html32#dtd, http://www.w3.org/TR/html4/sgml/dtd.html) the attribute names are all lowercase. It's just that HTML is case insensitive. Note that in JavaScript, which is case sensitive, the event handlers are all lower case.
Da Warriah
05-29-2003, 07:24 PM
:o i cant believe i forgot about that....now i feel silly:rolleyes:

oh well, thanx for the smack on the head guys:D
Da Warriah
05-29-2003, 08:01 PM
wait a second....its still not validating the "onmouseout" event...

so back to my original question: is there any way to target whether an element on a page is on the "onmouseover", "onmouseout", or "onchange" state? that would be really helpful for me;)
Charles
05-29-2003, 09:42 PM
Originally posted by Da Warriah
wait a second....its still not validating the "onmouseout" event...It looks like we have a situation here. The attribute "onmouseout" is valid in all known versions of XHTML (and HTML 4.01 but not HTML 3.2). Methinks that it's time to post your URL.
Frank Addae
03-20-2011, 10:29 AM
Hello guys. I've got a problem with onchange event in XHTML.

Whenever I use HTML DOCTYPE, the script breaks. I'm not sure if it's Javascript's or onchange's fault.

I've been trying to figure it out for hours... All help very much appreciated ;)

Working example (Without doctype):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function javascript_abort()
{
throw new Error('error');
}

function calcPrice()
{

var planp = me.plan.options[me.plan.selectedIndex].value;
var period = me.period.options[me.period.selectedIndex].value;
var disnum = "1";

if (planp === "p1") { planp = "10";
} else if (planp === "p2") { planp = "15";
} else if (planp === "p3") { planp = "25";
} else if (planp === "p4") { planp = "70"; }

if (period === "1") { discount = "";
} else if (period === "3") { disnum = "0.9"; discount = "(-10%)";
} else if (period === "6") { disnum = "0.85"; discount = "(-15%)";
} else if (period === "12") { disnum = "0.8"; discount = "(-20%)"; }



// if NaN stop execution
//alert(isNaN(parseInt(planp)));
if (isNaN(parseInt(planp))) { javascript_abort() }
if (isNaN(parseInt(period))) { javascript_abort() }
var totalp = planp * period * disnum;
document.getElementById('totalp').innerHTML = totalp;
document.getElementById('period').innerHTML = period;
document.getElementById('discount').innerHTML = discount;
}

function changeText()
{
document.getElementById('div1').innerHTML = 'whatever';
}
</script>
</head>
<body>

<form method="post" name="me" action="asdad.php">
<select size="1" name="plan" onchange="JavaScript:calcPrice()">
<option value="p1">first option</option>
<option value="p2">second option"</option>
<option value="p3">third option</option>
<option value="p4">fifth option</option>
</select>


<select size="1" name="period" onchange="JavaScript:calcPrice()">
<option value="1">1 month.</option>
<option value="3">3 months.</option>
<option value="6">6 months.</option>
<option value="12">12 months.</option>
</select>

<div>Total price: <span id="totalp">10</span> shillings / <span id="period"></span> months. <span id="discount"></span></div>
</body>
</html>

Not working with xhtml transitional doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function javascript_abort()
{
throw new Error('error');
}

function calcPrice()
{

var planp = me.plan.options[me.plan.selectedIndex].value;
var period = me.period.options[me.period.selectedIndex].value;
var disnum = "1";

if (planp === "p1") { planp = "10";
} else if (planp === "p2") { planp = "15";
} else if (planp === "p3") { planp = "25";
} else if (planp === "p4") { planp = "70"; }

if (period === "1") { discount = "";
} else if (period === "3") { disnum = "0.9"; discount = "(-10%)";
} else if (period === "6") { disnum = "0.85"; discount = "(-15%)";
} else if (period === "12") { disnum = "0.8"; discount = "(-20%)"; }



// if NaN stop execution
//alert(isNaN(parseInt(planp)));
if (isNaN(parseInt(planp))) { javascript_abort() }
if (isNaN(parseInt(period))) { javascript_abort() }
var totalp = planp * period * disnum;
document.getElementById('totalp').innerHTML = totalp;
document.getElementById('period').innerHTML = period;
document.getElementById('discount').innerHTML = discount;
}

function changeText()
{
document.getElementById('div1').innerHTML = 'whatever';
}
</script>
</head>
<body>

<form method="post" name="me" action="asdad.php">
<select size="1" name="plan" onchange="JavaScript:calcPrice()">
<option value="p1">first option</option>
<option value="p2">second option"</option>
<option value="p3">third option</option>
<option value="p4">fifth option</option>
</select>


<select size="1" name="period" onchange="JavaScript:calcPrice()">
<option value="1">1 month.</option>
<option value="3">3 months.</option>
<option value="6">6 months.</option>
<option value="12">12 months.</option>
</select>

<div>Total price: <span id="totalp">10</span> shillings / <span id="period"></span> months. <span id="discount"></span></div>
</body>
</html>
clueful
03-20-2011, 01:48 PM
Use the error console (http://www.dreamincode.net/forums/topic/204167-where-is-the-error-console/?).

Incorrect element addressing.

Just make these changes:
function calcPrice( me )

Both <select>s
onchange="calcPrice( this.form )"
Frank Addae
03-20-2011, 02:22 PM
It does work perfectly now and I thank you a lot. ;)