Avatar billede epojokke Nybegynder
24. maj 2006 - 23:54 Der er 11 kommentarer og
1 løsning

Radiobuttons skifter værdi efter status

Jeg har fundet og tilpasset et script til at beregne en pris. Det fungerer fint nok bortset fra, at opbygningen bliver kompleks, hvis jeg forsætter ud af samme spor.

Tricket er, at man kan have fire status: medlem, ikke-medlem, medlem og jubilar eller ikke-medlem og jubilar. Det fungerer fint nok i formularen, hvis man vælger "alle dage". Problemet kommer, når man skal beregne de enkelte dage, da der her også er forskellige enhedspriser efter status.

Kan ikke krejle, hvordan den skal bygges op. Den fungerende kode kommer her:

<html>
<head>
<title>Elevmøde tilmelding</title>
<style>
span.sel {
  width: 400px;
}
input.price {
  width: 80px;
  text-align: right;
  color: yellow;
  background-color: silver;
}
</style>
<script>
function reCalc(theForm){
  var total = 0;
  var fName = ["item1:txtFieldX","item2:txtFieldY","item3:txtFieldZ"];
  for(var i=0;i<fName.length;i++){
    var rBtn = theForm[fName[i].split(":")[0]];
    var vFld = theForm[fName[i].split(":")[1]];
    if(rBtn)
    for(var j=0;j<rBtn.length;j++){
      if(rBtn[j].checked==true){
        vFld.value=rBtn[j].value;
        total += rBtn[j].value*1;
      }
    }
  }
  theForm.subTotal.value=total.toFixed(2);
}
</script>
</head>
<body>
<form onClick="reCalc(this)" onKeyPress="this.onclick()">
<hr>
<span class="sel">
<input type=radio name=item1 value="400.00" onclick="document.getElementById('myArea').disabled = true;">
Alle dage medlem<br>
<input type=radio name=item1 value="500.00" onclick="document.getElementById('myArea').disabled = true;">
Alle dage ikke-medlem<br>
<input type=radio name=item1 value="300.00" onclick="document.getElementById('myArea').disabled = true;">
Alle dage jubilar medlem<br>
<input type=radio name=item1 value="360.00" onclick="document.getElementById('myArea').disabled = true;">
Alle dage jubilar ikke-medlem<br>

<hr>

<input type="radio" name="item1" value="0.00" onclick="document.getElementById('myArea').disabled = false;">

Jeg ønsker kun at deltage i følgende:
      <table border="0" valign="top" class="tekst" id="myArea" disabled>
        <tr>
          <td width="10" valign="top" class="tekst">&nbsp;&nbsp;</td>
          <td width="10" valign="middle" class="tekst">&gt;</td>
          <td width="50" valign="top" class="tekst"><input type="checkbox" name="item1" value="110"><b>Fredag</b></td>
        </tr>
        <tr>
          <td width="10" valign="top" class="tekst">&nbsp;&nbsp;</td>
          <td width="10" valign="middle" class="tekst">&gt;</td>
          <td valign="top" class="tekst"><input type="checkbox" name="item1" value="260"><b>Lørdag</b></td>
        </tr>
        <tr>
          <td valign="top" class="tekst">&nbsp;&nbsp;</td>
          <td width="10" valign="middle" class="tekst">&gt;</td>
          <td width="50" valign="top" class="tekst"><input type="checkbox" name="item1" value="110"><b>Søndag</b></td>
        </tr>
      </table>

</span>
<input type=text name=txtFieldX class="price">
<hr>
<span class="sel">
<input type=radio name=item2 value="0.00">
Jeg tager sovepose med og sover med mit hold
<br>
<input type=radio name=item2 value="150.00">
Jeg vil gerne reservere 1xværelse<br>
<input type=radio name=item2 value="100.00">
Jeg vil gerne reservere 2xværelse<br>
<input type=radio name=item2 value="75.00">
Jeg vil gerne reservere 3xværelse<br>
</span>
<input type=text name=txtFieldY class="price"><br>
Jeg ønsker at dele værelse med: <input type=text name=værelsesinfo value="skriv navn(e)">
<hr>
<span class="sel">
Subtotal:
</span>
<input type=text name=subTotal class="price" readonly>
</form>
</body>
</html>

Nogle forslag til strukturreformer?!?!?
Avatar billede psykochicken Nybegynder
25. maj 2006 - 00:25 #1
Start med valg af status.
Tildel value til de øvrige radioknapper ud fra valg af status.

/psc
Avatar billede epojokke Nybegynder
25. maj 2006 - 00:28 #2
valg af status er j med på - kan klares med radiobuttons. Men j kan sq inte lige se, hvordan jeg skife value på de enkelte knapper.... er der en genial if-sætning, jeg skal indsætte måske?
Avatar billede psykochicken Nybegynder
25. maj 2006 - 00:59 #3
1. hvor mange knapper skal der skiftes value på ?
2. betales der en bestemt %-sats af fuld pris alt efter status ?
Avatar billede epojokke Nybegynder
25. maj 2006 - 01:01 #4
1. Alle dage har 4 forks værdier, fredag 2 forsk, lørdag 4 forsk, søndag 2 forsk.
2. Nix, det er afstemte og ulogiske priser. Ikke engang den samlede rabat for alle dage er der fornuft i :-)
Avatar billede psykochicken Nybegynder
25. maj 2006 - 14:56 #5
ok - et forslag med 4 prislister:

1:
du skal du have mulighed for at vælge status:
<input type="radio" name="status" onclick="medlem();reCalc();">medlem<br>
<input type="radio" name="status" onclick="ikkemedlem();reCalc();">ikke medlem<br>
<input type="radio" name="status" onclick="jubilar();reCalc();">jubilar<br>
<input type="radio" name="status" onclick="ikkejubilar();reCalc();">jubilar - ikke medlem<br>

....og så kun én knap til at vælge "Alle dage"

2:
sæt class="minpris" på de øvrige knapper, der skal aktivere udregning ved onclick.

3:
fjern - onClick="reCalc(this)" onKeyPress="this.onclick()" - fra din <form>

4:
så kan du have et script i stil med:

<script type="text/javascript">
function medlem() {
/*
var f = document.forms[0];
f.item1[0].value="100.00";  /*Alle dage*/
f.item1[1].value="1000.00"; /*Fredag*/
f.item1[2].value="6.50";    /*Lørdag*/
..osv
}
function ikkemedlem() {
...prisliste
}
function jubilar() {
...prisliste
}
function ikkejubilar() {
...prisliste
}

function aktiver(){
  var knap = document.getElementsByTagName('input');
  for(i=0;i<knap.length;i++){
    if(knap[i].className=="minpris"){
      knap[i].onclick=function(){   
        reCalc();
      }
    }
  }
}

function reCalc(){
  var theForm = document.forms[0];
  var total = 0;
  var fName = ["item1:txtFieldX","item2:txtFieldY","item3:txtFieldZ"];
  for(var k=0;k<fName.length;k++){
    var rBtn = theForm[fName[k].split(":")[0]];
    var vFld = theForm[fName[k].split(":")[1]];
    if(rBtn) {
      for(var l=0;l<rBtn.length;l++){
        if(rBtn[l].checked==true){
          vFld.value=rBtn[l].value;
          total += rBtn[l].value*1;
          }
      }
    }
  }
  theForm.subTotal.value=total.toFixed(2);
}
window.onload=aktiver;
</script>

....og det kan sikkert laves mere elegant ;o)

/psc
Avatar billede epojokke Nybegynder
06. juni 2006 - 21:44 #6
Ikke helt dårligt forslag... Jeg får dog bare en fejl i scriptet: item1=null, så der må mangle en kobling et sted.

Scriptet har jeg (næsten) ikke pillet ved, men her er de første linier i min body:
<hr>
<span class="sel">
<input type="radio" name="status" onclick="medlem();reCalc();">medlem<br>
<input type="radio" name="status" onclick="ikkemedlem();reCalc();">ikke medlem<br>
<input type="radio" name="status" onclick="jubilar();reCalc();">jubilar<br>
<input type="radio" name="status" onclick="ikkejubilar();reCalc();">jubilar - ikke medlem<br>

<hr>
<input type=radio name="Alle dage" class="minpris">Jeg ønsker at deltage alle dage
<br>

Jeg ønsker kun at deltage følgende dage:<br>
<input type=radio name="item1" class="minpris">Fredag:<br>
<input type=radio name="item1" class="minpris">Lørdag<br>
<input type=radio name="item1" class="minpris">Søndag<br>

</span>

Og beklager i øvrigt, at der skulle gå så lang tid, men da jeg endelig kom hjem efter en hård uge, var Eksperten gået ned :-(
Avatar billede psykochicken Nybegynder
07. juni 2006 - 10:49 #7
prøv at vise hele din kode.

/psc
Avatar billede epojokke Nybegynder
07. juni 2006 - 15:55 #8
ok, den kommer her. Har pillet en smule i dit script:

<html>
<head>
<title>Elevmøde tilmelding</title>
<style>
span.sel {
  width: 400px;
}
input.price {
  width: 80px;
  text-align: right;
  color: yellow;
  background-color: silver;
}
</style>
<script type="text/javascript">

function medlem() {
var f = document.forms[0];
f.item1[0].value="400.00"; /*Alle dage*/
f.item1[1].value="110.00"; /*Fredag*/
f.item1[2].value="260.00"; /*Lørdag*/
f.item1[3].value="110.00"; /*Søndag*/
}
function ikkemedlem() {
var g = document.forms[0];
g.item1[0].value="4200.00"; /*Alle dage*/
g.item1[1].value="1.00"; /*Fredag*/
g.item1[2].value="2620.00"; /*Lørdag*/
g.item1[3].value="1102.00"; /*Søndag*/

}
function jubilar() {
var h = document.forms[0];
h.item1[0].value="400.00"; /*Alle dage*/
h.item1[1].value="110.00"; /*Fredag*/
h.item1[2].value="20.00"; /*Lørdag*/
h.item1[3].value="110.00"; /*Søndag*/

}
function ikkejubilar() {
var i = document.forms[0];
i.item1[0].value="400.00"; /*Alle dage*/
i.item1[1].value="110.00"; /*Fredag*/
i.item1[2].value="260.00"; /*Lørdag*/
i.item1[3].value="110.00"; /*Søndag*/

}

function aktiver(){
  var knap = document.getElementsByTagName('input');
  for(i=0;i<knap.length;i++){
    if(knap[i].className=="minpris"){
      knap[i].onclick=function(){ 
        reCalc();
      }
    }
  }
}

function reCalc(){
  var theForm = document.forms[0];
  var total = 0;
  var fName = ["item1:txtFieldX","item2:txtFieldY"];
  for(var k=0;k<fName.length;k++){
    var rBtn = theForm[fName[k].split(":")[0]];
    var vFld = theForm[fName[k].split(":")[1]];
    if(rBtn) {
      for(var l=0;l<rBtn.length;l++){
        if(rBtn[l].checked==true){
          vFld.value=rBtn[l].value;
          total += rBtn[l].value*1;
          }
      }
    }
  }
  theForm.subTotal.value=total.toFixed(2);
}
window.onload=aktiver();

</script>
</head>
<body>

<hr>

<input type="radio" name="status" onclick="medlem();reCalc();">medlem<br>
<input type="radio" name="status" onclick="ikkemedlem();reCalc();">ikke medlem<br>
<input type="radio" name="status" onclick="jubilar();reCalc();">jubilar<br>
<input type="radio" name="status" onclick="ikkejubilar();reCalc();">jubilar - ikke medlem<br>

<hr>
<input type="radio" name="item1" class="minpris">Jeg ønsker at deltage alle dage
<br>

Jeg ønsker kun at deltage følgende dage:<br>
<input type="radio" name="item1" class="minpris" onclick="aktiver()">Fredag:<br>
<input type="radio" name="item1" class="minpris">Lørdag<br>
<input type="radio" name="item1" class="minpris">Søndag<br>


<input type=text name=txtFieldX class="price">
<hr>
<span class="sel">
<input type=radio name=item2 value="0.00">
Jeg tager sovepose med og sover med mit hold
<br>
<input type=radio name=item2 value="150.00">
Jeg vil gerne reservere 1xværelse<br>
<input type=radio name=item2 value="100.00">
Jeg vil gerne reservere 2xværelse<br>
<input type=radio name=item2 value="75.00">
Jeg vil gerne reservere 3xværelse<br>
</span>
<input type=text name=txtFieldY class="price"><br>
Jeg ønsker at dele værelse med: <input type=text name=værelsesinfo value="skriv navn(e)">
<hr>
<span class="sel">
Subtotal:
</span>
<input type=text name=subTotal class="price" readonly>
</form>
</body>
</html>
Avatar billede psykochicken Nybegynder
07. juni 2006 - 16:52 #9
oh...du manglede et <form>-tag, så kan regnemaskinen ikke finde felterne,
og havde ikke givet item2 en class="minpris", så regnes der ikke på onclick.

prøv med denne her:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Elevmøde tilmelding</title>
<style>
span.sel {
  width: 400px;
}
input.price {
  position:relative;
  left:390px;
  width: 80px;
  text-align: right;
  color: yellow;
  background-color: silver;
}
</style>
<script type="text/javascript">

function medlem() {
var f = document.forms[0];
f.item1[0].value="400.00"; /*Alle dage*/
f.item1[1].value="110.00"; /*Fredag*/
f.item1[2].value="260.00"; /*Lørdag*/
f.item1[3].value="110.00"; /*Søndag*/
}
function ikkemedlem() {
var g = document.forms[0];
g.item1[0].value="4200.00"; /*Alle dage*/
g.item1[1].value="1.00"; /*Fredag*/
g.item1[2].value="2620.00"; /*Lørdag*/
g.item1[3].value="1102.00"; /*Søndag*/

}
function jubilar() {
var h = document.forms[0];
h.item1[0].value="400.00"; /*Alle dage*/
h.item1[1].value="110.00"; /*Fredag*/
h.item1[2].value="20.00"; /*Lørdag*/
h.item1[3].value="110.00"; /*Søndag*/

}
function ikkejubilar() {
var i = document.forms[0];
i.item1[0].value="400.00"; /*Alle dage*/
i.item1[1].value="110.00"; /*Fredag*/
i.item1[2].value="260.00"; /*Lørdag*/
i.item1[3].value="110.00"; /*Søndag*/

}

function aktiver(){
  var knap = document.getElementsByTagName('input');
  for(i=0;i<knap.length;i++){
    if(knap[i].className=="minpris"){
      knap[i].onclick=function(){ 
        reCalc();
      }
    }
  }
}

function reCalc(){
  var theForm = document.forms[0];
  var total = 0;
  var fName = ["item1:txtFieldX","item2:txtFieldY"];
  for(var k=0;k<fName.length;k++){
    var rBtn = theForm[fName[k].split(":")[0]];
    var vFld = theForm[fName[k].split(":")[1]];
    if(rBtn) {
      for(var l=0;l<rBtn.length;l++){
        if(rBtn[l].checked==true){
          vFld.value=rBtn[l].value;
          total += rBtn[l].value*1;
          }
      }
    }
  }
  theForm.subTotal.value=total.toFixed(2);
}
window.onload=aktiver;

</script>
</head>
<body>
<span class="sel">
<form>
<hr>

<input type="radio" name="status" onclick="medlem();reCalc();">medlem<br>
<input type="radio" name="status" onclick="ikkemedlem();reCalc();">ikke medlem<br>
<input type="radio" name="status" onclick="jubilar();reCalc();">jubilar<br>
<input type="radio" name="status" onclick="ikkejubilar();reCalc();">jubilar - ikke medlem<br>

<hr>
<input type="radio" name="item1" class="minpris">Jeg ønsker at deltage alle dage
<br>

Jeg ønsker kun at deltage følgende dage:<br>
<input type="radio" name="item1" class="minpris">Fredag:<br>
<input type="radio" name="item1" class="minpris">Lørdag<br>
<input type="radio" name="item1" class="minpris">Søndag<br>


<input type=text name=txtFieldX class="price" size="20">
<hr>
<input type=radio name=item2 class="minpris" value="0.00">
Jeg tager sovepose med og sover med mit hold
<br>
<input type=radio name=item2 class="minpris" value="150.00">Jeg vil gerne reservere 1xværelse<br>
<input type=radio name=item2 class="minpris" value="100.00">Jeg vil gerne reservere 2xværelse<br>
<input type=radio name=item2 class="minpris" value="75.00">Jeg vil gerne reservere 3xværelse<br>
<p>
<input type=text name=txtFieldY class="price" size="20"><br>
Jeg ønsker at dele værelse med:
<input type=text name=værelsesinfo value="skriv navn(e)" size="20"> </p>
<hr>
<span style="position:absolute;z-index:-1;">Subtotal:</span>
<input type=text name=subTotal class="price" readonly size="20">
</form>
</span>
</body>
</html>

/psc
Avatar billede epojokke Nybegynder
07. juni 2006 - 17:44 #10
Jessir! Seføli sådan en banalitet, som jeg efterhånden har stirret mig helt blind på. Det ser ud til at virke nu. Skal lige ha' ændret lidt, så man kan vælge flere enkelte dage, men jeg tror den er der.

Du fortjener en fri tilmelding til elevmødet :-) Drop et svar, så har du points!
Avatar billede psykochicken Nybegynder
07. juni 2006 - 17:53 #11
takker - svar kommer her ;o)
Avatar billede psykochicken Nybegynder
07. juni 2006 - 18:20 #12
...og tak for point ;o)
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