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="radCategory"><input type="radio" id="radCategory" runat="server"
value="2" /> Category</label></dd>

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

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

<dt><label for="selDefaultArticle">Default Article</label></dt>
<dd><select id="selDefaultArticle" 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.getElementById("radSection");
radCategory = document.getElementById("radCategory");
selSections = document.getElementById("selSections");
btnAdd = document.getElementById("btnAdd");
radSection.onclick = function() {
selSections.Enabled = false;
btnAdd.innerHTML = "Add Section";
}
radCategory.onclick = function() {
selSections.Enabled = true;
btnAdd.innerHTML = "Add Category";
}
}
var radSection;
var radCategory;
var selSections;
var btnAdd;
document.onload = function() {
radSection = document.getElementById("radSection");
radCategory = document.getElementById("radCategory");
selSections = document.getElementById("selSections");
btnAdd = document.getElementById("btnAdd");
radSection.onclick = function() {
selSections.Enabled = false;
btnAdd.innerHTML = "Add Section";
}
radCategory.onclick = function() {
selSections.Enabled = true;
btnAdd.innerHTML = "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="radCategory"><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="selSections">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">Name</label></dt>
<dd><input type="text" runat="server" id="txtName" /></dd>

<dt><label for="selDefaultArticle">Default Article</label></dt>
<dd><select id="selDefaultArticle" 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.getElementById("radSection");
radCategory = document.getElementById("radCategory");
selSections = document.getElementById("selSections");
btnAdd = document.getElementById("btnAdd");
radSection.onclick = function() {
selSections.Enabled = false;
selSections is a select element, it does not have an 'Enabled'
attribute. What do you expect to happen?

btnAdd.innerHTML = "Add Section";
}
radCategory.onclick = function() {
selSections.Enabled = true;
btnAdd.innerHTML = "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****@dslextreme.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/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[David R]

*cough*

The runat="server" attribute just makes the element programattically
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="__VIEWSTATE"
value="dDwtMTA5MzAzMDIwMDt0PDtsPGk8Mj47aTw0Pjs+O2w 8dDxwPGw8VGV4dDs+O2w8XDxkbFw+Clw8ZHRcPkZlYXR1cmVzX DwvZHRcPgpcPGRkXD4wXDwvZGRcPlw8L2RsXD4KOz4+Ozs+O3Q 8O2w8aTw3Pjs+O2w8dDx0PDtwPGw8aTwwPjs+O2w8cDxGZWF0d XJlczsxPjs+Pjs+Ozs+Oz4+Oz4+O2w8cmFkU2VjdGlvbjtyYWR DYXRlZ29yeTs+Pg=="
/></div>

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

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

<dt><label for="selSections">Add to</label></dt>
<dd><select name="selSections" id="selSections">
<option value="1">Features</option>
</select></dd>
<dt><label for="txtName">Name</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="txtUrlName" id="txtUrlName" type="text" size="30"
maxlength="50" /></dd>

<dt><label for="selDefaultArticle">Default Article</label></dt>
<dd><select name="selDefaultArticle" id="selDefaultArticle">
</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">Render Type</label></dt>
<dd><select name="selType" id="selType">
<option value="1">Articles (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.getElementById("radSection");
radCategory = document.getElementById("radCategory");

selSections = document.getElementById("selSections");
selPaging = document.getElementById("selPaging");
selType = document.getElementById("selType");

btnAdd = document.getElementById("btnAdd");

radSection.onclick = function() {

selSections.disabled = true;
selPaging.disabled = true;
selType.dsiabled = true;
btnAdd.innerHTML = "Add Section";
}

radCategory.onclick = function() {

selSections.disabled = false;
selPaging.disabled = false;
selType.dsiabled = false;
btnAdd.innerHTML = "Add Category";
}

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