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

D

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
 
R

RobG

David said:
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 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.
 
T

Tony

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...
 
L

Lasse Reichstein Nielsen

Tony said:
"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
 
D

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+O2w8dDxwPGw8VGV4dDs+O2w8XDxkbFw+Clw8ZHRcPkZlYXR1cmVzXDwvZHRcPgpcPGRkXD4wXDwvZGRcPlw8L2RsXD4KOz4+Ozs+O3Q8O2w8aTw3Pjs+O2w8dDx0PDtwPGw8aTwwPjs+O2w8cDxGZWF0dXJlczsxPjs+Pjs+Ozs+Oz4+Oz4+O2w8cmFkU2VjdGlvbjtyYWRDYXRlZ29yeTs+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";
}

}


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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top