Wie mehrere Werte an einen einzelnen Parameter in HTML-Formular anhängen?

Question

Angenommen, ich die folgende Form haben:

<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> 

Was normalerweise geschehen würde, ist nach dem Einschalten der URL klicken, wird der Browser Umleitungen an:

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

Wie kann ich es machen, so dass, wenn die besteht, erfolgt geklickt alle Checkboxen am Ende als Teil des "Parameters", aber durch Kommas getrennt? Also mit anderen Worten wäre es:

process.php?parameter=a,oats,beans 

beste Lösung mit minimalen Javascript/jquery/html ist am besten, wenn keine HTML-Lösung.

Answer 1

Wenn Sie mehrere Werte in einem Parameter wollen, müssen Sie es nennen wie parameter[]

fe:

<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> 

Answer 2

Mehr oder weniger die Idee hier: erste Form, 1 versteckte Eingang wird fangen alle die Werte annehmen von zweiten und nichtig 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> 

einige fix, senden Sie die richtige Form hinzufügen. Getestet auf jsfiddle:

JsFiddel "working" example

ADD SINGLE FORM VERSION

Sie haben den Namen des Feldes zu kennen, und ignorieren die anderen params in der Antwort

<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>​ 

Answer 3

Es ist eine sehr nützliche Methode zur dynamischen Gruppierung von Daten.

<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> 

Answer 4

Ich war wirklich nur daran interessiert, Kontrollkästchen, die tatsächlich geprüft wurden - so baute ich myfunc() von den anderen Beispielen wie folgt aus:

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(); 
    } 
}