IE + JavaScript problem.

galwayguy22

The below works fine in Firefox and Chrome.

When you select an item from the drop down box the fields are populated using JavaScript (populated with random numbers just to demonstrate)

In IE, the first field, Category ID does not get filled in, and will only get populated if I change the id of the input object to anything other than "cat_id".

Why god, why do I have to spend so much time catering for the idiots who use IE.

<script>
function test()
{ 
    document.getElementById('cat_id').value = Math.floor(Math.random()*101);
    document.getElementById('cat_name').value = Math.floor(Math.random()*101);
    document.getElementById('cat_des').value = Math.floor(Math.random()*101);
    document.getElementById('prod_count').value = Math.floor(Math.random()*101);
}
</script>

<h3>Select a category to delete</h3>

<form id="delCatform" action="admin.php" method="POST">
    <select name='cat_id' onchange="test()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</form>

<form action="admin.php" method="POST">
<table>
<tr>
    <td>Category ID</td>
    <td><input type="text" id="cat_id" readonly="readonly" value="" name="cat_id" /></td>
</tr>
<tr>
    <td>Category Name</td>
    <td><input type="text" id="cat_name" readonly="readonly" value="" name="cat_name" /></td>
</tr>
<tr>
    <td>Category Description</td>
    <td><textarea id="cat_des" readonly="readonly" name="cat_des"></textarea></td>
</tr>
<tr>
    <td>No of Products</td>
    <td><input type="text" id="prod_count" readonly="readonly" value="" name="prod_count" /></td>
</tr>
<tr>
    <td><input type="hidden" name="action" value="delCatexe"></td>
    <td><input type="submit" value='Delete'></td>
</tr>
</table>    
</form>

Liam Byrne

galwayguy22 wrote: »

The below works fine in Firefox and Chrome.

When you select an item from the drop down box the fields are populated using JavaScript (populated with random numbers just to demonstrate)

In IE, the first field, Category ID does not get filled in, and will only get populated if I change the id of the input object to anything other than "cat_id".

Why god, why do I have to spend so much time catering for the idiots who use IE.

<script>
function test()
{ 
    document.getElementById('cat_id').value = Math.floor(Math.random()*101);
    document.getElementById('cat_name').value = Math.floor(Math.random()*101);
    document.getElementById('cat_des').value = Math.floor(Math.random()*101);
    document.getElementById('prod_count').value = Math.floor(Math.random()*101);
}
</script>

<h3>Select a category to delete</h3>

<form id="delCatform" action="admin.php" method="POST">
    <select [b]name='cat_id'[/b] onchange="test()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</form>

<form action="admin.php" method="POST">
<table>
<tr>
    <td>Category ID</td>
    <td><input type="text" [b]id="cat_id"[/b] readonly="readonly" value=""  [b]name="cat_id" [/b] /></td>
</tr>
<tr>
    <td>Category Name</td>
    <td><input type="text" id="cat_name" readonly="readonly" value="" name="cat_name" /></td>
</tr>
<tr>
    <td>Category Description</td>
    <td><textarea id="cat_des" readonly="readonly" name="cat_des"></textarea></td>
</tr>
<tr>
    <td>No of Products</td>
    <td><input type="text" id="prod_count" readonly="readonly" value="" name="prod_count" /></td>
</tr>
<tr>
    <td><input type="hidden" name="action" value="delCatexe"></td>
    <td><input type="submit" value='Delete'></td>
</tr>
</table>    
</form>

It's not IE's fault that you have 2 items called "cat_id".

louie

dead right there...

galwayguy22

But the objects are in different forms.

And only one has an ID of "cat_id". I don't see why IE can't zero into it.

Liam Byrne

galwayguy22 wrote: »

But the objects are in different forms.

Irrelevant, unless you specifically tell the browser to look within a specific form or element; you've used document.getElementById which does exactly what it says on the tin - gets the element within the document; i.e. searches are done from page level.

If you have 2 ids the same you'd also fail validation and cause a myriad of other problems.

galwayguy22 wrote: »

And only one has an ID of "cat_id". I don't see why IE can't zero into it.

If you don't specify a specific ID, an object's ID & NAME are one and the same.

You wanted the reasons, I gave them. You might prefer if those reasons didn't apply, but the fact is that there are lots of examples of where - if you specify something incorrectly or "assume" - browsers behave differently.

If you specify things properly/precisely, they behave the same.

Option 1 : specify the items more correctly/specifically on the page
Option 2 : specify the items more explicitly in the search

Option 2 might get you through this issue, but option 1 avoids similar problems arising further down the line.