I don’t think it is something that anyone will come across quite often, but it has happened to me on several occasions because of the I use.

That shopping cart, designed for use as a client-side cart in conjunction with is designed with one form/one item per page. That’s all well and good, but for a compact site that is trying to sell its products online, it can be unwieldy for the sheer amount of pages they might require.

An example of that is the no smoking signs at . I went through and picked the 25 most commonly use , then constructed an online ordering page for them, with two sizes per sign. That would be one large page. So I split it up, ten signs per page, still making it twenty forms per page.

The problem started when I realized that the shopping cart itself took the quantity of items from a named input tag in each form. It had to be named ‘qty’. So with twenty of those in a page, it failed the XHTML validation (W3C) twenty times because of this error: ‘ID “qty” already defined.’

So I went back and tried to think if I could alter it. I could alter the original shopping cart script but that would be a long job, and basically I wasn’t feeling up to it. I wanted an easier way out. Luckily JavaScript does provide us one. I used an event handler on the submit button, turning this:

<input type=”submit” name=”submit” value=”Add” />

… into this …

<input type=”submit” name=”submit” value=”Add” onclick=”reset_qty_id(this.form);” />

The function itself is horribly easy, relying on each form being named (form1, form2 etc):

function reset_qty_id(object) {
var s = object.id.split(/form/);
var q = document.getElementById(’qty’+s[1]);

q.name = ‘qty’;
}

Now when the form gets submitted it changes the input tag’s name to ‘qty’, allowing the shopping cart to figure out the quantity. When the validation is clicked it properly validates the code. Voila, XHTML 1.1 validated :) Bit of a hack though.