Adding a multiple value element

There are a couple of elements that can have multiple values, for example, a group of checkboxes or a multiple select element. When adding these elements, you need to add a pair of square brackets to the name attribute of the element []. To add a multiple form element, there are three steps.

Step 1

Pick a unique name for the element, choose a name for your new element that is not currently used by another element. The name should be all lower case and multiple words should be joined by an underscore. Because this is a multiple value element, you should also add a pair of square brackets to the end. For example, pizza_toppings[].

Step 2

Add the HTML for the form element in your web page. The easiest way to add another form element is to copy the existing HTML code for the element, including all surrounding wrappers. There is an example of most HTML form elements and the code you should use in the file example-all-elements.html. Each element included with the form has comments surrounding it. So to copy the entire element you would select the all the HTML code between the comments. For example, lets say we wanted to add a multi checkbox field. We would copy the HTML for the “Multi checkbox” element by searching inside example-all-elements.html for the term Multi Checkbox then copying the HTML for the element and pasting the code in between the form elements that you would like your new element to be between. You would then change all occurrences of multi_checkbox[] in your copied code with the name you want to give your new element, below I have given it the name pizza_toppings[].

1
2
3
4
5
6
7
89
10
1112
13
1415
16
1718
19
2021
22
23
24
25
26

<!-- Multi Checkbox element -->
<div class="quform-element quform-element-checkbox">
<div class="quform-spacer">
  <label>Multi checkbox <span class="quform-required">*</span></label>
  <div class="quform-input">
      <div class="quform-options">
          <div class="quform-option">
              <label><input name="pizza_toppings[]" value="Ham" type="checkbox" /> Ham</label>          </div>
          <div class="quform-option">
              <label><input name="pizza_toppings[]" value="Pepperoni" type="checkbox" /> Pepperoni</label>          </div>
          <div class="quform-option">
              <label><input name="pizza_toppings[]" value="Pineapple" type="checkbox" /> Pineapple</label>          </div>
          <div class="quform-option">
              <label><input name="pizza_toppings[]" value="Mushrooms" type="checkbox" /> Mushrooms</label>          </div>
          <div class="quform-option">
              <label><input name="pizza_toppings[]" value="Olives" type="checkbox" /> Olives</label>          </div>
      </div>
  </div>
</div>
</div>
<!-- End Multi Checkbox element -->

<!-- Multi Checkbox element -->
<div class="quform-element quform-element-checkbox">
<div class="quform-spacer">
  <label>Multi checkbox <span class="quform-required">*</span></label>
  <div class="quform-input">
      <div class="quform-options">
          <div class="quform-option">
              <label><input name="pizza_toppings[]" value="Ham" type="checkbox" /> Ham</label>
          </div>
          <div class="quform-option">
              <label><input name="pizza_toppings[]" value="Pepperoni" type="checkbox" /> Pepperoni</label>
          </div>
          <div class="quform-option">
              <label><input name="pizza_toppings[]" value="Pineapple" type="checkbox" /> Pineapple</label>
          </div>
          <div class="quform-option">
              <label><input name="pizza_toppings[]" value="Mushrooms" type="checkbox" /> Mushrooms</label>
          </div>
          <div class="quform-option">
              <label><input name="pizza_toppings[]" value="Olives" type="checkbox" /> Olives</label>
          </div>
      </div>
  </div>
</div>
</div>
<!-- End Multi Checkbox element -->

• On lines 8, 11, 14, 17 and 20, change pizza_toppings to your unique element name from Step 1.
• To add another option, copy and paste the div with class quform-option and change the checkbox Label and Value
• To remove an option, simply delete the div with class quform-option surrounding the checkbox

Step 3

Add the form element to the process.php file to make the PHP script aware of the new form element, you will need to edit the file quform/process.php. You will need to create a new Quform_Element object for your new field, just copy the code below then change the name to suit your new element or use the code below. The difference with multiple elements is the you need to add [] to the end of the name in process.php also. Continuing the above example would give us:

12

$element = new Quform_Element('pizza_toppings[]');$form->addElement($element);

$element = new Quform_Element('pizza_toppings[]');
$form->addElement($element);

• On line 1, change pizza_toppings to your unique element name from Step 1. It is important that this matches the name="" attribute of the form element in the HTML. This tells the PHP script what element you are referring to.