Avatar billede wisemind Nybegynder
05. november 2008 - 08:28 Der er 6 kommentarer og
2 løsninger

Simpel dropdown lommeregner "on the fly"

Hej Eksperter,

Jeg skal bruge en simpel lommeregner som ganger og lægger nogle værdier sammen. Det skal være værdier fra en dropdown menu.

Kunne lave det i php, men det ville kræve siden skulle gen indlæses og er ikke optimalt, så det kunne være superfedt, hvis der var en javascript haj, der hurtigt kunne bikse det sammen til at blive udregnet "on the fly"

Selve html formen er meget simpelt og ser således ud:

<form id="form1" name="form1" method="post" action="">
Værdi 1:
  <select name="1" id="1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  x 50 kr
  <p>
    <label>Værdi 2:
    <select name="2" id="2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
x 50 kr </p>
<p>
Mulig indtjening
<input type="submit" name="Udregn" id="Udregn" value="Beregn" />
</p>
  <p>Udregning<br />
  Samlet pr. dag = (sum af værdi 1+2)<br />
  Samlet pr år = (værdi 1 + 2) * 12
  </p>
  </form>


Håber der er en der fanger hvad jeg mener og hurtigt kan kode det. Så får du 200 point og kommer med i min aftensbøn :D

Mvh
Christian
Avatar billede dotnewbi Juniormester
05. november 2008 - 09:01 #1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript">

function beregn(){

var sum_1 = document.getElementById("1").value * 50
var sum_2 = document.getElementById("2").value * 50
var resultat_1 = sum_1 + sum_2;
var resultat_2 = resultat_1*12;
document.getElementById("resault").innerHTML = "Samlet pr. dag = " + resultat_1 + " Kr.<br /> Samlet pr år = " +  resultat_2 + " Kr.";
}

</script>

<form id="form1" name="form1" method="post" action="">
Værdi 1:
  <select name="1" id="1" onchange="beregn()">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  x 50 kr
  <p>
    <label>Værdi 2:
    <select name="2" id="2" onchange="beregn()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
x 50 kr </p>
<p>
Mulig indtjening
<input type="submit" name="Udregn" id="Udregn" value="Beregn" />
</p>
  <p>Udregning<br />
  <div id="resault">
  Samlet pr. dag = 50 Kr.<br />
  Samlet pr år = 50 Kr.
  </div>
    </p>
  </form>


</body>
</html>
Avatar billede dotnewbi Juniormester
05. november 2008 - 09:02 #2
håber at du kan bruge det :)
Avatar billede roenving Novice
05. november 2008 - 09:09 #3
I hvilken kontekst skal du bruge det, her er et eksempel på html4, for xhtml-form-behandlinger giver ikke mening før vi får nogle ordentlige Xforms !-)

<form id="form1" name="form1" method="post" action="">
Værdi 1:
  <select name="s1" id="s1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  x 50 kr
  <p>
    <label>Værdi 2:
    <select name="s2" id="s2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
x 50 kr </p>
<p>
Mulig indtjening
<input type="submit" name="Udregn" id="Udregn" value="Beregn" onclick="beregn(this.form);">
</p>
  <p>Udregning<br>
  Samlet pr. dag = <span id="daglig">&nbsp;</span>(sum af værdi 1+2)<br>
  Samlet pr år = <span id="aarlig">&nbsp;</span>(værdi 1 + 2) * 12
  </p>
  </form>
<script type="text/javascript">
function beregn(f){
  var r1 = (+f.s1.value + +f.s2.value) * 50;
  document.getElementById("daglig").firstChild.nodeValue = r1;
  document.getElementById("aarlig").firstChild.nodeValue = r1 * 12;
}
</script>
Avatar billede roenving Novice
05. november 2008 - 09:09 #4
Ups ...

Mulig indtjening
<input type="submit" name="Udregn" id="Udregn" value="Beregn" onclick="beregn(this.form);return false;">
Avatar billede roenving Novice
05. november 2008 - 09:18 #5
-- og så er tal ikke gyldige som første tegn i name eller id, og dine options har ikke nogen value, så det må i stedet blive:

<script type="text/javascript">
function beregn(f){
  var r1 = (+f.s1.options[f.s1.selectedIndex].text + +f.s2.options[f.s2.selectedIndex].text) * 50;
  document.getElementById("daglig").firstChild.nodeValue = r1;
  document.getElementById("aarlig").firstChild.nodeValue = r1 * 12;
}
</script>
Avatar billede wisemind Nybegynder
05. november 2008 - 09:20 #6
Her dotnewbi og roenving og mange tak for de hurtige svar.

Begge virker efter hensigten, men har besluttet mig for at bruge roenvings kode, så hvis du smider et svar.. Håber et point split til roenving: 125 og 75 til dotnewbi er fair?
Avatar billede roenving Novice
05. november 2008 - 09:34 #7
Helt i orden for mig !-)

Velbekomme '-)
Avatar billede roenving Novice
06. november 2008 - 16:34 #8
-- og tak for point ;~}
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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