Formularfeldänderung ohne submit

F

Fragenfrager

Erfahrenes Mitglied
Hallo liebes Forum,

ich suche für ein -später mal etwas komplexeren- Formular eine vernünftige Lösung.
Per SQL/PHP ziehe ich aus einer Datenbank ein Array, in dem die Felder "Bezeichnung" und "Preis" stehen.
Mit einer foreach-Schleife generiere ich für die Bezeichnung ein Select-Dropdownmenü.
Ziel ist es, nach der Auswahl aus dem Menü in einem separaten Feld den jeweiligen Preis anzuzeigen.
Zusätzlich soll in einem weiteren Feld die Anzahl eingegeben werden. Hier sollte sich der Preis dann mit anpassen.
Hier meine bisherige Struktur:
PHP: 
        <select>
  
       <?php
        while ($row = mysqli_fetch_row($belagarray))                                        
        {
         $belagid=utf8_encode($row[0]);
         $belagbezeichnung=utf8_encode($row[1]);
         $belagpreis=utf8_encode($row[2]);
         $belagpreis = str_replace(".",",", $preis);
         $belaghinweise=utf8_encode($row[3]);
         $belagallergene=utf8_encode($row[4]); 
         //$sortierung=utf8_encode($row[5]);  
         echo "\n\t\t\t\t\t\t\t\t\t<option value='$id'>".$belagbezeichnung."</option>";
        }
        echo "\n";
       ?>
        </select>        
        </td>
       <td rowspan='2'>
       <?php
        echo $belagpreis; // Laut Absprache ist der Preis für das Gesamtbrötchen beim Belag hinterlegt, nicht beim Brötchen
       ?>
       </td>
       <td rowspan='2'>
        <input type="range" name="anzahl" min="0" max="99"> 
       </td>
Ich fürchte -da ich eigentlich seit HTML4 keine Websitegeschichten mehr mache-, dass ich um Javascript nicht herumkomme, oder?
Jede Zeile Javascriptcode hilft mir :)
Oder hat HTML5 dafür irgendwelche Features?
 
Da kommst du an Javascript nicht vorbei.
Am besten mit Jquery, ist einfacher
Und wenn du deine Tabelle mit PHP sauber aufbaust, dann musst du nicht mal mit ajax auf den Server zugreifen

HTML: 
<!doctype html>
<html lang="de">
    <head>
        <meta charset="utf-8" />
        <script src="/web/tpl/static/libs/jquery-3.3.1.min.js"></script>
    </head>
    
    <script type="text/javascript">
        // Trigger beim <select>
        $(document).on('change', '.type', function(e) {
            e.preventDefault();
            const preis = $(this).children('option:selected').val();
            $(this).parent().parent().find('.preis').val(preis);
        });
        
        // Trigger bei der Anzahl
        $(document).on('change', '.anzahl', function(e) {
            e.preventDefault();
            const anzahl = $(this).val();
            const preis = $(this).parent().parent().find('.preis').val();
            $(this).parent().parent().find('.total').val(anzahl * preis);
        });
       </script>
    
    <body>
        <form action="">
            <table>
                <tr>
                    <td>
                        <select class="type">
                            <option value="17.50">Test A</option>
                            <option value="13">Test B</option>
                            <option value="7.25">Test C</option>
                        </select>
                    </td>
                    <td>
                        <input type="number" class="preis" value="0"/>
                    </td>
                    <td>    
                        <input type="number" class="anzahl" />
                    </td>
                    <td>
                        <input type="number" class="total" />
                    </td>/
                </tr>
                <tr>
                    <td>
                        <select class="type">
                            <option value="17.50">Test A</option>
                            <option value="13">Test B</option>
                            <option value="7.25">Test C</option>
                        </select>
                    </td>
                    <td>
                        <input type="number" class="preis" value="0"/>
                    </td>
                    <td>    
                        <input type="number" class="anzahl" />
                    </td>
                    <td>
                        <input type="number" class="total" />
                    </td>/
                </tr>
            </table>
        </form>
    </body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück