Events not firing (Clearly I'm doing something wrong)

[David R]

Here's the relevant XHTML:

-------------------------------------------------------------------------------------

<dl>
<dt>Add...</dt>
<dd><label for="radSection " ><input type="radio" id="radSection "
runat="server" value="1" /> Section</label>
<label for="radCategor y"><input type="radio" id="radCategory " runat="server"
value="2" /> Category</label></dd>

<dt><label for="selSection s">Add to</label></dt>
<dd><select id="selSections " runat="server" /></dd>

<dt><label for="txtName">N ame</label></dt>
<dd><input type="text" runat="server" id="txtName" /></dd>

<dt><label for="selDefault Article">Defaul t Article</label></dt>
<dd><select id="selDefaultA rticle" runat="server" /></dd>
</dl>

<div>
<button id="btnAdd">Add </button>
</div>

<script src="../scripts/Categories.js" type="text/javascript"></script>

-------------------------------------------------------------------------------------

And here's the script:

-------------------------------------------------------------------------------------

var radSection;
var radCategory;
var selSections;
var btnAdd;
document.onload = function() {
radSection = document.getEle mentById("radSe ction");
radCategory = document.getEle mentById("radCa tegory");
selSections = document.getEle mentById("selSe ctions");
btnAdd = document.getEle mentById("btnAd d");
radSection.oncl ick = function() {
selSections.Ena bled = false;
btnAdd.innerHTM L = "Add Section";
}
radCategory.onc lick = function() {
selSections.Ena bled = true;
btnAdd.innerHTM L = "Add Category";
}
}
var radSection;
var radCategory;
var selSections;
var btnAdd;
document.onload = function() {
radSection = document.getEle mentById("radSe ction");
radCategory = document.getEle mentById("radCa tegory");
selSections = document.getEle mentById("selSe ctions");
btnAdd = document.getEle mentById("btnAd d");
radSection.oncl ick = function() {
selSections.Ena bled = false;
btnAdd.innerHTM L = "Add Section";
}
radCategory.onc lick = function() {
selSections.Ena bled = true;
btnAdd.innerHTM L = "Add Category";
}
}

-------------------------------------------------------------------------------------

Firefox nor IE report any script errors, yet I can't see why it isn't
working. Any ideas?

Thanks

--
-David

[RobG]

David R wrote:

Here's the relevant XHTML:

-------------------------------------------------------------------------------------
You could start by writing valid (X)HTML:
<dl>
<dt>Add...</dt>
<dd><label for="radSection " ><input type="radio" id="radSection "
runat="server" value="1" /> Section</label>
There is no 'runat' attribute for any HTML element. Having a single
radio button in a radio group means that once it is selected, it can't
be unselected.

<label for="radCategor y"><input type="radio" id="radCategory " runat="server"
value="2" /> Category</label></dd>
Same advice for this radio button. Users will end up with both
selected and can't deselect one.


<dt><label for="selSection s">Add to</label></dt>
<dd><select id="selSections " runat="server" /></dd>
A select element must have at least one option and a closing tag.


<dt><label for="txtName">N ame</label></dt>
<dd><input type="text" runat="server" id="txtName" /></dd>

<dt><label for="selDefault Article">Defaul t Article</label></dt>
<dd><select id="selDefaultA rticle" runat="server" /></dd>
A select element must have at least one option and a closing tag.

</dl>

<div>
<button id="btnAdd">Add </button>
</div>

<script src="../scripts/Categories.js" type="text/javascript"></script>

-------------------------------------------------------------------------------------

And here's the script:

-------------------------------------------------------------------------------------

var radSection;
var radCategory;
var selSections;
var btnAdd;
There is no need for these to be global.

document.onload = function() {
You are looking for window.onload.

radSection = document.getEle mentById("radSe ction");
radCategory = document.getEle mentById("radCa tegory");
selSections = document.getEle mentById("selSe ctions");
btnAdd = document.getEle mentById("btnAd d");
radSection.oncl ick = function() {
selSections.Ena bled = false;
selSections is a select element, it does not have an 'Enabled'
attribute. What do you expect to happen?

btnAdd.innerHTM L = "Add Section";
}
radCategory.onc lick = function() {
selSections.Ena bled = true;
btnAdd.innerHTM L = "Add Category";
}
} [...]
-------------------------------------------------------------------------------------

Firefox nor IE report any script errors, yet I can't see why it isn't
working. Any ideas?

Firefox does report an error. When you click on the radio buttons, it
says btnAdd is null - it is not added to the document because of the
invalid HTML.


--
Rob

[Tony]

>> <dd><label for="radSection " ><input type="radio" id="radSection "

runat="server" value="1" /> Section</label>

There is no 'runat' attribute for any HTML element. Having a single
radio button in a radio group means that once it is selected, it can't
be unselected.

"runat" is .NET, and has something to do with postback.

Far as I can tell.NET makes it difficult, at best, to write totally
valid HTML...

[Lasse Reichstein Nielsen]

"Tony" <to****@dslextr eme.com> writes:

"runat" is .NET, and has something to do with postback.

Far as I can tell.NET makes it difficult, at best, to write totally
valid HTML...

You are not supposed to. What you are writing is ASP, which appears to
be an extension of HTML that is interpreted by the server. It should
be possible to send only valid HTML to the client (although I wouldn't
be surprised if it didn't anyway).

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[David R]

*cough*

The runat="server" attribute just makes the element programatticall y
accessible via inherited classes. The output is 100% valid XHTML.

ASP.NET also converts <select runat="server" /> to <select id="foo"
name="foo"></select>

....What I was posting, was my ASPX source, not my XHTML.

When you execute it, this is produced:

--------------------------------------------------------

<form id="Form" method="post" action="/AMS/Admin/Pages/Categories.aspx ">
<div><input type="hidden" name="__VIEWSTA TE"
value="dDwtMTA5 MzAzMDIwMDt0PDt sPGk8Mj47aTw0Pj s+O2w8dDxwPGw8V GV4dDs+O2w8XDxk bFw+Clw8ZHRcPkZ lYXR1cmVzXDwvZH RcPgpcPGRkXD4wX DwvZGRcPlw8L2Rs XD4KOz4+Ozs+O3Q 8O2w8aTw3Pjs+O2 w8dDx0PDtwPGw8a TwwPjs+O2w8cDxG ZWF0dXJlczsxPjs +Pjs+Ozs+Oz4+Oz 4+O2w8cmFkU2Vjd GlvbjtyYWRDYXRl Z29yeTs+Pg=="
/></div>

<dl>
<dt>Add...</dt>

<dd><label for="radSection " ><input value="1" name="" id="radSection "
type="radio" /> Section</label>
<label for="radCategor y"><input value="2" name="" id="radCategory "
type="radio" checked="checke d" /> Category</label></dd>

<dt><label for="selSection s">Add to</label></dt>
<dd><select name="selSectio ns" id="selSections ">
<option value="1">Featu res</option>
</select></dd>
<dt><label for="txtName">N ame</label></dt>
<dd><input name="txtName" id="txtName" type="text" size="30"
maxlength="50" /></dd>

<dt><label for="txtUrlName ">URL Name</label></dt>
<dd><input name="txtUrlNam e" id="txtUrlName " type="text" size="30"
maxlength="50" /></dd>

<dt><label for="selDefault Article">Defaul t Article</label></dt>
<dd><select name="selDefaul tArticle" id="selDefaultA rticle">
</select></dd>

<dt><label for="selPaging" >Default Paging</label></dt>

<dd><select name="selPaging " id="selPaging" >
<option value="5">5 Articles per list</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>

<option value="30">30</option>
<option value="50">50</option>
<option value="100">100 </option>
</select></dd>

<dt><label for="selType">R ender Type</label></dt>
<dd><select name="selType" id="selType">
<option value="1">Artic les (Normal view)</option>

<option value="2">Files (Slimline view)</option>
<option value="4">News (Full Article in list)</option>
</select></dd>

</dl>

<div>
<button id="btnAdd">Add </button>
</div>

<script src="../scripts/Categories.js" type="text/javascript"></script>
</form>
--------------------------------------------------------

Which is valid :)

And ASP.NET doesn't hinder one's ability to outout valid XHTML, all you need
to do is extend the base form and page classes, and ASP isn't an extension
of HTML.

Anyway, I made the changes to the *.js file and now it works like this:

--------------------------------------------------------

var radSection;
var radCategory;

var selSections;
var selPaging;
var selType;

var btnAdd;

window.onload = getElements();

function getElements() {

radSection = document.getEle mentById("radSe ction");
radCategory = document.getEle mentById("radCa tegory");

selSections = document.getEle mentById("selSe ctions");
selPaging = document.getEle mentById("selPa ging");
selType = document.getEle mentById("selTy pe");

btnAdd = document.getEle mentById("btnAd d");

radSection.oncl ick = function() {

selSections.dis abled = true;
selPaging.disab led = true;
selType.dsiable d = true;
btnAdd.innerHTM L = "Add Section";
}

radCategory.onc lick = function() {

selSections.dis abled = false;
selPaging.disab led = false;
selType.dsiable d = false;
btnAdd.innerHTM L = "Add Category";
}

}
--------------------------------------------------------