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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Help!

  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help!

    This is simple but not simple enough for me. What I am trying to do this have a list of checkboxes as such:

    <input type="checkbox" name"Checkbox1" />
    <input type="checkbox" name"Checkbox2" />
    <input type="checkbox" name"Checkbox3" />
    <input type="checkbox" name"Checkbox4" />
    <input type="checkbox" name"Checkbox5" />


    I want to detect when a user clicks on the checkbox and then display the name of the checkbox in an textarea. I've tried this before but it displayed the variables in an array with commas and I rather have the output as follows:

    Checkbox1
    Checkbox2
    Checkbox3
    etc... (depending on what the user clicks)

    I also want to make sure that these variables are still in an array so that I can eventually use the data for my next step.

    array[0] = "Checkbox1";
    array[1] = "Checkbox2";
    (depending on what the user clicks)


    PLEASE HELP.

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    feel free to ask questions. i put an alert box in the function so you can easily see the array grow

    Code:
    <script type="text/javascript">
    	var boxArray = [];
    	
    	function display(checkbox){		
    	   textarea = document.getElementById("checkDisplay");
    	   textarea.innerText = checkbox.name;
    	   boxArray.push(checkbox.name);
    	   alert(boxArray);
    	}
    </script>
    
    
      <html>
    
      <input type="checkbox" onclick="display(this);" name="Checkbox1" />
      <textarea id="checkDisplay" rows="2" cols="20"></textarea>
      
      </html>

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually I might need to clarify more.

    I want the textbox to display the boxArray and update whenever a checkbox is checked or unchecked. also without any comma separation.

    And I want to prevent the same value being added to the array.
    Last edited by brandond424; 03-23-2012 at 08:59 PM.

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    <script type="text/javascript">
    var boxArray = [];
    var newline = "";

    function display(checkbox){
    textarea = document.getElementById("checkDisplay");
    if(textarea.innerText.search(checkbox.name) == -1){
    textarea.innerText += newline + checkbox.name;
    boxArray.push(checkbox.name);
    }
    newline = "\n";
    }
    </script>


    <html>

    <input type="checkbox" onclick="display(this);" name="Checkbox1" />
    <input type="checkbox" onclick="display(this);" name="Checkbox2" />
    <textarea id="checkDisplay" rows="2" cols="20"></textarea>

    </html>

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope close! but I was looking for something more like this..

    <script type="text/javascript">
    var boxArray = [];

    function display(checkbox){
    textarea = document.getElementById("checkDisplay");
    boxArray.push(checkbox.name + "\r\n");

    textarea.innerText = boxArray;

    }
    </script>


    Only thing im missing now is the removal of the commas from the textarea, and when you uncheck a checkbox the value is removed from both the array and the textbox.

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    you probably don't want "\r\n" in your array and the code you just posted also does not check for duplicates and you can not insert the array into a text area without getting the commas.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,659 Times in 4,621 Posts
    K.I.S.S.

    Assuming the checkboxes can all be grouped in a <div> it's easy.

    (Would also be easy if these were only checkboxes in the <form>.
    Would also be easy if you gave a class= to them that was not shared by any other form elements.)


    Code:
    function displayDBs()
    { 
        var cbs = document.getElementById("CBgroup").getElementsByTagName("input");
        var list = [];
        for ( var c = 0; c < cbs.length; ++c )
        {
            var cb;
            if ( cb.checked ) list.push( cb.name );
        }
        document.forms[0].checkDisplay.value = list.join("\n");
    }
    </script>
    
    ...
    
    
    <form>
    <div id="CBgroup">
        <input type="checkbox" onclick="displayCBs();" name="Checkbox1" />
        <input type="checkbox" onclick="displayCBs();" name="Checkbox2" />
        <input type="checkbox" onclick="displayCBs();" name="Checkbox3" />
        <input type="checkbox" onclick="displayCBs();" name="Checkbox4" />
    </div>
    
    <textarea name="checkDisplay" rows="4" cols="20"></textarea>
    ...
    </form>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,659 Times in 4,621 Posts
    If these are the only checkboxes in the <form> you can ditch the grouping DIV and do:

    Code:
    function displayDBs()
    {
        var form = document.forms[0];
        var list = [];
        for ( var e = 0; e < form.elements.length; ++e )
        {
            var elem = form.elements[e];
            if ( elem.type == "checkbox" && elem.checked ) list.push( elem.name );
        ]
        form.checkDisplay.value = list.join("\n");
    }
    Or if you gave them all the same classname (e.g, <input class="zamboni" type="checkbox" ...>) then
    Code:
    function displayDBs()
    {
        var form = document.forms[0];
        var list = [];
        for ( var e = 0; e < form.elements.length; ++e )
        {
            var elem = form.elements[e];
            if ( elem.className == "zamboni" && elem.checked ) list.push( elem.name );
        ]
        form.checkDisplay.value = list.join("\n");
    }
    THere are other ways if one of those won't work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes that is perfect! thanks alot

  • #10
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    One more thing, is there anyway I can set it up so that it access the form class name instead of

    var form = document.forms[0];

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,659 Times in 4,621 Posts
    The best thing (most modern and conforming) is to give the <form> an id:

    Code:
    <form id="cbDemoForm">
    And then get the reference as you would any other thing with an id:
    Code:
        var form = document.getElementById("dbDemoForm");
    Is there some reason to get the <form> by classname? Would you really have lots of <form>s on the page, each with a different class? If they each have a different class, wouldn't it work as well to give each a different id? Even in your <style> section that just means the difference between
    Code:
    <style type="text/css">
    form.wolfram { ... }
    </style>
    versus
    Code:
    <style type="text/css">
    form#wolfram { ... }
    </style>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The only this is what if I have multiple checkboxes within different parts of the website. Should I just wrap the entire site in the Form ID.

    What I want to is have multiple checkboxes with the same form ID, I tried that using the code you provide but it did not work. heres my example.


    Code:
    <form id="PLEASEWORK">
    
        <input type="checkbox" class="DirectoryCheckBox" onclick="displayCompany();" name="Checkbox1" />
     </form>
        
    <form id="PLEASEWORK">
        <input type="checkbox" class="DirectoryCheckBox" onclick="displayCompany();" name="Checkbox2" />
    </form>
          
    <form id="PLEASEWORK">
        <input type="checkbox" class="DirectoryCheckBox" onclick="displayCompany();" name="Checkbox3" />
    </form>
        
    <form id="PLEASEWORK">
        <input type="checkbox" class="DirectoryCheckBox" onclick="displayCompany();" name="Checkbox4" />
    </form>
    
    <form id="PLEASEWORK">
    <textarea name="checkDisplay" rows="4" cols="20"></textarea>
    
    </form>
    
    
    
    
    <script type="text/javascript">
    
    function displayCompany()
    {
        var form = document.getElementById("PLEASEWORK");
        var list = [];
        for ( var e = 0; e < form.elements.length; ++e )
        {
            var elem = form.elements[e];
            if ( elem.className == "DirectoryCheckBox" && elem.checked ) list.push( elem.name );
    	}
       
        form.checkDisplay.value = list.join("\n");
    	
    	
    
    }
    </script>

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,659 Times in 4,621 Posts
    No no...an ID *MUST* be UNIQUE on a page! You can't use the same ID more than once.

    But...

    But normally, it is a bad idea to have more than one <form> per page. If you are sending the <form> contents to some server-side code (e.g., PHP/ASP/JSP) then you can never send the contents of more than one <form>.

    Why do you need multiple <form>s??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What Im doing is building a directory, and I want to add a function where the user can check a box and the company gets added to a list, so they can send a request to all the companies on a list. The directory is generated using a while loop and getting data from a database.

    Now I want to incorporate the checkbox into the while loop but since there's always gonna be more than one company there's gonna be multiple forms with the same Ids as well. Which won't work. So now I need another way to handle this.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,659 Times in 4,621 Posts
    I still don't see the reason for the multiple forms. Eventually, you are going to have to send this information to a server if you expect the data to be saved in your system. (It could only be saved on the user's machine if you don't send it to the server...and even then only in a limited way.)

    And as I said, you can *NOT* send the contents of more than one <form> to the server. [Okay, okay...there are tricky ways to do it. Way beyond the scope of this thread.]

    So you want one <form>. Really.

    And another thing to realize is that the IDs in a <form> are *USELESS* when you send the data to the server. They are *NEVER* sent. ONLY the names of <form> elements are sent.

    So you simply have to give your elements unique names.

    For example:
    Code:
    <form ...>
    Company 1:
        <input name="company_1" />
        <input type="checkbox" name="company_1_box1" />
        <input type="checkbox" name="company_1_box2" />
    
    Company 2:
        <input name="company_2" />
        <input type="checkbox" name="company_2_box1" />
        <input type="checkbox" name="company_2_box2" />
    
    ... and so on ...
    </form>
    But I don't know enough about your total application to know if this makes sense to you.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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