www.webdeveloper.com
Results 1 to 7 of 7

Thread: Why does this not work? dropdown duplicate

Hybrid View

  1. #1
    Join Date
    Mar 2008
    Posts
    88

    Why does this not work? dropdown duplicate

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


    HTML Code:
        <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>
    

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

  2. #2
    Join Date
    Jul 2011
    Posts
    127
    var select = document.getElementById( 'select' ).cloneNode( true );
    I don't see element with id select

  3. #3
    Join Date
    Mar 2008
    Posts
    88
    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?

  4. #4
    Join Date
    Jul 2011
    Posts
    127
    You also put button into select. I think it should be outside.
    This code works in firefox
    HTML Code:
    <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:
    Code:
    document.getElementById('add').addEventListener('click', function(event){
        event.preventDefault();
        var select = document.getElementById('select').cloneNode(true);
        document.getElementById('form').appendChild(select);
    }, true);

  5. #5
    Join Date
    Mar 2008
    Posts
    88
    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?

  6. #6
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    The page is refreshing because your form is submitting.

  7. #7
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    You should just add type="button" to your button. The default type is "submit" which, as JPnyc states, makes the form submit.

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles