How to append multiple values to a single parameter in html form?

Question

Assuming I have the following form:

<form action="process.php">
<input type="checkbox" name="option1" value="oats"> Oats
<input type="checkbox" name="option2" value="beans"> Beans
<input type="hidden" name="parameter" value="a"/>
<input type="submit" value="Submit"/>
</form>

What would normally happen is after clicking on the URL, the browser redirects to:

process.php?option1=oats&option2=beans&parameter=a

How do I make it such that when the submit is clicked all the checkboxes end up as part of the "parameter", but separated by commas? So in other words it would be:

process.php?parameter=a,oats,beans

Best solution with minimal javascript/jquery/html is best if no html solution.

Possible duplicate http://stackoverflow.com/questions/2433727/submitting-a-multidimensional-array-via-post-with-php — Ricardo Alvaro Lohmann, Dec 11 '12 at 23:37
It does not matter what process.php is expecting, what matters is the result "GET" url of the action. — Rolando, Dec 12 '12 at 03:42

score 18 · Accepted Answer · answered Dec 11 '12 at 23:33

18

If you want several values in one parameter, you have to name it like parameter[]

f.e.:

<form action="process.php">
<input type="checkbox" name="parameter[]" value="oats"> Oats
<input type="checkbox" name="parameter[]" value="beans"> Beans
<input type="hidden" name="parameter[]" value="a"/>
<input type="submit" value="Submit"/>
</form>

answered Dec 11 '12 at 23:33

Pablo Martinez

2,172
1
23
27

10

Note that the ugly `[]` in the parameter name is a PHP-specific feature/quirk in order to be able to get an array out of it. In HTTP (and practically all other server side languages like JSP/ASP/etc) the `[]`s are unnecessary, so you can just use multiple input elements with `name="parameter"`. – BalusC Dec 12 '12 at 17:09
1

Yes I know @BalusC but he is using php: `
` thats why I put the `[]`
– Pablo Martinez Dec 13 '12 at 10:25

Ivan Buttinoni · Answer 2 · 2012-12-12T16:43:26.833

More or less here the idea: first form, 1 hidden input will catch all the vaules of second and void form

<script type="text/javascript">
function myfunc(){
    $('#void input').each(function(id,elem){
         b = $("#res").val();
         if(b.length > 0){
            $("#res").val( b + ',' + $(this).val() );
        } else {
            $("#res").val( $(this).val() );
        }

    });
        alert("VAL "+$("#res").val());
    $("#real").submit();

return false;
}

</script>

<form id="real" action="process.php">
<input id="res" type="hidden" name="parameter" value=""/>
</form>

<form id="void">
<input type="checkbox" name="option1" value="oats"> Oats
<input type="checkbox" name="option2" value="beans"> Beans
<input type="hidden" name="parameter" value="a"/>
<input type="submit" value="Submit" onClick="javascript:myfunc()"/>
</form>

add some fix, submit the right form. Tested on jsfiddle:

JsFiddel "working" example

ADD SINGLE FORM VERSION

You've to know the name of the field, and ignore the other params in the answer

<script type="text/javascript">
function myfunc(){
    // can use more selector
    $('#real input').each(function(id,elem){
        // append the data to this field so no need to process it
        if(this.id == 'res'){
            return;                
        }
        // here I concat the values 
        b = $("#res").val();
        if(b.length > 0){
            $("#res").val( b + ',' + $(this).val() );
        } else {
            $("#res").val( $(this).val() );
        }

    });
    alert("VAL "+$("#res").val());  // remove me
    $("#real").submit();

    return false;
}

</script>

<form id='real' method='POST' action="#">
<input type="checkbox" name="option1" value="oats"> Oats
<input type="checkbox" name="option2" value="beans"> Beans
<input id="res" type="hidden" name="parameter" value="a"/>
<input type="submit" value="Submit" onClick="javascript:myfunc()"/>
</form>

score 0 · Answer 3 · answered Mar 09 '17 at 13:31

There is a very useful method to use for dynamic data grouping.

<form action="file.php" method="post">

<?php for ( $i = 0; $i < count( $something ); $++ ) { ?>
    <input type="checkbox" name="<?php $something[$i]; ?>[]" value="user_id"> Oats
    <input type="checkbox" name="<?php $something[$i]; ?>[]" value="user_name"> Beans
<?php } ?>
<input type="submit" value="Submit"/>
</form>

score 0 · Answer 4 · answered Sep 21 '17 at 02:01

I was really only interested in checkboxes that were actually checked - so I built myfunc() from the other examples like this:

function myfunc(){
    $('#void input[type="checkbox"]').each(function(id,elem){
        if ( ! $(this).is(':checked') ) return;
        b = $("#res").val();
        if(b.length > 0){
            $("#res").val( b + ',' + $(this).val() );
        } else {
            $("#res").val( $(this).val() );
        }
    });
    var stuff = $("#res").val();
    if ( stuff.length < 1 ) {
        alert('Please select at least one');
    } else {
        $("#real").submit();
    }
}

How to append multiple values to a single parameter in html form?

4 Answers4

Linked