CODEWITHSUNDEEP
javascripttimeonchange
Nazca
Nazca

Reputation: 112

javascript onchange event only works one time on same page

I have a form with where users are able to customize tags they buy from our website. The objective of the javascript is to change the picture to the picture in our database of the original tag when the user selects that tag from a drop down list.

I reproduce the code 10 times when the page loads as the user gets to purchase 10 tags. The problem is the only one that works is the first one. and it works great! The second one (though copied and pasted code) fails to work correctly at all. If I rename the getElementById to tag 1. The second box works great for the first box. But not correctly.

Here is some code.

The php function that generates the select options.

function createSelectDT(){


        $qry = "SELECT `products_model`, `products_image` FROM `zen_products` WHERE `products_id` > '0'";
        $result = mysql_query($qry)or die(mysql_error());

        //we actually need the last two digits to find what department its in.

        while ($row = mysql_fetch_assoc($result)){
            $model = $row['products_model'];
            $image = $row['products_image'];

            //how many characters does the string have?
            $length = strlen($model);

            //subtract two so we can start there
            $length = $length - 2 ;

            //get the last to digits!

            $last2 = substr($model, $length, 2);

            //we have the last two lets make sure that they equal dog tags and echo it as a select option

            if ($last2 == "01"){
                echo "<option value=\"images/" . $image . "\">" . $model . "</option>";
            }
        }

    }

the html and javascript

<td><img id="tag1" src="images/1.png" /></td><td><select onchange="document.getElementById('tag1').src = this.options[this.selectedIndex].value;" name="tag1"><?php createSelectDT(); ?></select><br />New Header:<input type="text" name="tag1head" /><br />New background:<input type="text" name="tag1bg" /><br />New Footer:<input type="text" name="tag1foot" /><br />Upload image:</td>

<td><img id "tagtwo" src="images/1.png" /></td>     <td><select onchange="document.getElementById('tagtwo').src = this.options[this.selectedIndex].value;" name="tag2"><?php createSelectDT(); ?></select><br />New Header:<input type="text" name="tag1head" /><br />New background:<input type="text" name="tag1bg" /><br />New Footer:<input type="text" name="tag1foot" /><br />Upload image:</td>

its interesting that tag2 will work if I set the javscript getElementById to tag1. but not for tag2. whatsup?

Upvotes: 0

Views: 3983

Answers (2)

Nazca
Nazca

Reputation: 112

The problem ended up being an html typo. Missing equal signs.

Upvotes: 0

user1056677
user1056677

Reputation: 347

I tried a slightly modified version of what you wrote and it worked as it should: 

<select name="tag2" onchange="document.getElementById('tagtwo').src = this.value;">
       <option value="tag2.jpg">tag2</option>
       <option value="tag3.jpg">tag3</option>
</select>

You probably should point the onchange to a function by doing a little re-write:

<script type="text/javascript">

function setImage(elem)
{
    document.getElementById(elem.name).src = elem.value;
    return false;
}

</script>

<select name="tag1" onchange="setImage(this);">
     <option value="tag2.jpg">tag2</option>
     <option value="tag3.jpg">tag3</option>
</select>

For the above function to work the name and id must be equal - so on the select name="tag2" and on the img id="tag2". If this doesn't work, please post the value of createSelectDT() because the problem is likely there.

Upvotes: 1

Related Questions