Why does this not work? dropdown duplicate

[swl7]

Im trying to get a drop down box to duplicate when a user presses a button but it just refreshes the page on click

    <form id="form">
		<select id="time2" name="time2">

		  <option value="N/A">N/A</option>
		  <option value="Archery range">Archery Range</option>
  		  <option value="Rifle range">Rifle Range</option>
  		  <option value="Climbing wall">Climbing Wall</option>
  		  <option value="Grass sledges">Glass Sledges</option>
  		  <option value="Go karts">Go Karts</option>
		  <option value="Camp fire circle">Camp Fire Circle</option>
		  


        <button id="add">Add</button>

</select>
    </form>

 document.getElementById( 'add' ).addEventListener( 'click', function ( event ) {
        
        event.preventDefault();
        var select = document.getElementById( 'select' ).cloneNode( true );
        document.getElementById( 'form' ).appendChild( select );
        
    }, false );​

[kromol]

var select = document.getElementById( 'select' ).cloneNode( true );

I don't see element with id select

[swl7]

You were right on that one lol

but it didn't solve the problem, It refreshes the page and adds a question mark at the end of the URL? if that helps?

[kromol]

You also put button into select. I think it should be outside.
This code works in firefox

<form id="form">
    <select id="select" name="time2">
        <option value="N/A">N/A</option>
        <option value="Archery range">Archery Range</option>
        <option value="Rifle range">Rifle Range</option>
        <option value="Climbing wall">Climbing Wall</option>
        <option value="Grass sledges">Glass Sledges</option>
        <option value="Go karts">Go Karts</option>
        <option value="Camp fire circle">Camp Fire Circle</option>
    </select>
    <button id="add">Add</button>
</form>

And javascript:

document.getElementById('add').addEventListener('click', function(event){
    event.preventDefault();
    var select = document.getElementById('select').cloneNode(true);
    document.getElementById('form').appendChild(select);
}, true);

[swl7]

Thats so weird. I copied the code over and replaced it making sure it was all good. saved it and checked on firefox, safari, chrome but nothing just loads the page.

Ive also tried this on a blank page just the make sure. Just does the same thing.

Im just experimenting atm (to improve my knowledge) but would like to see this work.

Is there anything else that could cause it not to work?

[JPnyc]

The page is refreshing because your form is submitting.

[ReFreezed]

You should just add type="button" to your button. The default type is "submit" which, as JPnyc states, makes the form submit.

<button type="button" id="add">Add</button>