Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Dynamically Add to a List with Javascript. No Page Refreshing.

    Hi Everyone

    I'll explain the situation first:

    I need to build a website that allows students to select from a drop down list and then hit an 'Add button'. From there, that value will go to another part of the screen and display as bullets. Once that list is built, they can hit a final submit button that sends an email to someone with everything they selected.

    More Detail:

    LEFT SIDE OF SCREEN:

    [DROP DOWN LIST] <- this will have all the courses listed that we offer. Once once is selected.

    [ADD] <- add button that puts the values from the dropdown list to an array.

    RIGHT SIDE OF SCREEN:

    My Courses:
    * TEST1001
    * TEST1002

    This is being updated dynamically so that whenever the add button is hit, this lists grows.

    [SEND] <- Send button

    Thank you,

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    What do you have so far?

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Right, should of included that!

    Right now I am using two forms.

    Left Side:
    Code:
    <form name="frm">
    Select Courses
    <select name="inputbox">
         <option value="COURSE1">COURSE1</option>
         <option value="COURSE2">COURSE2</option>
         <option value="COURSE3">COURSE3</option>
    </select>
    
    <input type="button" onClick="add_item();" value="Send to Backpack"/>
    </form>
    Right Side:
    Code:
    <form name="backpack">
    <textarea name="outputbox" value="" disabled="disabled" readonly="readonly" style="background-color: #E6E8E8; border:0; resize: none"></textarea>
    <input name="button" type="button" onClick="remove_item();" value="Remove"/>
    </form>
    And here if the javascript in the HEAD:

    Code:
    <script language="JavaScript">
    		var backpack_array = new Array();
    		
    		function add_item(){
    		   var item = document.frm.inputbox.value;
    		   backpack_array.push(item);
    		   document.backpack.outputbox.value = backpack_array ;
    		   
    		}
    		function remove_item(){
    		  backpack_array.pop();
    		  document.backpack.outputbox.value = backpack_array ;
    		}
    	</script>
    So this is actually making it dynamically update the textarea on the rightside, but it is comma seperated. I was hoping to have it be in bullets.

    Thanks,

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    This is because you assign an array to a (string typed) value of a textarea. This will automatically apply the method .toString() to the array, which will result in a comma separated list.

    You should process the array (or the list) to create <li> elements to a <ul> list instead of a textarea. You can't have (real) bulletts inside a textarea.

    Code:
    <ul id="outputbox">
    </ul>
    
    function add_item() {
       ...
       var mylist = document.getElementById('outputbox');
       mylist.innerHTML = '';
       for(i=0; i<backpack_array.length; i++) {
          mylist.innerHTML += '<li>' + backpack_array[i] + '</li>\n';
       }
    }

  • Users who have thanked devnull69 for this post:

    mikebio (02-29-2012)


  •  

    Posting Permissions

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