2 Replies - 602 Views - Last Post: 25 April 2013 - 08:10 PM

#1 nautica17  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 155
  • Joined: 28-August 09

Can't add/remove elements in Chrome and Safari

Posted 20 April 2013 - 09:44 PM

I'm playing around with dynamically adding/removing elements from web pages. I've run into a little issue though. I can add/remove elements using Firefox, Opera, and IE, but can't do so using Chrome and Safari. I've tried researching this issue but with no luck. I'm assuming there is some tiny little quirk somewhere that I'm not noticing.

Anyone have any ideas or suggestions? I'm guessing something wrong with my javascript code?

Edit: Selecting "Option 2" from the drop down menu should create another drop down menu below.

Thank-you

<html>

        <head>
                <meta charset = "utf-8">
                <title>Test</title>
        </head>

        <body>
                <script type="text/javascript">
                        function reveal_option()
                        {
                                if( document.getElementById("stuff").value == "2" )
                                {
                                        var table = document.getElementById('myTable');

                                        var row = table.insertRow(1);

                                        var cell1 = row.insertCell(0);
                                        cell1.innerHTML = "Testing";

                                        var cell2 = row.insertCell(1);
                                        var elem_select = document.createElement("select");
                                        elem_select.name = "my_id";
                                        var option1 = document.createElement("option");
                                        option1.value = "1";
                                        option1.innerHTML = "stuff";
                                        elem_select.appendChild(option1);
                                        cell2.appendChild(elem_select);
                                }
                        }
                </script>

                <form name="myForm" method="POST" action="test2.php">

                        <table id="myTable">

                                <tr>
                                        <td>Something</td>
                                        <td><select name="something" id="stuff">
                                                <option value="1">Option 1</option>
                                                <option value="2" onclick="reveal_option()">Option 2</option>
                                        </select></td>
                                </tr>

                        </table>

                        <input type="submit" value="Enter" />

                </form>

        </body>

</html>


This post has been edited by nautica17: 20 April 2013 - 09:45 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Can't add/remove elements in Chrome and Safari

#2 AdaHacker  Icon User is offline

  • Resident Curmudgeon

Reputation: 452
  • View blog
  • Posts: 811
  • Joined: 17-June 08

Re: Can't add/remove elements in Chrome and Safari

Posted 23 April 2013 - 09:59 AM

Using "onclick" on a select option isn't universally supported. Instead, try using the onchange event on the select node itself, e.g. <select name="something" id="stuff" onchange="reveal_option()">.
Was This Post Helpful? 3
  • +
  • -

#3 nautica17  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 155
  • Joined: 28-August 09

Re: Can't add/remove elements in Chrome and Safari

Posted 25 April 2013 - 08:10 PM

Works! Thank-you very much!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1