Input type"list". How do I create one options list for two different inputs?

Baby_Bean · October 19, 2016, 3:11pm

For user’s assignment of bottom limit to top limit I created two input boxes based on the same “counter list” derived
from a “MySql” table.

<?php // first_form.php
require_once 'myInitial.php';
require_once 'myLogin.php';
MYSQLI_SET_CHARSET($myConnection,'UTF8');
echo <<<_END
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>form-input_list_select</title>
       <style>
        .extraction
        {
            border-radius:10px;
            box-shadow:0 0 3px #AAA;
            -webkit-box-shadow: inset 3px 3px 0px 0px #808080;
           -moz-box-shadow:    inset 3px 3px 6px 0px #808080;
           box-shadow:  inset 3px 3px 6px 0px #808080;
           direction:rtl;
           max-width:80%;
           height:20%;
           background:#ffffff;
           margin:10px auto;padding:10px;
           overflow:auto;
     }
     </style>
  </head>
<body>
<table>
  <td>
    <form method = "post" action = "first_form.php">
      <input type="list" class = "extraction"
         required aria-required="true" placeholder="from"/>
_END;
        $myQue = "select counter from hourshifts";
        $myResult = $myConnection->query($myQue);
        if (!$myResult) die ("Database access failed: " . $myConnection->error);
        $numOfRows = $myResult->num_rows;
        echo "<select name='counters'>";
        for ($j = 0 ; $j < $numOfRows ; $j++)
        {
          $myResult->data_seek($j);
         $row=$myResult->fetch_array(MYSQLI_ASSOC);
        echo  "<option>{$row['counter']}</option>";
       }
echo <<<_END
    <input type="list" class = "extraction"
          required aria-required="true" placeholder="to"/>
_END;
         $myQue = "select counter from hourshifts";
         $myResult = $myConnection->query($myQue);
         if (!$myResult) die ("Database access failed: " . $myConnection->error);
         $numOfRows = $myResult->num_rows;
         echo "<select name='counters'>";
         for ($j = 0 ; $j < $numOfRows ; $j++)
         {
            $myResult->data_seek($j);
            $row=$myResult->fetch_array(MYSQLI_ASSOC);
            echo  "<option>{$row['counter']}</option>";
         }
        echo <<<_END
    </form>
  </td>
</table>
_END;
?>

The same option list is created twice !
Is there a way to create same option list for two different input boxes in a function or an array ?
Another question is the CSS. The list and selected value are positioned outside the box ! I know this is not a CSS forum and if
I dont get the answer I’ll address it to the CSS forum.
Thanks !

Strider64 · October 19, 2016, 5:11pm

I personally can’t stand heredoc notation, for it gives me a headache. :-\ ;D

Instead of this:
[php] <?php // first_form.php
require_once ‘myInitial.php’;
require_once ‘myLogin.php’;
MYSQLI_SET_CHARSET($myConnection,‘UTF8’);
echo <<<_END[/php]
I do this:
[php] <?php // first_form.php
require_once ‘myInitial.php’;
require_once ‘myLogin.php’;
MYSQLI_SET_CHARSET($myConnection,‘UTF8’);
?>[/php]
then have my HTML.

I would also try to keep majority of my PHP at the top of the page as much as possible, but there are times where PHP has to mingle with the HTML. Myself I still would use <?php ?> instead of Heredoc Notation. I would even use the include before heredoc notation…LOL Laughing aside as you get better with php the include statement is helpful when you have a bunch of repetitive HTML that is used over and over. It saves a lot of typing…header (including the top portion of the HTML) and footer are the two most commonly used places where the include statement is used.

As for you CSS problem, this is what I do. I create a mockup of my HTML/CSS should look like using actual HTML tags and CSS using fake values when needed. Then I simply delete the fake values by putting the PHP code that generates the actual output. I find that much simpler and 99.9 percent of the time it works like a charm. I know it sounds like extra work, but really it isn’t. Especially the time it saves for most of the time the php output code works like a charm.

Baby_Bean · October 19, 2016, 5:41pm

Thanks a lot !

JimL · October 19, 2016, 5:55pm

Regarding the CSS problems, if you still struggle please copy the output HTML and add it to an online fiddle service (plnkr, jsfiddle, codepen, etc)

It’s much easier to help when able to visually see what’s going on and use the browser dev tools to inspect the page and see why the output is the way it is. While you can usually get quite spesific when asking programming questions, design and layout issues are usually more problematic as inheritance rules etc in css can mess quite a lot with you and “compiling” the code and css in our heads by just reading a forum post is close to impossible ^^

JimL · October 19, 2016, 6:09pm

Regarding the select boxes. You can just fetch the data from the database and add it to an array and then loop over that in the code where you want the select boxes.

Tables should never be used as layout, only for displaying actual table data.

General tips, consider structure and naming. A good book to recommend to all new programmers is “Clean Code”, it should be available pretty much everywhere (libraries, online, etc)

Strider said this but I’m also strongly against echoing HTML, and much prefer exiting PHP and writing HTML as HTML. It even helps devs as the editors (and online highlighters) then color the code correctly, show markup errors, etc

[hr]

maybe this could be renamed to assignment_step1.php? or assignment/step1.php, or new_assignment.php?step=1, etc
[php]<?php // first_form.php[/php]

common.php?
[php] require_once ‘myInitial.php’;[/php]

db.php? login_form.php? forms/login.php, etc
[php] require_once ‘myLogin.php’;[/php]

Should be in one of the files above depending on where your db connection is
[php] MYSQLI_SET_CHARSET($myConnection,‘UTF8’);[/php]

This can be changed to a reference to style.css, or styles/step1.css, etc
[php]
.extraction
{
border-radius:10px;
box-shadow:0 0 3px #AAA;
-webkit-box-shadow: inset 3px 3px 0px 0px #808080;
-moz-box-shadow: inset 3px 3px 6px 0px #808080;
box-shadow: inset 3px 3px 6px 0px #808080;
direction:rtl;
max-width:80%;
height:20%;
background:#ffffff;
margin:10px auto;padding:10px;
overflow:auto;
}
[/php]

this could be moved into header.php, partials/header.php, etc
[php]

form-input_list_select

.extraction
{
border-radius:10px;
box-shadow:0 0 3px #AAA;
-webkit-box-shadow: inset 3px 3px 0px 0px #808080;
-moz-box-shadow: inset 3px 3px 6px 0px #808080;
box-shadow: inset 3px 3px 6px 0px #808080;
direction:rtl;
max-width:80%;
height:20%;
background:#ffffff;
margin:10px auto;padding:10px;
overflow:auto;
}

[/php]

etc…

JimL · October 19, 2016, 6:21pm

You don’t seem to close the select boxes

[php] echo “”;
for ($j = 0 ; $j < $numOfRows ; $j++)
{
$myResult->data_seek($j);
$row=$myResult->fetch_array(MYSQLI_ASSOC);
echo “{$row[‘counter’]}”;
}
echo <<<_END
[/php]

[php]

Some text> [/php]

You also use the same name for both select boxes, which makes no sense if they submit in the same form

JimL · October 19, 2016, 6:26pm

An example of how this can be restructured, note the code is not tested and the code isn’t perfect. But I hope most will agree it’s a lot more readable and easy to work with.

[php]// partials/header.php

form-input_list_select [/php]

[php]// partials/footer.php

</body>

[/php]

[php]// styles.css

.extraction
{
border-radius:10px;
box-shadow:0 0 3px #AAA;
-webkit-box-shadow: inset 3px 3px 0px 0px #808080;
-moz-box-shadow: inset 3px 3px 6px 0px #808080;
box-shadow: inset 3px 3px 6px 0px #808080;
direction:rtl;
max-width:80%;
height:20%;
background:#ffffff;
margin:10px auto;padding:10px;
overflow:auto;
}[/php]

[php]// assignment/step1.php

<?php require_once 'common.php'; require_once 'db.php'; $result = $db->query('SELECT counter FROM hourshifts'); if (!$result) { // should probably add proper error handling die("Database access failed: " . $db->error); } $counters = $result->fetch_all(); require_once 'partials/header.php'; ?>

<?php foreach ($counters as $counter): ?> <?= $row['counter'] ?> <?php endforeach; ?> <?php foreach ($counters as $counter): ?> <?= $row['counter'] ?> <?php endforeach; ?>

<?php require_once 'partials/footer.php';[/php] note: empty action in form defaults to submit the form to the same page.

Baby_Bean · October 19, 2016, 6:57pm

Thank you so much JimL !
What you and strider64 shared is extremely important but I need time to adopt those ideas so by now I’ll just deliver my gratitude . I’ll delve into it the coming days.
I’m also grateful for the links you shared where I can better display and asses code !