• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Brauche Hilfe bei HTML Formular mit ausgabe!

Frankynator91

Neues Mitglied
Hallo, ich würde gerne ein Formular erstellen dass ungefähr so aussehen soll.

Label: 0,00€

Auswahl 1: (setzt Label +5)
Auswahl 2: (setzt Label +10)
Auswahl 3: (setzt Label +20)

Also eine Dropdown box aus der es 3 Möglichkeiten gibt auszuwählen und je nach dem was ausgewählt wird soll sich der Preis ändern.

Bin für jede Hilfe dankbar!
 
Werbung:
Wie sieht denn dein bisheriger Entwurf dazu aus?

Naja, eig. hab ich noch gar keinen richtigen Entwurf, da ich ja nicht weiß ob und wie es sich umsetzten lässt

<b>Wählen Sie die länge</b>
<select name="reise" size="1">
<option>bis zu 20m.</option>
<option>bis zu 40m</option>
<option>bis zu 60m</option>
</select>
<b>Preis 0,00€</b>
 
Werbung:
Da gibt es mehrere möglichkeiten.
Ich gebe dir mal eine.
HTML:
<body>
<b>Wählen Sie die länge</b>
<select id="auswahl" name="reise" size="1">
<option>auswahl....</option>
<option>bis zu 20m.</option>
<option>bis zu 40m</option>
<option>bis zu 60m</option>
</select>
<b>Preis <span id="ausgabe">0,00</span>€</b>
  <script>
document.getElementById('auswahl').onchange=function(){
       document.getElementById('ausgabe').innerHTML=this.value;
}
  </script>
  </body>

Deine <b> Tags sollte man eigentlich vermeiden und über die Css eingeben( font-weight:bold;)
 
Das Option-Tag hat nicht ohne Grund ein Value-Attribut.

Hier ein Ansatz mit VueJS
HTML:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" />
  <title>Document</title>
</head>
<body>
<div class="container">
  <form id="calculator">
    <div class="form-group">
      <select class="form-control" v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
    </div>
    <p>Label: {{ selected.toFixed(2) }} €</p>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#calculator',
    data: {
      selected: 0,
      options: [
        { text: 'Auswahl 1', value: 5 },
        { text: 'Auswahl 2', value: 10 },
        { text: 'Auswahl 3', value: 15 }
      ]
    }
  })
</script>
</body>
</html>
 
Zurück
Oben