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

Brauche Hilfe bei HTML Formular mit ausgabe!

F

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!
 
threadi schrieb:
Wie sieht denn dein bisheriger Entwurf dazu aus?
Zum Vergrößern anklicken....

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>
 
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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben