Avatar billede Emma Mester
07. december 2021 - 21:42

Vælg mellem 2 små formularer på samme plads ved brug af en afkrydsningsboks

Jeg kunne godt bruge lidt hjælp til følgende, Jeg tror det kan lade sig gøre, men jeg er for urutineret til at kunne se løsningen.
Jeg har lavet et lille eksempel i 2 billeder (kan desværre ikke vise dem her. Men de er næsten identiske). Formularens programmering vises nederst.
Øverst 2 checkbokse, der styrer valget af formularen. Herunder selve formen med ganske få ændringer. Formene er også næsten identisk. (form er undladt, da det ingen betydning har, jeg har ikke fundet nogen).
Krav til løsningen:
* Formene skal være på samme plads. (kan evt. bruge samme form til begge dog med få ændringer i labelen.
* De skal vælges ud fra 2 checkbokse eller lignende (radiobokse)
* De skal lave den aritmetiske beregning
* Den skal lave beregningen ud fra en indtastning i km eller timer

Håber der er en der kan hjælpe mig.

Form 1:
<Html>
<head>
<meta charset="utf-8">

<script>
function PrisIalt(){
            var antal = document.getElementById("antal").value;
            var antal = parseFloat(antal);
            var pris = document.getElementById("pris").value;
            var pris = parseFloat(pris);
            var total = antal * pris;
            document.getElementById("total").value = Math.ceil(total);
        }
</script>
   
<style>

input.larger {
        width:25px;
        height:25px;
      }

</style> 
   
</head>
<body>
 
    <br><br>
  <input type="checkbox" class="larger" name="checkBox1" checked>
    <label>Km</label>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="larger" name="checkBox2" >
    <label>Tid</label>
   
  <br><br>
  <label for="antal">Kilom:</label>
  <input type="number" id="antal" name="antal" dir="rtl" value="">
  <label for="pris">Kr/km:</label>
  <input type="number" id="pris" name="pris" readonly="readonly" dir="rtl"
  value="3.5">
  <label for="total">Pris Ialt kr.:</label>
  <input type="number" id="total" name="total" readonly="readonly" dir="rtl" value="">

</body>
</html>

Form 2:

<html>
   
<head>
<script>
function PrisIalt(){
            var antal = document.getElementById("antal").value;
            var antal = parseFloat(antal);
            var pris = document.getElementById("pris").value;
            var pris = parseFloat(pris);
            var total = antal * pris;
            document.getElementById("total").value = Math.ceil(total);
        }
</script>

<style>
input.larger {
        width:25px;
        height:25px;
      }
</style> 
   
</head>
<body>
    <br><br>
  <input type="checkbox" class="larger" name="checkBox1" >
    <label>Km</label>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="larger" name="checkBox2" checked>
    <label>Tid</label>
   
  <br><br>
  <label for="antal">Timer:</label>
  <input type="number" id="antal" name="antal" dir="rtl" value="">
  <label for="pris">Kr/tm:</label>
  <input type="number" id="pris" name="pris" readonly="readonly" dir="rtl"
  value="3.5">
  <label for="total">Pris Ialt kr.:</label>
  <input type="number" id="total" name="total" readonly="readonly" dir="rtl" value="">
 
</body>
</html>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester





CIO
Sådan tager top-CIO Pernille Geneser livtag med 40 år gamle it-systemer i Stark Group med 10.000 medarbejdere