Many Checkboxes - Five Set Input Names

[liberate]

Hi Everyone

I want to have 5 form inputs with 5 standardized names, but I want the 
values to come from 20 or more checkbox options.

 // using slashes as comments
 
<input type="hidden" name="input1" value= "// value of checkbox \\ > 
<input type="hidden" name="input2" value= "// value of checkbox \\ > 
<input type="hidden" name="input3" value= "// value of checkbox \\ > 
<input type="hidden" name="input4" value= "// value of checkbox \\ > 
<input type="hidden" name="input5" value= "// value of checkbox \\ > 



// limiting that the 6th checkbox doesn't become checked without first 
deselecting another.

<input type="checkbox" name="input[]" value= " john@doe.com ">
<input type="checkbox" name="input[]" value= " jane@doe.com "> // and 20 or 
more checkboxes
etc.
etc.
etc.
etc.
etc.
So upto 5 selected checkboxes become the name="input1" through 
name="input5".

Or I could have 20 checkboxes with 20 names, any 5 of which being 
submitted in the form. But then (Server Side) I would have to map (for 
lack of a better term) 5 unknown form names to 5 set variables
<?php
$input1 = $_POST[" // first input from form \\ "];  
$input2 = $_POST[" // second input from form \\ "]; 
$input3 = $_POST[" // third input from form \\ "]; 
$input4 = $_POST[" // fourth input from form \\ "]; 
$input5 = $_POST[" // fifth input from form \\ "];

Over time the number of checkbox options will increase, and I will have to update the html form, but it would be nice if the code didn't have to change as the number of options increases.

 

I have to make 20+ options, upto 5 of which get selected, matched to 5 standardized named inputs, but not sure which is easier: client side or server side?

 

And since the form values are email addresses, I will have to keep the spam bots from harvesting them. I have an old method, what are the current solutions?

 

Thanks in advance

Tom

 

Grrr. I have everything laid out all organized, looking just as I want and then hit submit and all he** breaks loose.

Edited May 17, 2013 by liberate

[dalecosp]

Server-side is almost always easier, unless you were born and bred in Javascript. PHP handling might also have the advantage of hiding email from spambots? (I'm not sure if I'm following you correctly on that one).

 

However, "modern" UI's typically make use of AJAX/RESTful interfaces.

 

// limiting that the 6th checkbox doesn't become checked without first

deselecting another.

That will *have* to be done in JS.

So upto 5 selected checkboxes become the name="input1" through

name="input5".

Remember that POST parameters can be arrays!

Or I could have 20 checkboxes with 20 names, any 5 of which being

submitted in the form. But then (Server Side) I would have to map (for

lack of a better term) 5 unknown form names to 5 set variables

<?php

$input1 = $_POST[" // first input from form \\ "];  

$input2 = $_POST[" // second input from form \\ "];

$input3 = $_POST[" // third input from form \\ "];

$input4 = $_POST[" // fourth input from form \\ "];

$input5 = $_POST[" // fifth input from form \\ "];[/code]

Ditto. You could post the 5 items as an array. In this case, though, I'd have to question the sanity of presenting 20 checkboxes to the user.

I have an old method, what are the current solutions?

Before you ditch your "old method" ... what is it? Not everything should be replaced *just* because it's old ;-) Edited May 17, 2013 by dalecosp

[liberate]

Hi dalecosp

 

The method I have used in the past to slow down spam bots is:

<script language="JavaScript" type="text/javascript">
<!--
var name = "john";
var domain = "doe.com";
document.write('<a class=\"footer\" href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '<\/a>');
// -->
</script>

I know some new methods use captcha, which I will not be able to do for this application.

 

I understand the sanity question, and in fact the list of optional checkbox could grow to 50 or so over time, at which time I will agree with you on the insanity of the situation, however I can't see any other option.  With that in mind I can't see submitting 50 inputs, only 5 having values and let php find the five with values. Client side would seam to be the way to go. 

 

One addition to the set up: I would like one of the options to be a user filled text field, so that if the user can't find the option they want among the 20 ("cough" - or 50) they can add the one they want.

 

With the spam bot question, I could have 50 good (primary) email addresses sitting in html on a webpage, that I need to ensure don't get harvested. It would be much more secure to just have the names in html and let php retrieve the emails of the selected names from mysql during form processing. OK so I am going with adding the emails in php during processing.

 

With client side option, what code do I need to find the five selected options and assign them to the five input names? I have never worked with arrays or loops.

[liberate]

I think I am getting closer... But not there yet.

<!DOCTYPE html>
<head>
<!-- Include jQuery! -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script>
jQuery(function(){
    
var max = 5;
    
var checkboxes = $('input[type="checkbox"]');
                       
    
checkboxes.change(function(){
        
var current = checkboxes.filter(':checked').length;
        
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
   
  });
});
</script>
</head>
<body>

<form method="post" action="http://mysite.com/form_pro.php">
<input type="checkbox" name='selected[]' value="unique1" />John Doe<br>
<input type="checkbox" name='selected[]' value="unique2" />Jane Doe<br>
<input type="checkbox" name='selected[]' value="unique3" />John Doe<br>
<input type="checkbox" name='selected[]' value="unique4" />Bill Doe<br>
<input type="checkbox" name='selected[]' value="unique5" />Billy Bob<br>
<input type="checkbox" name='selected[]' value="unique6" />etc<br>
<input type="checkbox" name='selected[]' value="unique7" />etc<br>
<input type="checkbox" name='selected[]' value="unique8" />etc<br>
<input type="checkbox" name='selected[]' value="unique9" />etc<br>
etc. // no need to include all code yet.
<input type="submit" value="Submit">
</form>

// Not sure how to get the array to work. 
// I found this but don't know how it works or if it actually does what I want it to do.

<script type="text/javascript">
var selected = new Array();
$(document).ready(function() {
  $("input:checkbox[name=type]:checked").each(function() {
       selected.push($(this).val());
  });
});
</script>

I suppose that as long as I am only submitting the 5 selected checkboxes, I can do the mapping to the 5 set names in php. Although I don't know how to that either.

 

Any help or assistance would be greatly appreciated.

Edited May 17, 2013 by liberate

[liberate]

Just posting an update.

 

Limiting to only five selected was easy to find. There is a fiddle of it  http://jsfiddle.net/jaredhoyt/Ghtbu/1/  The code is above in previous post.

 

Decided to do the rest in php.

 

After a little googling, the answer to the array and mapping only those selected to the five set names was very easy.  The code below does the job. This  is form_pro.php in the post above.

$selected = $_POST['selected'];

array_filter($selected);
 

$test0 = $selected[0];
$test1 = $selected[1];
$test2 = $selected[2];
$test3 = $selected[3];
$test4 = $selected[4];

Next I just have to retrieve the email addresses from mysql based off of each person's unique identifier. That's easy.

Edited May 18, 2013 by liberate