Using list as select inside form

Question

I was wondering if there is any whay to use styled list as select box for form input. Or if there is any similar solution where you can style select box with icons and more. Because my PHP validation fails.

PHP

 // Validate prioriteta
    if(empty(trim($_POST["prioriteta"]))){
        $prioriteta_err = "Prosim izberite prioriteto.";
    } else{
        // Prepare a select statement
        $sql = "SELECT id FROM tasks WHERE prioriteta = ?";

    if($stmt = mysqli_prepare($link, $sql)){
        // Bind variables to the prepared statement as parameters
        mysqli_stmt_bind_param($stmt, "s", $param_prioriteta);

        // Set parameters
        $param_prioriteta = trim($_POST["prioriteta"]);

        // Attempt to execute the prepared statement
        if(mysqli_stmt_execute($stmt)){
            /* store result */
            mysqli_stmt_store_result($stmt);
            $prioriteta = trim($_POST["prioriteta"]);
        } else{
            echo "Oops! Something went wrong. Please try again later.";
        }
    }

    // Close statement
    mysqli_stmt_close($stmt);
}

HTML

<input type="hidden" list="seznam" name="prioriteta" value="<?php echo $prioriteta; ?>">
<small class="text-muted control "><?php echo $prioriteta_err; ?></small>
<ul id="seznam" class="dropdown-menu">
  <li><i class="far fa-circle red pr-2" value="ZP"></i>Very High</li>
  <li><i class="far fa-circle purple pr-2" value="PO"></i>High</li>
  <li><i class="far fa-circle aquamarine pr-2" value="SR"></i>Mid</li>
  <li><i class="far fa-circle med-gray pr-2" value="NI"></i>Low</li>
</ul>

Yes, there is. Where did you get stuck? What went wrong? Where's your code? — David Thomas, Aug 30 '18 at 16:28
May be easier to add style to a select box, e.g.: https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option — Fabio Manzano, Aug 30 '18 at 16:31
@DavidThomas This code can't pass php validation. I was wondering if this is wrong usage of list item. — Slasher, Aug 30 '18 at 16:33
In order to submit the values to the server you would need to use a hidden ` — David Thomas, Aug 30 '18 at 16:35
@DavidThomas With checking if variable is empty. I added PHP code. — Slasher, Aug 30 '18 at 16:36

score 1 · Accepted Answer · answered Aug 31 '18 at 08:22

Use invisible input field and then on list item click get values and insert them into input field.

HTML:

<input type="hidden" name="prioriteta" value="<?php echo $prioriteta; ?>"

JQUERY:

$( document ).ready(function() {


$( "#other" ).click(function() {
  $( "#target" ).val();
});

});

Using list as select inside form

1 Answers1