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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Concatenating checkbox choices into text

    Hello!
    I have a very simple thing I want to do but am not a very experienced coder. I have a set of 5 checkboxes that I would like to concatenate the values of with text.
    Example:
    <tr>
    <td><input type="checkbox" name="IND" value="1" checked>One</td>
    <td><input type="checkbox" name="IND" value="2">Two</td>
    <td><input type="checkbox" name="IND" value="3">Three</td>
    <td><input type="checkbox" name="IND" value="4">Four</td>
    <td><input type="checkbox" name="IND" value="5">Five</td>
    </tr>


    I'm looking for a funtion that will dump text into a variable. The text should read:
    "WHERE TYPE EQ <value of checkbox> OR <value of checkbox>"...etc... depending upon how many have been selected.
    So, if the user checks 'two', 'four' and 'five' then the text should read "WHERE TYPE EQ 2 OR 4 OR 5"
    If they only pick 'one', then the text should read "WHERE TYPE EQ 1"

    I'm guessing it should be a loop where the value of IND eq 'checked' but I've never dealt with these before and I'm lost.

    Thanks in advance for your help!

  • #2
    New Coder
    Join Date
    May 2006
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <table>
    	<tr>
    		<td><input type="checkbox" name="IND" value="1" checked>One</td>
    		<td><input type="checkbox" name="IND" value="2">Two</td>
    		<td><input type="checkbox" name="IND" value="3">Three</td>
    		<td><input type="checkbox" name="IND" value="4">Four</td>
    		<td><input type="checkbox" name="IND" value="5">Five</td>
    	</tr>
    	<tr>
    		<td colspan="5">
    		<input type="button" name="qbutton" value="Create Query" onclick="alert(checkboxQueryString('IND'));">
    		</td>
    	</tr>
    </table>
    
    <script type="text/javascript">
    <!--
    
    function checkboxQueryString(name) {
    	var elements = document.getElementsByName(name);
    	//alertObj(ind);
    	var n = elements.length;
    	var checked = new Array();
    	for (var i = 0, j = 0; i < n; i++) {
    		var el = elements[i];
    		if (el.type == 'checkbox' && el.checked) {
    			checked[j] = el.value;
    			j++;
    		}
    	}
    	return 'WHERE TYPE EQ ' + checked.join(' OR ');
    }
    
    // alerts the object's immediate properties
    // just here to test stuff
    function alertObj(o) {
    	s = '';
    	for(e in o) {s += e+'='+o[e]+'\n';}
    	alert( s );
    }
    
    //-->
    </script>
    That should do the trick.
    The "checkboxQueryString" function takes the name of the check boxes as a parameter, and returns a string formatted the way you wanted.

    I'm assuming the string is a query, hence the name of the function. I don't recognize the syntax. What't it for?

    If you're using the returned in a server side app, I'd recommend you format the query string server side for security purposes.

    To get the Checkboxes with the same name I used:

    Code:
    var elements = document.getElementsByName(name);
    Then looped through each object in the returned object collection to test if the object is a checkbox and is checked:

    Code:
    if (el.type == 'checkbox' && el.checked) {
    the values of the checked checkboxes are saved in teh Array, checked.

    Code:
    checked[j] = el.value;
    After we have a collection of all the checkbox values for those that are checked, we return it with:

    Code:
    return 'WHERE TYPE EQ ' + checked.join(' OR ');
    joining each "checked" Array value together with the string " OR ".
    Fiji Web Design - where i do Joomla Web Design
    Bucabay.com - My blog


  •  

    Posting Permissions

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