Submit form information with multiple checkboxes/select menus

问题

I wanted to know if it was possible to have the form on this fiddle come out onto the database like this after the user hits submit once.

+------+------+----------+
| Name | Meal | Quantity |
+------+------+----------+
| Adam | Beef |        2 |
| Adam | Pork |        1 |
| Adam | Lamb |        3 |
+------+------+----------+

http://jsfiddle.net/f8zyakvj/1/

I know that through multi selects, all the information you select is sent through as an array, but for checkboxes, how can I make it so that the information is sent in a similar fashion. When I check off the top 3 boxes, and alert the value of food to see what I get, all I ever got is "1" no matter which box I check off.

I was hoping it would be as easy as the multi select where I could do something like this for the cfm

<cfloop list="#form.meal#, #form.quantity#" index="currMeal, currQuant">
    <cfquery name="Add" datasource="food"> 
       INSERT INTO Log (Name, Meal, Quantity)
       VALUES ( 
         <cfqueryparam value="#Form.Name#" cfsqltype="cf_sql_varchar">
         <cfqueryparam value="#currMeal#" cfsqltype="cf_sql_varchar">
         <cfqueryparam value="#currQuant#" cfsqltype="cf_sql_integer">
       )
    </cfquery>
</cfloop>

Any help on the issue would be appreciated.

回答1:

Your form elements do not have names, so the values won't be posted to your form action page
For your select drop downs, use the name to put the value corresponding to the meal checkbox so you can easily look it up - e.g. <input type="checkbox" value="3" name="meal"> would be paired with <select name="quantity_3">
Your insert query was missing commas, and would have given you a SQL syntax error.

Example:

<form name="form" action="Submit.cfm" method="post">
<input type="checkbox" value="1" name="meal"> Beef
<select name="quantity_1" class="GC0">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select><br>

<input type="checkbox" value="2" name="meal"> Chicken
<select name="quantity_2" class="GC1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select><br>

<input type="checkbox" value="3" name="meal"> Pork
<select name="quantity_3" class="GC2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select><br>

<input type="checkbox" value="4" name="meal"> Lamb
<select name="quantity_4" class="GC3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select><br>

Name: <input type="text" name="name" id="name">
<button value="submit">Submit</button>
</form>

Then on your processing page submit.cfm you can loop through FORM.meal (if it exists) and use the value of each item checked to reference the corresponding quantity field name:

<!--- Make sure something was checked before proceeding --->
<cfparam name="FORM.meal" default="" />

<!--- Convert the meal list to an array for looping --->
<cfset mealArray = listToArray(FORM.meal)>

<!--- Loop over the array values --->
<cfloop array="#mealArray#" index="currMeal">
    <!--- Insert into database --->
    <cfquery name="Add" datasource="food">
        INSERT INTO Log (Name, Meal, Quantity)
        VALUES (
            <cfqueryparam value="#FORM.Name#" cfsqltype="cf_sql_varchar">
            ,<cfqueryparam value="#currMeal#" cfsqltype="cf_sql_varchar">
            ,<cfqueryparam value="#FORM['quantity_#currMeal#']#" cfsqltype="cf_sql_integer">
        )
    </cfquery>
</cfloop>

Please keep in mind that you should consider wrapping your database inserts in a transaction, and/or consider a method for bulk inserting. Querying a database inside a loop is not considered best practice.

来源：https://stackoverflow.com/questions/32231877/submit-form-information-with-multiple-checkboxes-select-menus

标签

javascript

html

sql-server

coldfusion