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 11 of 11
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Getting the values of multiple checked checkboxes.

    Hi, I'm having problems getting the values of selected checkboxes and outputting them to a textarea. This seems like quite a simple thing to do but its causing me a lot of bother! I am using a mixture of JavaScript and jQuery to find a solution to this.


    Code:
    <h2>Booking Form</h2>
    <form name="booking">
    
    Please choose the days that would suit your visit: <br/>
    <input type="checkbox" name="days" value="Monday">Monday<br/>
    <input type="checkbox" name="days" value="Tuesday">Tuesday<br/>
    <input type="checkbox" name="days" value="Wednesday">Wednesday<br/>
    <input type="checkbox" name="days" value="Thursday">Thursday<br/>
    <input type="checkbox" name="days" value="Friday">Friday<br/>
    
    </form>
    
    <textarea id="output"> </textarea>
    Code:
    var values = $("#days").val() || [];
    $("p#ss").html("<strong>Checked values:</strong> " + values.join(", "));
    //This just outputs "Checked values:" to the paragraph 'ss' that I created just to test it this way.
    Help with this would be appreciated.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Try this:-

    Code:
    <h2>Booking Form</h2>
    <form name="booking">
    
    Please choose the days that would suit your visit: <br/>
    <input type="checkbox" name="days" value="Monday" onclick = "add()">Monday<br/>
    <input type="checkbox" name="days" value="Tuesday" onclick = "add()">Tuesday<br/>
    <input type="checkbox" name="days" value="Wednesday" onclick = "add()">Wednesday<br/>
    <input type="checkbox" name="days" value="Thursday" onclick = "add()">Thursday<br/>
    <input type="checkbox" name="days" value="Friday" onclick = "add()">Friday<br/>
    </form>
    
    <textarea id="output"> </textarea>
    
    <script type = "text/javascript">
    
    function add() {
    var message = "";
    document.getElementById("output").value = "";  // clear the textarea
    var len = document.booking.days.length;
    for (var i=0; i<len; i++) {
    if (document.booking.days[i].checked) {
    message += document.booking.days[i].value + "\n";
    }
    }
    message = message.replace(/(\r?\n)$/, "");  // remove final newline
    document.getElementById("output").value = message; 
    }
    
    </script>
    "What's the three words you never want to hear while making love? Honey, I'm home." - Ken Hammond.

  • Users who have thanked Philip M for this post:

    david56connor (12-02-2010)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Hey, Philip, may I suggest an easier way to handle the "get rid of the extra newline" (or any other delimiter) problem?
    Code:
    function add() {
        var message = "";
        var len = document.booking.days.length;
        for (var i=0; i<len; i++) {
            if (document.booking.days[i].checked) {
                message += ( i==0 ? "" : "\n" ) + document.booking.days[i].value;
            }
        }
        document.getElementById("output").value = message;
    }
    By making the delimiter a prefix to each line (except the first) instead of a suffix, it's easy to omit it from the first line. And the size/contents of the delimiter can be whatever is needed.
    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.

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the quick response and a solution! I also e-mailed my module co-ordinator and still haven't got a response from her, so thanks again

    The only part of the solution I don't understand is the last newline part, is it when i == "" it knows to stop? I just want to understand it so that I can explain it if asked, and also if I wanted to put them on one line just replace the \n with a comma would work fine?

    Cheers, Dave.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    The only part of the solution I don't understand is the last newline part,
    YOu mean my code?

    Code:
    ( i==0 ? "" : "\n" )
    That code is wrong. I misread what Philip was doing. Shame on me.

    You could change it to this, though:
    Code:
          message += ( message == "" ? "" : "\n" ) + document.booking.days[i].value;
    You can read that as "if the message is blank, prefix with a blank string; when it's not blank, put in the delimiter".

    DOH on me.
    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.

  • Users who have thanked Old Pedant for this post:

    david56connor (12-02-2010)

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Yea I tested your way Old Pendant and it worked out alright except for the fact that it took a new line at the beginning unless monday was checked in which case it would then look fine.

    Phillips method and your method both work

    Thanks again for the help, much appreciated!

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Surely ternary operators are a bit advanced for this student? The tutor will never believe that the script is his own work.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    LOL! And the tutor will believe he knows how to use a regexp such as /\n$/ ????

    Okay, the other simple way:
    Code:
    function add() {
        var message = "";
        var len = document.booking.days.length;
        for (var i=0; i<len; i++) {
            if (document.booking.days[i].checked) {
                message += "," + document.booking.days[i].value;
            }
        }
        document.getElementById("output").value = message.substring(1); // chop off leading delimiter
    }
    Changed to comma delimiter, since he asked for that.
    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
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Code:
    message = message.replace(/(\r?\n)$/, "");  // remove final newline
    The aim was to cut off the final delimiter, not the first one. Of course, your method works as well, to place the delimiter before the item rather than after it and then delete the first one. Seems as broad as it is long. Meouw! Meouw!

    But if you don't want to use the regex you could do:-

    Code:
    var len = message.length;
    message = message.substr(0,len-1);
    Last edited by Philip M; 12-03-2010 at 08:06 PM.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Yeah, all I was saying is that, in general, I find it easier to put the delimiter as a prefix and then remove it, rather than as a suffix and then remove it.

    I did it clumsily. Mea culpa.
    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.

  • #11
    New Coder
    Join Date
    Dec 2010
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Independant learning is advised as it happens I added a simple contact form to my site that I have to build too that uses a very simple PHP script to send the contents of the form in an e-mail even though we done no PHP at all.

    Stick a reference at the bottom of where I 'learned' how to do these things and alls good

    Thanks again!

    Dave.


  •  

    Tags for this Thread

    Posting Permissions

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