将下拉表单转换为可选按钮

Question

I have the following dropdown form :

<select value="<?php echo $salesman; ?>" class="form-control" name="data[Invoice][salesman]" placeholder="Salesman">
    <option value="Unset" <?= ($invoice['Invoice']['salesman']) == 'Unset' ? 'selected' : '' ?>>Please Choose</option>
    <option value="Person 1" <?= ($invoice['Invoice']['salesman']) == 'Person 1' ? 'selected' : '' ?>>Person 1</option>
    <option value="Person 2" <?= ($invoice['Invoice']['salesman']) == 'Person 2' ? 'selected' : '' ?>>Person 2</option>
    <option value="Person 3" <?= ($invoice['Invoice']['salesman']) == 'Person 3' ? 'selected' : '' ?>>Person 3</option>
    <option value="None" <?= ($invoice['Invoice']['salesman']) == 'None' ? 'selected' : '' ?>>None</option>
</select>   

and the SQL code to parse it(snippet) :

$salesman = mysqli_real_escape_string( $this->_con, trim( $data['data']['Invoice']['salesman'] ) );

How would I convert the dropdown to be instead images as in the image I have uploaded? The end result would allow the user to click on multiple people, and have that information stored, and retrieved properly when viewing the page. The people selected will have their button highlighted as such with a custom image.

Answer 1

In order to allow your form to handle multiple values instead of just a single value for salesman, you would need to pass it an array of values

(e.g. $invoice['Invoice']['salespeople'] = ['Person 1', 'Person 2'];)

In this case you could represent the data on your form using checkboxes like this:

<label>Person 1</label><input type="checkbox" name="salespeople[]" value="Person 1" 
    <?= in_array('Person 1', $invoice['Invoice']['salespeople']) ? 'checked' : '' ?>>

<label>Person 2</label><input type="checkbox" name="salespeople[]" value="Person 2" 
    <?= in_array('Person 2', $invoice['Invoice']['salespeople']) ? 'checked' : '' ?>>

<label>Person 3</label><input type="checkbox" name="salespeople[]" value="Person 3" 
    <?= in_array('Person 3', $invoice['Invoice']['salespeople']) ? 'checked' : '' ?>>

<label>None</label><input type="checkbox" name="salespeople[]" value="None" 
    <?= empty($invoice['Invoice']['salespeople']) ? 'checked' : '' ?>>

Then when you submit your form, the script that handles the submission would get an array of salespeople rather than a single salesman.

It is possible to style the labels+checkboxes as toggle buttons using CSS; you can google for various examples of this.