• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 431
  • Last Modified:

Why don't my JavaScript getElementById:s work now with span id?

Why don't my JavaScript getElementById:s work now with span id?

It worked before with one field (and I haven't changed the basic structure): "Namn"-field on the popup-specification was alright, the getElementById selected from "fnamn" and "enamn" fields from the form and put them in the "Namn"-field on the popup-specification.

But now, after I've added a lot of new getElementById:s in the body-section and also a CSS-declaration in the head-section, not one of the fields get filled in by the getElementById-function (not even the "Namn"-field). Why? I tried to change span id back to div id for "Namn"-field, but it still didn't work.

I've enclosed my form and my popup-specification.
4-Bokning.html
specifikation.html
0
hermesalpha
Asked:
hermesalpha
  • 48
  • 47
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
<form name="formular" type="text/javascript">

remove that.
0
 
Michel PlungjanIT ExpertCommented:
There are MANY issues
For example with inline calculations before the form exists.
Needless assignements such as
                var netto = brutto
                 function NettoTotalpris()
                 {
                 var netto = brutto
                 if (antVuxna>2 == true)
                 netto = brutto * 0.90
                 else netto = brutto
                 return netto
                 document.formular.totalpriset.value = netto; // NEVER reached!
                 }


0
 
Michel PlungjanIT ExpertCommented:
This is not correct syntax

if (document.formular.destinationsort.selectedIndex[0] == true)

I think you mean

if (document.formular.destinationsort.selectedIndex==0)
 
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Michel PlungjanIT ExpertCommented:
This is not necessary syntax
if (document.formular.hemkomstvecka.value > document.formular.avresevecka.value == true)

instead use

if (document.formular.hemkomstvecka.value > document.formular.avresevecka.value)

HOWEVER

since your weeks are strings, week 2 is greater than week 10 so instead do

function Veckor() {
  var hemkomstvecka = parseInt(document.formular.hemkomstvecka.value,10)
  var avresevecka = parseInt(document.formular.avresevecka.value,10);
  var antVeckor = 0;
  if (hemkomstvecka > avresevecka) antVeckor = hemkomstvecka - avresevecka;
  else if (hemkomstvecka < avresevecka)antVeckor = 52 - avresevecka + hemkomstvecka;
  else if (hemkomstvecka === avresevecka)alert('Du har inte valt rätt veckor!')
  return antVeckor		 
}

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
This is not possible at load time

var brutto = Destination() + Maltider() + Stadning() + Betalsatt()
				 function BruttoTotalpris()
				 {
				 var brutto = Destination() + Maltider() + Stadning() + Betalsatt()
				 return brutto
				 }
         
				 var netto = brutto
				 function NettoTotalpris()
				 {
				 var netto = brutto 
				 if (antVuxna>2 == true) 
				 netto = brutto * 0.90
				 else netto = brutto
				 return netto
				 document.formular.totalpriset.value = netto
				 }


instead you probably want to do 

<input type="button" value="Beräkna totalpris" onClick="this.form.totalpriset.value = NettoTotalpris()" />

and have 

				 function BruttoTotalpris()
				 {
				  return Destination() + Maltider() + Stadning() + Betalsatt();
				 }
         
				 function NettoTotalpris()
				 {
				 var netto = BruttoTotalpris() 
				 if (antVuxna>2) netto *= 0.90
				 return netto.toFixed(2);
				 }

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Here is the completed form
Please note the onClick and onChange and onload I have added
I also added a meta content type

<!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>Beställning</title>
<script language="JavaScript" type="text/javascript">
<!--
         function Destination()
         {
         var prisDestination = 0
              if (document.formular.destinationsort.selectedIndex == 0) prisDestination = 13400 * Veckor() * Medresenarer()
         else if (document.formular.destinationsort.selectedIndex == 1) prisDestination = 12900 * Veckor() * Medresenarer()     
         else if (document.formular.destinationsort.selectedIndex == 2) prisDestination = 11500 * Veckor() * Medresenarer()     
         return prisDestination
         }
         
         function Veckor() {
           var antVeckor = 0;
           var hemkomstvecka = parseInt(document.formular.hemkomstvecka.value,10)
           var avresevecka = parseInt(document.formular.avresevecka.value,10);
           if (hemkomstvecka > avresevecka) antVeckor = hemkomstvecka - avresevecka;
           else if (hemkomstvecka < avresevecka)antVeckor = 52 - avresevecka + hemkomstvecka;
           else if (hemkomstvecka === avresevecka)alert('Du har inte valt rätt veckor!')
           return antVeckor     
         }
         
         
         function Maltider()
         {
         var prisMaltider = 0;
         if (document.formular.maltider[0].checked) prisMaltider = 500
         else if (document.formular.maltider[1].checked) prisMaltider == 300
         else if (document.formular.maltider[2].checked) prisMaltider = 200
         return prisMaltider
         }
         
         var prisStadning = 0
         function Stadning()
         {
         if (document.formular.stadning[0].checked) prisStadning = 250
         else if (document.formular.stadning[1].checked) prisStadning = 350
         else if (document.formular.stadning[0].checked && document.formular.stadning[1].checked) prisStadning = 250 + 350
         return prisStadning
         }
         
         
         function Medresenarer()
         {
         var antMedresenarer = 0;
         if (document.formular.medresenar1.selectedIndex == 0) antMedresenarer ++;
         if (document.formular.medresenar1.selectedIndex == 1) antMedresenarer += 0.5;
         if (document.formular.medresenar2.selectedIndex == 0) antMedresenarer ++;
         if (document.formular.medresenar2.selectedIndex == 1) antMedresenarer += 0.5;
         if (document.formular.medresenar3.selectedIndex == 0) antMedresenarer ++;
         if (document.formular.medresenar3.selectedIndex == 1) antMedresenarer += 0.5;
         if (document.formular.medresenar4.selectedIndex == 0) antMedresenarer ++;
         if (document.formular.medresenar4.selectedIndex == 1) antMedresenarer += 0.5;
         return antMedresenarer
         }
         
         function Mangdrabatt()
         {
         var antVuxna = 1
         if (document.formular.medresenar1.selectedIndex == 0) antVuxna ++;
         if (document.formular.medresenar2.selectedIndex == 0) antVuxna ++;
         if (document.formular.medresenar3.selectedIndex == 0) antVuxna ++;
         if (document.formular.medresenar4.selectedIndex == 0) antVuxna ++;
         return antVuxna > 2; // returns true if 3 or more adults
         }                  
         
         function Betalsatt()
         {
         var prisBetalsatt = 0
         if (document.formular.betalsatt[2].checked) prisBetalsatt = 45
         return prisBetalsatt
         }
         
         function BruttoTotalpris()
         {
          return Destination() + Maltider() + Stadning() + Betalsatt();
         }
         
         function NettoTotalpris()
         {
         var netto = BruttoTotalpris() 
         if (Mangdrabatt()) netto *= 0.90
         return netto
         }
         
         function calculate(theForm) {
           theForm.totalpriset.value = NettoTotalpris().toFixed(0);
         }
         function Specifikation()
         {
         main=window.open('specifikation.html');
         }
         window.onload=function() {
          calculate(document.formular)"
         }
//-->         
</script>
</head>

<body><h2 align="center">Beställning av resa</h2>
  <form name="formular">
    
      
      <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Personliga uppgifter</b><p />

      <table>
      <tr><td valign="top">
      
      <!-- Text boxes --> 
      <label for="fnamn">Förnamn:&nbsp;&nbsp</label>
      <input type="text" name="fnamn" id="fnamn" size="17" maxlength="22" /><br />
      <label for="enamn">Efternamn:</label>
      <input type="text" name="enamn" id="enamn" size="17" maxlength="22" />
    
      
      <!-- Text area -->

      <p><label for="adress">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Adress:</label><br />
      <textarea name="adress" id="adress" cols="22" rows="3">
        </textarea>
      </p>
      
      <!-- Radio buttons -->
      <p><label for="betalsatt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Betalsätt:</label><br />
         <input type="radio" name="betalsatt" id="betalsatt" value="Kort" checked />Kort
         <input type="radio" name="betalsatt" id="betalsatt" value="Kontant" />Kontant
         <input type="radio" name="betalsatt" id="betalsatt" value="Faktura" />Faktura<br />

         </p>
         <p>
      <!-- Button -->
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="button" value="Beräkna totalpris" onClick="calculate(this.form)" /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="text" name="totalpriset" id="totalpriset" size="6" />&nbsp;kr   
      </p></td>
      <td valign="top">
      
      <!-- Text boxes --> 
      <label for="telefon">Telefon: </label>

      <input type="text" name="telefon" id="telefon" size="20" /><br />
      <label for="epost">E-post:&nbsp;</label>
      <input type="text" name="epost" id="epost" size="20" />
      
      
      <!-- Select lists and text areas -->
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Medresenärer<br />
      Nr.&nbsp;&nbsp;&nbsp;Vuxen/barn:&nbsp;&nbsp;Förnamn:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Efternamn:<br />

      1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar1" id="medresenar1" onChange="calculate(this.form)">
              <option>Vuxen</option>
              <option>Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar1Fornamn" id="medresenar1Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar1Efternamn" id="medresenar1Efternamn" size="17" maxlength="22" /><br />

      2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar2" id="medresenar2" onChange="calculate(this.form)">
              <option>Vuxen</option>
              <option>Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar2Fornamn" id="medresenar2Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar2Efternamn" id="medresenar2Efternamn" size="17" maxlength="22" /><br />

      3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar3" id="medresenar3" onChange="calculate(this.form)">
              <option>Vuxen</option>
              <option>Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar3Fornamn" id="medresenar3Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar3Efternamn" id="medresenar3Efternamn" size="17" maxlength="22" /><br />

      4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar4" id="medresenar4" onChange="calculate(this.form)">
              <option>Vuxen</option>
              <option>Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar4Fornamn" id="medresenar4Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar4Efternamn" id="medresenar4Efternamn" size="17" maxlength="22" /><br /></p>

      <p>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Övrigt: önskemål, kommentarer, frågor mm<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        
        <!-- Textarea -->
        <textarea name="ovrigt" id="ovrigt" cols="40" rows="5">
    </textarea><br />
    
    <!-- Buttons -->
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input type="button" value="Skicka data" onClick="Specifikation()" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="reset" value="Rensa data" />
      </p>
      
      <td>
      <!-- Eight select lists -->
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Rese- och hotelluppgifter</b><br />  
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Avresa från:&nbsp;&nbsp;&nbsp;&nbsp;Destination:&nbsp;&nbsp;&nbsp;&nbsp;<br />

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="avreseort" id="avreseort" onChange="calculate(this.form)">
              <option>Stockholm</option>
              <option>Göteborg</option>
              <option>Malmö</option>
      </select>
      <select size="1" name="destinationsort" id="destinationsort" onChange="calculate(this.form)">

               <option>Peking</option>
               <option>Shanghai</option>
               <option>Hongkong</option>
      </select><br><br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Avresa vecka:&nbsp;Hemkomst vecka:<br>

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="avresevecka" id="avresevecka" style="width:90px" onChange="calculate(this.form)">
              <option>1</option>
              <option>2</option>  
              <option>3</option>
              <option>4</option>
              <option>5</option>

              <option>6</option>
              <option>7</option>
              <option>8</option>
              <option>9</option>
              <option>10</option>
              <option>11</option>

              <option>12</option>
              <option>13</option>
              <option>14</option>
              <option>15</option>
              <option>16</option>
              <option>17</option>

              <option>18</option>
              <option>19</option>
              <option>20</option>
              <option>21</option>
              <option>22</option>
              <option>23</option>

              <option>24</option>
              <option>25</option>
              <option>26</option>
              <option>27</option>
              <option>28</option>
              <option>29</option>

              <option>30</option>
              <option>31</option>
              <option>32</option>
              <option>33</option>
              <option>34</option>
              <option>35</option>

              <option>36</option>
              <option>37</option>
              <option>38</option>
              <option>39</option>
              <option>40</option>
              <option>41</option>

              <option>42</option>
              <option>43</option>
              <option>44</option>
              <option>45</option>
              <option>46</option>
              <option>47</option>

              <option>48</option>
              <option>49</option>
              <option>50</option>
              <option>51</option>
              <option>52</option>
        </select>

        <select size="1" name="hemkomstvecka" id="hemkomstvecka" style="width:90px" onChange="calculate(this.form)">
              <option>1</option>
              <option>2</option>  
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>

              <option>7</option>
              <option>8</option>
              <option>9</option>
              <option>10</option>
              <option>11</option>
              <option>12</option>

              <option>13</option>
              <option>14</option>
              <option>15</option>
              <option>16</option>
              <option>17</option>
              <option>18</option>

              <option>19</option>
              <option>20</option>
              <option>21</option>
              <option>22</option>
              <option>23</option>
              <option>24</option>

              <option>25</option>
              <option>26</option>
              <option>27</option>
              <option>28</option>
              <option>29</option>
              <option>30</option>

              <option>31</option>
              <option>32</option>
              <option>33</option>
              <option>34</option>
              <option>35</option>
              <option>36</option>

              <option>37</option>
              <option>38</option>
              <option>39</option>
              <option>40</option>
              <option>41</option>
              <option>42</option>

              <option>43</option>
              <option>44</option>
              <option>45</option>
              <option>46</option>
              <option>47</option>
              <option>48</option>

              <option>49</option>
              <option>50</option>
              <option>51</option>
              <option>52</option>
        </select>
        <br /><br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input onclick="calculate(this.form)" type="radio" name="maltider" id="maltider" value="Helpension" checked />Helpension<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="radio" name="maltider" id="maltider" value="Halvpension" />Halvpension<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="radio" name="maltider" id="maltider" value="Frukost" />Endast frukost<p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        Städning:<br />

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="checkbox" name="stadning" id="stadning" value="Morgon" checked />Morgon<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="checkbox" name="stadning" id="stadning" value="Kväll" />Kväll
    </p>    
    </td>
    
    <td>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <img src="images/Changcheng.jpg" alt="Great Wall of China" width="300px" height="300px">

    </td>
    </tr>
    </table>
  </form>    
</body>
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Here is the popup window

You did not close the span tags and you forgot the opener in the [..selectedIndex].
I simplified that by declaring doc=window.opener.document
I also added meta content type here and changed the <--! to <!-- in the comments
and fixed the homecoming week

<!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>Specifikation</title>
<style type="text/css">
<!-- /* <![CDATA[ */ 
body {background: #ffff33; color: #000000; font-family: sans-serif; font-size: 10pt;}
  h2 {font-family: sans-serif; font-weight: 800; text-align: left;}
  h3 {font-family: sans-serif; font-weight: 800; text-align: left;}
  #Specifikation {position: absolute;
                  top: 5px;
                  left: 120px;} 
  #Bestallare {position: relative;
               width: 50px;
               top: 50px}
  #Medresenarer {position: absolute;
                 width: 50px;
                 top: 50px;
                 left: 300px;}
  #Resahotell {position: relative;}
  #Ovrigt {position: relative ;
           column-span: 40;
           row-span: 5;}
  #Betalning {position: relative;}
  .emphasized {font: bold;}
/* ]]> */ -->
</style>
</head>
<body>

<div id="Specifikation">
<h2>Specifikation</h2>
</div>

<div id="Bestallare">
<h3>Beställare:</h3>                            
<span id="Namn"></span><br />
<span id="Specadress"></span><br />
<span id="Spectelefon"></span><br />
<span id="Specepost"></span>
</div>

<div id="Medresenarer">
<h3>Medresenärer:</h3>
<span id="Specmedresenar1">&nbsp;</span><span id="Specmedresenar1FornamnEfternamn"></span><br />
<span id="Specmedresenar2">&nbsp;</span><span id="Specmedresenar2FornamnEfternamn"></span><br />
<span id="Specmedresenar3">&nbsp;</span><span id="Specmedresenar3FornamnEfternamn"></span><br />
<span id="Specmedresenar4">&nbsp;</span><span id="Specmedresenar4FornamnEfternamn"></span>
</div>

<div id="Resahotell">
<h3>Rese- och hotelluppgifter:</h3>
<span class="emphasized">Avresa från:</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specavreseort"></span><br />
<span class="emphasized">Avresevecka:</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specavresevecka"></span><br />
<span class="emphasized">Destination:</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specdestinationsort"></span><br />
<span class="emphasized">Hemkomstvecka:</span>&nbsp;<span id="Spechemkomstvecka"></span><br />
<span class="emphasized">Måltider:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specmaltider"></span><br />
<span class="emphasized">Städning:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specstadning"></span>
</div>

<div id="Ovrigt">
<h3>Övrigt: önskemål, kommentarer, frågor mm</h3> 
<span id="Specovrigt"></span>
</div>

<div id="Betalning">
<h3>Betalning:</h3>
<span class="emphasized">Totalpris att betala:</span>&nbsp;<span id="Spectotalpriset"></span><br />
<span class="emphasized">Betalas med:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specbetalsatt"></span>
</div>

<script>
<!--Bestallare -->
var doc = window.opener.document;
document.getElementById("Namn").innerHTML=doc.getElementById("fnamn").value + "&nbsp;" + doc.getElementById("enamn").value;
document.getElementById("Specadress").innerHTML=doc.getElementById("adress").value;
document.getElementById("Spectelefon").innerHTML=doc.getElementById("telefon").value;
document.getElementById("Specepost").innerHTML=doc.getElementById("epost").value;

<!--Medresenarer -->
document.getElementById("Specmedresenar1").innerHTML=doc.getElementById("medresenar1").options[doc.getElementById("medresenar1").selectedIndex].value;
document.getElementById("Specmedresenar1FornamnEfternamn").innerHTML=doc.getElementById("medresenar1Fornamn").value + "&nbsp;" + doc.getElementById("medresenar1Efternamn").value;
document.getElementById("Specmedresenar2").innerHTML=doc.getElementById("medresenar2").options[doc.getElementById("medresenar2").selectedIndex].value;
document.getElementById("Specmedresenar2FornamnEfternamn").innerHTML=doc.getElementById("medresenar2Fornamn").value + "&nbsp;" + doc.getElementById("medresenar2Efternamn").value;
document.getElementById("Specmedresenar3").innerHTML=doc.getElementById("medresenar3").options[doc.getElementById("medresenar3").selectedIndex].value;
document.getElementById("Specmedresenar3FornamnEfternamn").innerHTML=doc.getElementById("medresenar3Fornamn").value + "&nbsp;" + doc.getElementById("medresenar3Efternamn").value;
document.getElementById("Specmedresenar4").innerHTML=doc.getElementById("medresenar4").options[doc.getElementById("medresenar4").selectedIndex].value;
document.getElementById("Specmedresenar4FornamnEfternamn").innerHTML=doc.getElementById("medresenar4Fornamn").value + "&nbsp;" + doc.getElementById("medresenar4Efternamn").value;

<!--Resahotell -->
document.getElementById("Specavreseort").innerHTML=doc.getElementById("avreseort").options[doc.getElementById("avreseort").selectedIndex].value;
document.getElementById("Specavresevecka").innerHTML=doc.getElementById("avresevecka").options[doc.getElementById("avresevecka").selectedIndex].value;
document.getElementById("Specdestinationsort").innerHTML=doc.getElementById("destinationsort").options[doc.getElementById("destinationsort").selectedIndex].value;
document.getElementById("Spechemkomstvecka").innerHTML=doc.getElementById("hemkomstvecka").options[doc.getElementById("hemkomstvecka").selectedIndex].value;
document.getElementById("Specmaltider").innerHTML=doc.getElementById("maltider").getAttribute("value");
document.getElementById("Specstadning").innerHTML=doc.getElementById("stadning").getAttribute("value");
     
<!--Ovrigt -->
document.getElementById("Specovrigt").innerHTML=doc.getElementById("ovrigt").value;

<!--Betalning -->
document.getElementById("Spectotalpriset").innerHTML=doc.getElementById("totalpriset").value;
document.getElementById("Specbetalsatt").innerHTML=doc.getElementById("betalsatt").getAttribute("value");

alert("Beställningen är skickad!");
</script>

</body>
</html>

Open in new window

0
 
hermesalphaAuthor Commented:
Almost working now. The button "Beräkna totalpris" (calculate total price) doesn't work though, so I only get the specification pop-up, with the variables the customer has filled out on the form (only the button "Skicka data" >>>submit data works).

But for the weeks, if I've filled in number 1 for departure week, and number 6 for homecoming week, on the specification pop-up it says homecoming week 3!

Also, I've checked the boxes for both Morgon and Kväll (morning and evening), but on the specification pop-up it says cleaning only Morgon.

Finally, in the select list for Medresenarer(), I have chosen only one fellow passenger and he is  Barn (child). I don't want the other three Vuxen (adult) from the select lists for Medresenarer() to be displayed on the specification popup. Now, it says Barn First name Second name, then a new row and Vuxen and a new row and Vuxen and a fourth row with Vuxen.
0
 
hermesalphaAuthor Commented:
One more thing: I selected for Betalsatt() "Betala med:" (pay with) Kort (credit card), but on the specification popup it says Faktura (invoice).
0
 
Michel PlungjanIT ExpertCommented:
I'll look. However most of the errors come down to using the wrong form field in the specification page, like using departure instead of hemresa
0
 
Michel PlungjanIT ExpertCommented:
You must have unique IDs.

Here is one way of getting the payment method

         <input type="radio" name="betalsatt" id="betalkort" value="Kort" checked />Kort
         <input type="radio" name="betalsatt" id="betalkontant" value="Kontant" />Kontant
         <input type="radio" name="betalsatt" id="betalfaktura" value="Faktura" />Faktura<br />

using 

var betalsatt = "";
if (doc.getElementById("betalkort").checked) betalsatt=doc.getElementById("betalkort").value;
else if (doc.getElementById("betalkontant").checked) betalsatt=doc.getElementById("betalkontant").value;
else if (doc.getElementById("betalfaktura").checked) betalsatt=doc.getElementById("betalfaktura").value;
document.getElementById("Specbetalsatt").innerHTML=betalsatt;

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Hmm, getting to be custom work for free here...

        <input onclick="calculate(this.form)" type="radio" name="maltider" id="Helpension" value="Helpension" checked />Helpension<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="radio" name="maltider" id="Halvpension" value="Halvpension" />Halvpension<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="radio" name="maltider" id="Frukost" value="Frukost" />Endast frukost<p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        Städning:<br />

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="checkbox" name="stadning" id="Morgon" value="Morgon" checked />Morgon<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="checkbox" name="stadning" id="Kvall" value="Kväll" />Kväll



<!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>Specifikation</title>
<style type="text/css">
<!-- /* <![CDATA[ */ 
body {background: #ffff33; color: #000000; font-family: sans-serif; font-size: 10pt;}
  h2 {font-family: sans-serif; font-weight: 800; text-align: left;}
  h3 {font-family: sans-serif; font-weight: 800; text-align: left;}
  #Specifikation {position: absolute;
                  top: 5px;
                  left: 120px;} 
  #Bestallare {position: relative;
               width: 50px;
               top: 50px}
  #Medresenarer {position: absolute;
                 width: 50px;
                 top: 50px;
                 left: 300px;}
  #Resahotell {position: relative;}
  #Ovrigt {position: relative ;
           column-span: 40;
           row-span: 5;}
  #Betalning {position: relative;}
  .emphasized {font: bold;}
/* ]]> */ -->
</style>
</head>
<body>

<div id="Specifikation">
<h2>Specifikation</h2>
</div>

<div id="Bestallare">
<h3>Beställare:</h3>                            
<span id="Namn"></span><br />
<span id="Specadress"></span><br />
<span id="Spectelefon"></span><br />
<span id="Specepost"></span>
</div>

<div id="Medresenarer">
<h3>Medresenärer:</h3>
<span id="Specmedresenar1">&nbsp;</span><span id="Specmedresenar1FornamnEfternamn"></span><br />
<span id="Specmedresenar2">&nbsp;</span><span id="Specmedresenar2FornamnEfternamn"></span><br />
<span id="Specmedresenar3">&nbsp;</span><span id="Specmedresenar3FornamnEfternamn"></span><br />
<span id="Specmedresenar4">&nbsp;</span><span id="Specmedresenar4FornamnEfternamn"></span>
</div>

<div id="Resahotell">
<h3>Rese- och hotelluppgifter:</h3>
<span class="emphasized">Avresa från:</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specavreseort"></span><br />
<span class="emphasized">Avresevecka:</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specavresevecka"></span><br />
<span class="emphasized">Destination:</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specdestinationsort"></span><br />
<span class="emphasized">Hemkomstvecka:</span>&nbsp;<span id="Spechemkomstvecka"></span><br />
<span class="emphasized">Måltider:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specmaltider"></span><br />
<span class="emphasized">Städning:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specstadning"></span>
</div>

<div id="Ovrigt">
<h3>Övrigt: önskemål, kommentarer, frågor mm</h3> 
<span id="Specovrigt"></span>
</div>

<div id="Betalning">
<h3>Betalning:</h3>
<span class="emphasized">Totalpris att betala:</span>&nbsp;<span id="Spectotalpriset"></span><br />
<span class="emphasized">Betalas med:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specbetalsatt"></span>
</div>

<script>
<!--Bestallare -->
var doc = window.opener.document;
document.getElementById("Namn").innerHTML=doc.getElementById("fnamn").value + "&nbsp;" + doc.getElementById("enamn").value;
document.getElementById("Specadress").innerHTML=doc.getElementById("adress").value;
document.getElementById("Spectelefon").innerHTML=doc.getElementById("telefon").value;
document.getElementById("Specepost").innerHTML=doc.getElementById("epost").value;

<!--Medresenarer -->
document.getElementById("Specmedresenar1").innerHTML=doc.getElementById("medresenar1").options[doc.getElementById("medresenar1").selectedIndex].value;
document.getElementById("Specmedresenar1FornamnEfternamn").innerHTML=doc.getElementById("medresenar1Fornamn").value + "&nbsp;" + doc.getElementById("medresenar1Efternamn").value;
document.getElementById("Specmedresenar2").innerHTML=doc.getElementById("medresenar2").options[doc.getElementById("medresenar2").selectedIndex].value;
document.getElementById("Specmedresenar2FornamnEfternamn").innerHTML=doc.getElementById("medresenar2Fornamn").value + "&nbsp;" + doc.getElementById("medresenar2Efternamn").value;
document.getElementById("Specmedresenar3").innerHTML=doc.getElementById("medresenar3").options[doc.getElementById("medresenar3").selectedIndex].value;
document.getElementById("Specmedresenar3FornamnEfternamn").innerHTML=doc.getElementById("medresenar3Fornamn").value + "&nbsp;" + doc.getElementById("medresenar3Efternamn").value;
document.getElementById("Specmedresenar4").innerHTML=doc.getElementById("medresenar4").options[doc.getElementById("medresenar4").selectedIndex].value;
document.getElementById("Specmedresenar4FornamnEfternamn").innerHTML=doc.getElementById("medresenar4Fornamn").value + "&nbsp;" + doc.getElementById("medresenar4Efternamn").value;

<!--Resahotell -->
document.getElementById("Specavreseort").innerHTML=doc.getElementById("avreseort").options[doc.getElementById("avreseort").selectedIndex].value;
document.getElementById("Specavresevecka").innerHTML=doc.getElementById("avresevecka").options[doc.getElementById("avresevecka").selectedIndex].value;
document.getElementById("Specdestinationsort").innerHTML=doc.getElementById("destinationsort").options[doc.getElementById("destinationsort").selectedIndex].value;
document.getElementById("Spechemkomstvecka").innerHTML=doc.getElementById("hemkomstvecka").options[doc.getElementById("hemkomstvecka").selectedIndex].value;
var maltider = "";
if (doc.getElementById("Frukost")[0].checked) maltider = doc.getElementById("Frukost")[0].value;
else if (doc.getElementById("Halvpension")[1].checked) maltider = doc.getElementById("Halvpension")[1].value;
else if (doc.getElementById("Helpension")[2].checked) maltider = doc.getElementById("Helpension")[2].value;
document.getElementById("Specmaltider").innerHTML=maltider;

var stadning ="";
if (doc.getElementById("Morgon").checked) stadning += doc.getElementById("Morgon").value;
if (doc.getElementById("Kvall").checked &&   stadning != "") stadning += " och ";
if (doc.getElementById("Kvall").checked)  stadning += doc.getElementById("Kvall").value;

document.getElementById("Specstadning").innerHTML=stadning
     
<!--Ovrigt -->
document.getElementById("Specovrigt").innerHTML=doc.getElementById("ovrigt").value;

<!--Betalning -->
document.getElementById("Spectotalpriset").innerHTML=doc.getElementById("totalpriset").value;
var betalsatt = "";
if (doc.getElementById("betalkort").checked) betalsatt=doc.getElementById("betalkort").value;
else if (doc.getElementById("betalkontant").checked) betalsatt=doc.getElementById("betalkontant").value;
else if (doc.getElementById("betalfaktura").checked) betalsatt=doc.getElementById("betalfaktura").value;
document.getElementById("Specbetalsatt").innerHTML=betalsatt;

alert("Beställningen är skickad!");
</script>

</body>
</html>

Open in new window

0
 
BadotzCommented:
Yup, and setting expectations, too...
0
 
Michel PlungjanIT ExpertCommented:
Yeah - that is what happens when I get caught up in fixing things.
Normally charge per hour...
0
 
BadotzCommented:
Ditto...and ditto.
0
 
hermesalphaAuthor Commented:
Sorry I didn't reply until now, was struggling with CSS, found out it's not so easy as it seemed to. But found these sites, was stuck there for a while:

http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.dreamweavercafe.com/tutorials/css-bg/cssbg.htm
http://aurelio.net/css-sandbox/

Really appreciate your work mplungjan, wouldn't have come far without your help. Do you think you
take it a little further only? I think it's not much missing now to get it to work

A thought about the unique ID:s:

document.getElementById("Specmaltider").innerHTML=doc.getElementById("maltider").getAttribute("value");

Can I still refer to "maltider" as a name attribute for the radio button, and not an ID?
The same for "stadning":

document.getElementById("Specstadning").innerHTML=doc.getElementById("stadning").getAttribute("value");

attribute name "maltider" have three ID:s and values: Helpension, Halvpension, Frukost.
attribute name "stadning" have two ID:s and values: Morgon, Kvall.

Should I keep it like this, the ID:s, names and values like above?

Also, I can't get the alert on the Specification popup displayed now (it was displayed earlier though). I've enclosed the code below.
var betalsatt = "";
if (doc.getElementById("betalkort").checked) betalsatt=doc.getElementById("betalkort").value;
else if (doc.getElementById("betalkontant").checked) betalsatt=doc.getElementById("betalkontant").value;
else if (doc.getElementById("betalfaktura").checked) betalsatt=doc.getElementById("betalfaktura").value;
document.getElementById("Specbetalsatt").innerHTML=betalsatt; 

alert("Beställningen är skickad!");
</script>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Yes you need to keep the unique IDs I gave

Otherwise we can change the lot to use the names instead, but that is a bit of a change, but it is my preferred method

0
 
Michel PlungjanIT ExpertCommented:
Here is file 1

<!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>Specifikation</title>
<style type="text/css">
<!-- /* <![CDATA[ */ 
body {background: #ffff33; color: #000000; font-family: sans-serif; font-size: 10pt;}
  h2 {font-family: sans-serif; font-weight: 800; text-align: left;}
  h3 {font-family: sans-serif; font-weight: 800; text-align: left;}
  #Specifikation {position: absolute;
                  top: 5px;
                  left: 120px;} 
  #Bestallare {position: relative;
               width: 50px;
               top: 50px}
  #Medresenarer {position: absolute;
                 width: 50px;
                 top: 50px;
                 left: 300px;}
  #Resahotell {position: relative;}
  #Ovrigt {position: relative ;
           column-span: 40;
           row-span: 5;}
  #Betalning {position: relative;}
  .emphasized {font: bold;}
/* ]]> */ -->
</style>
</head>
<body>

<div id="Specifikation">
<h2>Specifikation</h2>
</div>

<div id="Bestallare">
<h3>Beställare:</h3>                            
<span id="Namn"></span><br />
<span id="Specadress"></span><br />
<span id="Spectelefon"></span><br />
<span id="Specepost"></span>
</div>

<div id="Medresenarer">
<h3>Medresenärer:</h3>
<span id="Specmedresenar1"></span>&nbsp;<span id="Specmedresenar1FornamnEfternamn"></span><br />
<span id="Specmedresenar2"></span>&nbsp;<span id="Specmedresenar2FornamnEfternamn"></span><br />
<span id="Specmedresenar3"></span>&nbsp;<span id="Specmedresenar3FornamnEfternamn"></span><br />
<span id="Specmedresenar4"></span>&nbsp;<span id="Specmedresenar4FornamnEfternamn"></span>
</div>

<div id="Resahotell">
<h3>Rese- och hotelluppgifter:</h3>
<span class="emphasized">Avresa från:</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specavreseort"></span><br />
<span class="emphasized">Avresevecka:</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specavresevecka"></span><br />
<span class="emphasized">Destination:</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specdestinationsort"></span><br />
<span class="emphasized">Hemkomstvecka:</span>&nbsp;<span id="Spechemkomstvecka"></span><br />
<span class="emphasized">Måltider:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specmaltider"></span><br />
<span class="emphasized">Städning:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specstadning"></span>
</div>

<div id="Ovrigt">
<h3>Övrigt: önskemål, kommentarer, frågor mm</h3> 
<span id="Specovrigt"></span>
</div>

<div id="Betalning">
<h3>Betalning:</h3>
<span class="emphasized">Totalpris att betala:</span>&nbsp;<span id="Spectotalpriset"></span><br />
<span class="emphasized">Betalas med:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specbetalsatt"></span>
</div>

<script>
<!--Bestallare -->
var doc = window.opener.document;
document.getElementById("Namn").innerHTML=doc.getElementById("fnamn").value + "&nbsp;" + doc.getElementById("enamn").value;
document.getElementById("Specadress").innerHTML=doc.getElementById("adress").value;
document.getElementById("Spectelefon").innerHTML=doc.getElementById("telefon").value;
document.getElementById("Specepost").innerHTML=doc.getElementById("epost").value;

<!--Medresenarer -->
document.getElementById("Specmedresenar1").innerHTML=doc.getElementById("medresenar1").options[doc.getElementById("medresenar1").selectedIndex].value;
document.getElementById("Specmedresenar1FornamnEfternamn").innerHTML=doc.getElementById("medresenar1Fornamn").value + "&nbsp;" + doc.getElementById("medresenar1Efternamn").value;
document.getElementById("Specmedresenar2").innerHTML=doc.getElementById("medresenar2").options[doc.getElementById("medresenar2").selectedIndex].value;
document.getElementById("Specmedresenar2FornamnEfternamn").innerHTML=doc.getElementById("medresenar2Fornamn").value + "&nbsp;" + doc.getElementById("medresenar2Efternamn").value;
document.getElementById("Specmedresenar3").innerHTML=doc.getElementById("medresenar3").options[doc.getElementById("medresenar3").selectedIndex].value;
document.getElementById("Specmedresenar3FornamnEfternamn").innerHTML=doc.getElementById("medresenar3Fornamn").value + "&nbsp;" + doc.getElementById("medresenar3Efternamn").value;
document.getElementById("Specmedresenar4").innerHTML=doc.getElementById("medresenar4").options[doc.getElementById("medresenar4").selectedIndex].value;
document.getElementById("Specmedresenar4FornamnEfternamn").innerHTML=doc.getElementById("medresenar4Fornamn").value + "&nbsp;" + doc.getElementById("medresenar4Efternamn").value;

<!--Resahotell -->
document.getElementById("Specavreseort").innerHTML=doc.getElementById("avreseort").options[doc.getElementById("avreseort").selectedIndex].value;
document.getElementById("Specavresevecka").innerHTML=doc.getElementById("avresevecka").options[doc.getElementById("avresevecka").selectedIndex].value;
document.getElementById("Specdestinationsort").innerHTML=doc.getElementById("destinationsort").options[doc.getElementById("destinationsort").selectedIndex].value;
document.getElementById("Spechemkomstvecka").innerHTML=doc.getElementById("hemkomstvecka").options[doc.getElementById("hemkomstvecka").selectedIndex].value;
var maltider = "";
if (doc.getElementById("Frukost").checked) maltider = doc.getElementById("Frukost").value;
else if (doc.getElementById("Halvpension").checked) maltider = doc.getElementById("Halvpension").value;
else if (doc.getElementById("Helpension").checked) maltider = doc.getElementById("Helpension").value;
document.getElementById("Specmaltider").innerHTML=maltider;

var stadning ="";
if (doc.getElementById("Morgon").checked) stadning += doc.getElementById("Morgon").value;
if (doc.getElementById("Kvall").checked &&   stadning != "") stadning += " och ";
if (doc.getElementById("Kvall").checked)  stadning += doc.getElementById("Kvall").value;

document.getElementById("Specstadning").innerHTML=stadning
     
<!--Ovrigt -->
document.getElementById("Specovrigt").innerHTML=doc.getElementById("ovrigt").value;

<!--Betalning -->
document.getElementById("Spectotalpriset").innerHTML=doc.getElementById("totalpriset").value;
var betalsatt = "";
if (doc.getElementById("betalKort").checked) betalsatt=doc.getElementById("betalKort").value;
else if (doc.getElementById("betalKontant").checked) betalsatt=doc.getElementById("betalKontant").value;
else if (doc.getElementById("betalFaktura").checked) betalsatt=doc.getElementById("betalFaktura").value;
document.getElementById("Specbetalsatt").innerHTML=betalsatt;

alert("Beställningen är skickad!");
</script>

</body>
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
And here is the corrected bestallning

There are some changes to handle reload and errors in weeks

<!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>Beställning</title>
<script language="JavaScript" type="text/javascript">
<!--
         function Destination()
         {
         var prisDestination = 0
              if (document.formular.destinationsort.selectedIndex == 0) prisDestination = 13400 * Veckor() * Medresenarer()
         else if (document.formular.destinationsort.selectedIndex == 1) prisDestination = 12900 * Veckor() * Medresenarer()     
         else if (document.formular.destinationsort.selectedIndex == 2) prisDestination = 11500 * Veckor() * Medresenarer()     
         return prisDestination
         }
         
         function Veckor() {
           var antVeckor = 0;
           var hemkomstvecka = parseInt(document.formular.hemkomstvecka.value,10)
           var avresevecka = parseInt(document.formular.avresevecka.value,10);
           if (hemkomstvecka > avresevecka) antVeckor = hemkomstvecka - avresevecka;
           else if (hemkomstvecka < avresevecka) antVeckor = 52 - avresevecka + hemkomstvecka;
           document.getElementById('veckowarn').innerHTML= (!loading && hemkomstvecka === avresevecka)?'Du har inte valt rätt veckor!':'';
           return antVeckor     
         }
         
         
         function Maltider()
         {
         var prisMaltider = 0;
         if (document.formular.maltider[0].checked) prisMaltider = 500
         else if (document.formular.maltider[1].checked) prisMaltider == 300
         else if (document.formular.maltider[2].checked) prisMaltider = 200
         return prisMaltider
         }
         
         var prisStadning = 0
         function Stadning()
         {
         if (document.formular.stadning[0].checked) prisStadning = 250
         else if (document.formular.stadning[1].checked) prisStadning = 350
         else if (document.formular.stadning[0].checked && document.formular.stadning[1].checked) prisStadning = 250 + 350
         return prisStadning
         }
         
         
         function Medresenarer()
         {
         var antMedresenarer = 0;
         if (document.formular.medresenar1.selectedIndex == 1) antMedresenarer ++;
         if (document.formular.medresenar1.selectedIndex == 2) antMedresenarer += 0.5;
         if (document.formular.medresenar2.selectedIndex == 1) antMedresenarer ++;
         if (document.formular.medresenar2.selectedIndex == 2) antMedresenarer += 0.5;
         if (document.formular.medresenar3.selectedIndex == 1) antMedresenarer ++;
         if (document.formular.medresenar3.selectedIndex == 2) antMedresenarer += 0.5;
         if (document.formular.medresenar4.selectedIndex == 1) antMedresenarer ++;
         if (document.formular.medresenar4.selectedIndex == 2) antMedresenarer += 0.5;
         return antMedresenarer
         }
         
         function Mangdrabatt()
         {
         var antVuxna = 1
         if (document.formular.medresenar1.selectedIndex == 1) antVuxna ++;
         if (document.formular.medresenar2.selectedIndex == 1) antVuxna ++;
         if (document.formular.medresenar3.selectedIndex == 1) antVuxna ++;
         if (document.formular.medresenar4.selectedIndex == 1) antVuxna ++;
         return antVuxna > 2; // returns true if 3 or more adults
         }                  
         
         function Betalsatt()
         {
         var prisBetalsatt = 0
         if (document.formular.betalsatt[2].checked) prisBetalsatt = 45
         return prisBetalsatt
         }
         
         function BruttoTotalpris()
         {
          return Destination() + Maltider() + Stadning() + Betalsatt();
         }
         
         function NettoTotalpris()
         {
         var netto = BruttoTotalpris() 
         if (Mangdrabatt()) netto *= 0.90
         return netto
         }
         
         function calculate(theForm) {
           theForm.totalpriset.value = NettoTotalpris().toFixed(0);
         }
         function Specifikation()
         {
         main=window.open('specifikation.html');
         }
         var loading=true;
         window.onload=function() {
          calculate(document.formular);
          loading=false;
         }
//-->         
</script>
</head>

<body><h2 align="center">Beställning av resa</h2>
  <form name="formular">
    
      
      <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Personliga uppgifter</b><p />

      <table>
      <tr><td valign="top">
      
      <!-- Text boxes --> 
      <label for="fnamn">Förnamn:&nbsp;&nbsp</label>
      <input type="text" name="fnamn" id="fnamn" size="17" maxlength="22" /><br />
      <label for="enamn">Efternamn:</label>
      <input type="text" name="enamn" id="enamn" size="17" maxlength="22" />
    
      
      <!-- Text area -->

      <p><label for="adress">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Adress:</label><br />
      <textarea name="adress" id="adress" cols="22" rows="3">
        </textarea>
      </p>
      
      <!-- Radio buttons -->
      <p><label for="betalsatt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Betalsätt:</label><br />
         <input type="radio" name="betalsatt" id="betalKort" value="Kort" checked />Kort
         <input type="radio" name="betalsatt" id="betalKontant" value="Kontant" />Kontant
         <input type="radio" name="betalsatt" id="betalFaktura" value="Faktura" />Faktura<br />

         </p>
         <p>
      <!-- Button -->
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="button" value="Beräkna totalpris" onClick="calculate(this.form)" /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="text" name="totalpriset" id="totalpriset" size="6" />&nbsp;kr   
      </p></td>
      <td valign="top">
      
      <!-- Text boxes --> 
      <label for="telefon">Telefon: </label>

      <input type="text" name="telefon" id="telefon" size="20" /><br />
      <label for="epost">E-post:&nbsp;</label>
      <input type="text" name="epost" id="epost" size="20" />
      
      
      <!-- Select lists and text areas -->
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Medresenärer<br />
      Nr.&nbsp;&nbsp;&nbsp;Vuxen/barn:&nbsp;&nbsp;Förnamn:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Efternamn:<br />

      1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar1" id="medresenar1" onChange="calculate(this.form)">
              <option value="">Ingen</option>
              <option value="Vuxen">Vuxen</option>
              <option value="Barn">Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar1Fornamn" id="medresenar1Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar1Efternamn" id="medresenar1Efternamn" size="17" maxlength="22" /><br />

      2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar2" id="medresenar2" onChange="calculate(this.form)">
              <option value="">Ingen</option>
              <option value="Vuxen">Vuxen</option>
              <option value="Barn">Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar2Fornamn" id="medresenar2Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar2Efternamn" id="medresenar2Efternamn" size="17" maxlength="22" /><br />

      3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar3" id="medresenar3" onChange="calculate(this.form)">
              <option value="">Ingen</option>
              <option value="Vuxen">Vuxen</option>
              <option value="Barn">Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar3Fornamn" id="medresenar3Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar3Efternamn" id="medresenar3Efternamn" size="17" maxlength="22" /><br />

      4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar4" id="medresenar4" onChange="calculate(this.form)">
              <option value="">Ingen</option>
              <option value="Vuxen">Vuxen</option>
              <option value="Barn">Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar4Fornamn" id="medresenar4Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar4Efternamn" id="medresenar4Efternamn" size="17" maxlength="22" /><br /></p>

      <p>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Övrigt: önskemål, kommentarer, frågor mm<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        
        <!-- Textarea -->
        <textarea name="ovrigt" id="ovrigt" cols="40" rows="5">
    </textarea><br />
    
    <!-- Buttons -->
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input type="button" value="Skicka data" onClick="calculate(this.form);Specifikation()" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="reset" value="Rensa data" />
      </p>
      
      <td>
      <!-- Eight select lists -->
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Rese- och hotelluppgifter</b><br />  
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Avresa från:&nbsp;&nbsp;&nbsp;&nbsp;Destination:&nbsp;&nbsp;&nbsp;&nbsp;<br />

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="avreseort" id="avreseort" onChange="calculate(this.form)">
              <option>Stockholm</option>
              <option>Göteborg</option>
              <option>Malmö</option>
      </select>
      <select size="1" name="destinationsort" id="destinationsort" onChange="calculate(this.form)">

               <option>Peking</option>
               <option>Shanghai</option>
               <option>Hongkong</option>
      </select><br><br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Avresa vecka:&nbsp;Hemkomst vecka:<br>

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="avresevecka" id="avresevecka" style="width:90px" onChange="calculate(this.form)">
              <option>1</option>
              <option>2</option>  
              <option>3</option>
              <option>4</option>
              <option>5</option>

              <option>6</option>
              <option>7</option>
              <option>8</option>
              <option>9</option>
              <option>10</option>
              <option>11</option>

              <option>12</option>
              <option>13</option>
              <option>14</option>
              <option>15</option>
              <option>16</option>
              <option>17</option>

              <option>18</option>
              <option>19</option>
              <option>20</option>
              <option>21</option>
              <option>22</option>
              <option>23</option>

              <option>24</option>
              <option>25</option>
              <option>26</option>
              <option>27</option>
              <option>28</option>
              <option>29</option>

              <option>30</option>
              <option>31</option>
              <option>32</option>
              <option>33</option>
              <option>34</option>
              <option>35</option>

              <option>36</option>
              <option>37</option>
              <option>38</option>
              <option>39</option>
              <option>40</option>
              <option>41</option>

              <option>42</option>
              <option>43</option>
              <option>44</option>
              <option>45</option>
              <option>46</option>
              <option>47</option>

              <option>48</option>
              <option>49</option>
              <option>50</option>
              <option>51</option>
              <option>52</option>
        </select>

        <select size="1" name="hemkomstvecka" id="hemkomstvecka" style="width:90px" onChange="calculate(this.form)">
              <option>1</option>
              <option>2</option>  
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>

              <option>7</option>
              <option>8</option>
              <option>9</option>
              <option>10</option>
              <option>11</option>
              <option>12</option>

              <option>13</option>
              <option>14</option>
              <option>15</option>
              <option>16</option>
              <option>17</option>
              <option>18</option>

              <option>19</option>
              <option>20</option>
              <option>21</option>
              <option>22</option>
              <option>23</option>
              <option>24</option>

              <option>25</option>
              <option>26</option>
              <option>27</option>
              <option>28</option>
              <option>29</option>
              <option>30</option>

              <option>31</option>
              <option>32</option>
              <option>33</option>
              <option>34</option>
              <option>35</option>
              <option>36</option>

              <option>37</option>
              <option>38</option>
              <option>39</option>
              <option>40</option>
              <option>41</option>
              <option>42</option>

              <option>43</option>
              <option>44</option>
              <option>45</option>
              <option>46</option>
              <option>47</option>
              <option>48</option>

              <option>49</option>
              <option>50</option>
              <option>51</option>
              <option>52</option>
        </select> <span id="veckowarn"></span>
        <br /><br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input onclick="calculate(this.form)" type="radio" name="maltider" id="Helpension" value="Helpension" checked />Helpension<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="radio" name="maltider" id="Halvpension" value="Halvpension" />Halvpension<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="radio" name="maltider" id="Frukost" value="Frukost" />Endast frukost<p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        Städning:<br />

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="checkbox" name="stadning" id="Morgon" value="Morgon" checked />Morgon<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="checkbox" name="stadning" id="Kvall" value="Kväll" />Kväll
    </p>    
    </td>
    
    <td>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <img src="images/Changcheng.jpg" alt="Great Wall of China" width="300px" height="300px">

    </td>
    </tr>
    </table>
  </form>    
</body>
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
PS: Min email är i min profil.
0
 
hermesalphaAuthor Commented:
Wow! You learn the language fast, from just reading my form!?

The form is almost fine now, except for these things:

Button "Skicka data" (submit):
-Radio buttons: Helpension, halvpension, endast frukost (always "Helpension" on the submitted specification, regardless of what I've chosen).
-Checkboxes for "Städning": Morgon, Kväll (always "Morgon" on the submitted specification, regardless of what I've chosen).
-Radio buttons for "Betalsätt": Kort, Kontant, Faktura (never printed out on the specification at "Betalas med").

Button "Beräkna totalpris" (calculate total price):
Nothing happens when I click this button. There should be a calculated total price in the textfield just beneath the button.

0
 
Michel PlungjanIT ExpertCommented:
I had by accident removed the 1 adult that always travel.

Also the Berakna does not necessarily change anything anymore since I changed all fields to also calculate when changed

I believe I fixed the radios and check buttons in the last spcification file I posted

try this

<!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>Beställning</title>
<script language="JavaScript" type="text/javascript">
<!--
         function Destination()
         {
         var prisDestination = 0
              if (document.formular.destinationsort.selectedIndex == 0) prisDestination = 13400 * Veckor() * Medresenarer()
         else if (document.formular.destinationsort.selectedIndex == 1) prisDestination = 12900 * Veckor() * Medresenarer()     
         else if (document.formular.destinationsort.selectedIndex == 2) prisDestination = 11500 * Veckor() * Medresenarer()
         return prisDestination
         }
         
         function Veckor() {
           var antVeckor = 0;
           var hemkomstvecka = parseInt(document.formular.hemkomstvecka.value,10)
           var avresevecka = parseInt(document.formular.avresevecka.value,10);
           if (hemkomstvecka > avresevecka) antVeckor = hemkomstvecka - avresevecka;
           else if (hemkomstvecka < avresevecka) antVeckor = 52 - avresevecka + hemkomstvecka;
           document.getElementById('veckowarn').innerHTML= (!loading && hemkomstvecka === avresevecka)?'Du har inte valt rätt veckor!':'';
           return antVeckor     
         }
         
         
         function Maltider()
         {
         var prisMaltider = 0;
         if (document.formular.maltider[0].checked) prisMaltider = 500
         else if (document.formular.maltider[1].checked) prisMaltider == 300
         else if (document.formular.maltider[2].checked) prisMaltider = 200
         return prisMaltider
         }
         
         var prisStadning = 0
         function Stadning()
         {
         if (document.formular.stadning[0].checked) prisStadning = 250
         else if (document.formular.stadning[1].checked) prisStadning = 350
         else if (document.formular.stadning[0].checked && document.formular.stadning[1].checked) prisStadning = 250 + 350
         return prisStadning
         }
         
         
         function Medresenarer()
         {
         var antMedresenarer = 1; // ALWAYS 1 person
         if (document.formular.medresenar1.selectedIndex == 1) antMedresenarer ++;
         if (document.formular.medresenar1.selectedIndex == 2) antMedresenarer += 0.5;
         if (document.formular.medresenar2.selectedIndex == 1) antMedresenarer ++;
         if (document.formular.medresenar2.selectedIndex == 2) antMedresenarer += 0.5;
         if (document.formular.medresenar3.selectedIndex == 1) antMedresenarer ++;
         if (document.formular.medresenar3.selectedIndex == 2) antMedresenarer += 0.5;
         if (document.formular.medresenar4.selectedIndex == 1) antMedresenarer ++;
         if (document.formular.medresenar4.selectedIndex == 2) antMedresenarer += 0.5;
         return antMedresenarer
         }
         
         function Mangdrabatt()
         {
         var antVuxna = 1; // ALWAYS 1 person

         if (document.formular.medresenar1.selectedIndex == 1) antVuxna ++;
         if (document.formular.medresenar2.selectedIndex == 1) antVuxna ++;
         if (document.formular.medresenar3.selectedIndex == 1) antVuxna ++;
         if (document.formular.medresenar4.selectedIndex == 1) antVuxna ++;
         return antVuxna > 2; // returns true if 3 or more adults
         }                  
         
         function Betalsatt()
         {
         var prisBetalsatt = 0
         if (document.formular.betalsatt[2].checked) prisBetalsatt = 45
         return prisBetalsatt
         }
         
         function BruttoTotalpris()
         {
          return Destination() + Maltider() + Stadning() + Betalsatt();
         }
         
         function NettoTotalpris()
         {
         var netto = BruttoTotalpris() 
         if (Mangdrabatt()) netto *= 0.90
         return netto
         }
         
         function calculate(theForm) {
           theForm.totalpriset.value = NettoTotalpris().toFixed(0);
         }
         function Specifikation()
         {
         main=window.open('specifikation.html');
         }
         var loading=true;
         window.onload=function() {
          calculate(document.formular);
          loading=false;
         }
//-->         
</script>
</head>

<body><h2 align="center">Beställning av resa</h2>
  <form name="formular">
    
      
      <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Personliga uppgifter</b><p />

      <table>
      <tr><td valign="top">
      
      <!-- Text boxes --> 
      <label for="fnamn">Förnamn:&nbsp;&nbsp</label>
      <input type="text" name="fnamn" id="fnamn" size="17" maxlength="22" /><br />
      <label for="enamn">Efternamn:</label>
      <input type="text" name="enamn" id="enamn" size="17" maxlength="22" />
    
      
      <!-- Text area -->

      <p><label for="adress">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Adress:</label><br />
      <textarea name="adress" id="adress" cols="22" rows="3">
        </textarea>
      </p>
      
      <!-- Radio buttons -->
      <p><label for="betalsatt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Betalsätt:</label><br />
         <input type="radio" name="betalsatt" id="betalKort" value="Kort" checked />Kort
         <input type="radio" name="betalsatt" id="betalKontant" value="Kontant" />Kontant
         <input type="radio" name="betalsatt" id="betalFaktura" value="Faktura" />Faktura<br />

         </p>
         <p>
      <!-- Button -->
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="button" value="Beräkna totalpris" onClick="calculate(this.form)" /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="text" name="totalpriset" id="totalpriset" size="6" />&nbsp;kr   
      </p></td>
      <td valign="top">
      
      <!-- Text boxes --> 
      <label for="telefon">Telefon: </label>

      <input type="text" name="telefon" id="telefon" size="20" /><br />
      <label for="epost">E-post:&nbsp;</label>
      <input type="text" name="epost" id="epost" size="20" />
      
      
      <!-- Select lists and text areas -->
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Medresenärer<br />
      Nr.&nbsp;&nbsp;&nbsp;Vuxen/barn:&nbsp;&nbsp;Förnamn:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Efternamn:<br />

      1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar1" id="medresenar1" onChange="calculate(this.form)">
              <option value="">Ingen</option>
              <option value="Vuxen">Vuxen</option>
              <option value="Barn">Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar1Fornamn" id="medresenar1Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar1Efternamn" id="medresenar1Efternamn" size="17" maxlength="22" /><br />

      2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar2" id="medresenar2" onChange="calculate(this.form)">
              <option value="">Ingen</option>
              <option value="Vuxen">Vuxen</option>
              <option value="Barn">Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar2Fornamn" id="medresenar2Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar2Efternamn" id="medresenar2Efternamn" size="17" maxlength="22" /><br />

      3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar3" id="medresenar3" onChange="calculate(this.form)">
              <option value="">Ingen</option>
              <option value="Vuxen">Vuxen</option>
              <option value="Barn">Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar3Fornamn" id="medresenar3Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar3Efternamn" id="medresenar3Efternamn" size="17" maxlength="22" /><br />

      4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar4" id="medresenar4" onChange="calculate(this.form)">
              <option value="">Ingen</option>
              <option value="Vuxen">Vuxen</option>
              <option value="Barn">Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar4Fornamn" id="medresenar4Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar4Efternamn" id="medresenar4Efternamn" size="17" maxlength="22" /><br /></p>

      <p>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Övrigt: önskemål, kommentarer, frågor mm<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        
        <!-- Textarea -->
        <textarea name="ovrigt" id="ovrigt" cols="40" rows="5">
    </textarea><br />
    
    <!-- Buttons -->
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input type="button" value="Skicka data" onClick="calculate(this.form);Specifikation()" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="reset" value="Rensa data" />
      </p>
      
      <td>
      <!-- Eight select lists -->
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Rese- och hotelluppgifter</b><br />  
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Avresa från:&nbsp;&nbsp;&nbsp;&nbsp;Destination:&nbsp;&nbsp;&nbsp;&nbsp;<br />

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="avreseort" id="avreseort" onChange="calculate(this.form)">
              <option>Stockholm</option>
              <option>Göteborg</option>
              <option>Malmö</option>
      </select>
      <select size="1" name="destinationsort" id="destinationsort" onChange="calculate(this.form)">

               <option>Peking</option>
               <option>Shanghai</option>
               <option>Hongkong</option>
      </select><br><br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Avresa vecka:&nbsp;Hemkomst vecka:<br>

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="avresevecka" id="avresevecka" style="width:90px" onChange="calculate(this.form)">
              <option>1</option>
              <option>2</option>  
              <option>3</option>
              <option>4</option>
              <option>5</option>

              <option>6</option>
              <option>7</option>
              <option>8</option>
              <option>9</option>
              <option>10</option>
              <option>11</option>

              <option>12</option>
              <option>13</option>
              <option>14</option>
              <option>15</option>
              <option>16</option>
              <option>17</option>

              <option>18</option>
              <option>19</option>
              <option>20</option>
              <option>21</option>
              <option>22</option>
              <option>23</option>

              <option>24</option>
              <option>25</option>
              <option>26</option>
              <option>27</option>
              <option>28</option>
              <option>29</option>

              <option>30</option>
              <option>31</option>
              <option>32</option>
              <option>33</option>
              <option>34</option>
              <option>35</option>

              <option>36</option>
              <option>37</option>
              <option>38</option>
              <option>39</option>
              <option>40</option>
              <option>41</option>

              <option>42</option>
              <option>43</option>
              <option>44</option>
              <option>45</option>
              <option>46</option>
              <option>47</option>

              <option>48</option>
              <option>49</option>
              <option>50</option>
              <option>51</option>
              <option>52</option>
        </select>

        <select size="1" name="hemkomstvecka" id="hemkomstvecka" style="width:90px" onChange="calculate(this.form)">
              <option>1</option>
              <option>2</option>  
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>

              <option>7</option>
              <option>8</option>
              <option>9</option>
              <option>10</option>
              <option>11</option>
              <option>12</option>

              <option>13</option>
              <option>14</option>
              <option>15</option>
              <option>16</option>
              <option>17</option>
              <option>18</option>

              <option>19</option>
              <option>20</option>
              <option>21</option>
              <option>22</option>
              <option>23</option>
              <option>24</option>

              <option>25</option>
              <option>26</option>
              <option>27</option>
              <option>28</option>
              <option>29</option>
              <option>30</option>

              <option>31</option>
              <option>32</option>
              <option>33</option>
              <option>34</option>
              <option>35</option>
              <option>36</option>

              <option>37</option>
              <option>38</option>
              <option>39</option>
              <option>40</option>
              <option>41</option>
              <option>42</option>

              <option>43</option>
              <option>44</option>
              <option>45</option>
              <option>46</option>
              <option>47</option>
              <option>48</option>

              <option>49</option>
              <option>50</option>
              <option>51</option>
              <option>52</option>
        </select> <span id="veckowarn"></span>
        <br /><br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input onclick="calculate(this.form)" type="radio" name="maltider" id="Helpension" value="Helpension" checked />Helpension<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="radio" name="maltider" id="Halvpension" value="Halvpension" />Halvpension<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="radio" name="maltider" id="Frukost" value="Frukost" />Endast frukost<p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        Städning:<br />

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="checkbox" name="stadning" id="Morgon" value="Morgon" checked />Morgon<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input onclick="calculate(this.form)" type="checkbox" name="stadning" id="Kvall" value="Kväll" />Kväll
    </p>    
    </td>
    
    <td>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <img src="images/Changcheng.jpg" alt="Great Wall of China" width="300px" height="300px">

    </td>
    </tr>
    </table>
  </form>    
</body>
</html>

Open in new window

0
 
hermesalphaAuthor Commented:
This didn't work:

<input type="button" value="Skicka data" onClick="calculate(this.form);Specifikation()" />

It only worked when I removed calculate(this.form) and kept only Specifikation()

Now, "Måltider" and "Städning" is not displayed at all (last time it was a constant: always "Helpension" and "Morgon" regardless of what I checked). And for some reason, the input on the form in the textarea "ovrigt" is now not displayed at all (last time it was displayed properly).

"Betalsätt" is like before, it doesn't come up on the specification.
0
 
Michel PlungjanIT ExpertCommented:
I think you do not have my versions

Here is a new version where I make sure you do not get specification if you do not change the weeks

http://plungjan.name/eetest/berekna.html
0
 
hermesalphaAuthor Commented:
Ok, "Faktura" works now. When I select radiobutton "Faktura" and click "Beräkna totalpris" it adds 41 to textfield beneath (should be 45 though, which is also in your function in the head, maybe the calculation somewhere is not right).

Textfield beneath "Beräkna totalpris" gets updated when I choose 2 or more Medresenärer so the total price becomes less (I don't need to click the button).

The default in the textfield beneath the button is 750 (if less than two medresenärer + person who ordered and if not pay by invoice "Faktura").
0
 
hermesalphaAuthor Commented:
The weeks don't work: I get alert whatever I choose: <   >   ==   (week number for departure is less than homecoming week, week number for homecoming is less than departure week, weeks are the same in both: I always get the alert 'Du har inte valt rätt veckor!".

Helpension: when selected total price updates automatically to 750 (ok, got it now, this is default in total price) (Helpension should be 500)
Halvpension: when selected total price 350 (Halvpension should be 300)
Frukost: when selected total price 550 (Frukost should be 200)

Städning:
Morgon:  nothing (should update with 250)
Kväll: when selected total price 550 (should update with 350)
(only output if Kväll is selected, nothing is updated if Morgon is selected or if both Morgon and Kväll are selected) If both Morgon and Kväll are selected total price should update with 600
0
 
Michel PlungjanIT ExpertCommented:
Fixed. If no weeks are selected, the price will be 0

Missed the onclick on the betalsatt.
0
 
hermesalphaAuthor Commented:
Do you have the fixed version?
0
 
hermesalphaAuthor Commented:
I added the three onclick for betalsatt, but how do I change so weeks is ok?

I think it's something in this line of code I need to change, right?:

document.getElementById('veckovarning').innerHTML= (!loading && hemkomstvecka === avresevecka)?'Du har inte valt rätt veckor!':'';
0
 
Michel PlungjanIT ExpertCommented:
just download them from my site.
0
 
Michel PlungjanIT ExpertCommented:
you likely did not take ALL my code. These is code that sets the fact that the page is loaded for the first time and not just reloaded. The pages are complete
0
 
hermesalphaAuthor Commented:
I couldn't find them at http://plungjan.name/links.html or http://plungjan.name/scripts/ 

This one I think is the same as before:

http://plungjan.name/eetest/berekna.html  (I still get "Du har inte valt rätt veckor!" for all alternatives I choose).
0
 
Michel PlungjanIT ExpertCommented:
The files are

http://plungjan.name/eetest/berekna.html 
and

http://plungjan.name/eetest/specifikation.html 
of course.

What browser gives you that error if you change the weeks to be correct?

The pages works for me in Firefox, Chrome and Safari.
0
 
hermesalphaAuthor Commented:
Yes, yes! It works fine now. Thanks very much Michel!

Do you have any idea why it doesn't work in IE8? Is it possible to change something so it works also in IE8?

To change in the head-section for function NettoTotalpris() so that Betalsatt() is not included in function Mangdrabatt(), can I write like this?:

function NettoTotalpris()
         {
         var netto = BruttoTotalpris()
         if (Mangdrabatt()) netto-Betalsatt() *= 0.90
         return netto
         }

(So that no discount is calculated on the fee for paying by invoice.)

Also, how to change so that nothing is calculated until the button "Beräkna totalpris" is clicked on? I guess  all the event handlers in the body-section needs to be removed then. When the button "Beräkna totalpris" has been clicked on, the total price should be printed to screen on the text field just below the button.

One final thing, then the form is perfect, is that on specifikation.html (the specification) the address of the person who ordered ("Beställare") becomes lined up in a long column, one word on each row. Like:

Street
address
no.
7
City
Postcode

This happens even if I write like this on the form:

Street address no. 7
City Postcode

So the function Specifikation() somehow assign one word only for each line.
Is it possible to change this so exactly what has been written in the textarea is also what is written on the Specifikation (specification)?
0
 
Michel PlungjanIT ExpertCommented:
1. Please detail what is wrong in IE8 I cannot test until monday
2. if you have
 #Bestallare {position: relative;
               width: 50px;
               top: 50px}

then you ask for a 50px wide field that will overlap whatever there is no room for. I suggest you do NOT use position absolute and make the object wider.

3 I do not understand what you you want to happen with betalsatt
4. it is possble to not do discount if paid by invoice.

5. remove all onChange and onClick=calculate(this.form) except from the berakna button
0
 
hermesalphaAuthor Commented:
1. In IE8 it doesn't work but in Mozilla Firefox it does. What don't work in IE8 are these things:
-When I click the button "Skicka data", I always get the alert "Du har inte valt rätt veckor!", regardless of if I actually have chosen valid weeks.
-In Mozilla Firefox, the calculations of total price works (when I change anything on the form, the total price also changes accordingly). But in IE8 total price is always 0.

2. Betalsatt(): I want that if function Mangdrabatt() is executed (because 1 or more fellow passengers were selected), the discount on 10 % should not include the fee for paying by invoice. So I wonder if this is the correct syntax?: if (Mangdrabatt()) netto-Betalsatt() *= 0.90 (only if "Faktura" has been selected there will be 45 returned from this function, but this should not be included in the discount).
(Your replies 3. "I do not understand what you want to happen with betalsatt" and 4. "It is possible to not do discount if paid by invoice." refer to this same thing: no discount given for the fee of 45 kr for paying by invoice.)
0
 
Michel PlungjanIT ExpertCommented:
Sloppy coding.
IE8 does not return a value for the weeks since there are no values assigned!!


     
         function BruttoTotalpris()
         {
          return Destination() + Maltider() + Stadning();
         }
         
         function NettoTotalpris()
         {
         var netto = BruttoTotalpris()
         if (Mangdrabatt()) netto *= 0.90
         return netto + Betalsatt();
         }




<select size="1" name="avresevecka" id="avresevecka" style="width:90px" onChange="calculate(this.form)">
<script type="text/javascript">
for (var i=1;i<=52; i++) {
  document.write('<option value="'+i+'">'+i+'</option>')
}
</script> 
</select>
<select size="1" name="hemkomstvecka" id="hemkomstvecka" style="width:90px" onChange="calculate(this.form)">
<script type="text/javascript">
for (var i=1;i<=52; i++) {
  document.write('<option value="'+i+'">'+i+'</option>')
}
</script> 
</select>

Open in new window

0
 
hermesalphaAuthor Commented:
I tried and change in my html according to your new corrections. But these things still don't work in Mozilla Firefox nor in IE8:

1. "Totalpris att betala" does not get printed out on the specification
2. "Betalas med" does not get printed out on the specification
3. "Övrigt" does not get printed out on the specification
4. "Måltider" does not get printed out on the specification
5. "Städning" does not get printed out on the specification
6. "Beräkna totalpris" does not work
I removed all onChange and onClick but still the same with above.

<form name="formular" onSubmit="return validate(this)"> Is this correct?

Is this correct? Shouldn't it be return "validate(this)"? With quotation marks "validate(this)" not including return?
0
 
hermesalphaAuthor Commented:
I don't get the alert now when I choose two same weeks: 5 and 5 for example, I can still send the data to the specification.
0
 
Michel PlungjanIT ExpertCommented:
the return is correct

I will look for the rest tomorrow. This is turning into a regular piece of custom coding, you know.
The reasons for most of the problems are due to inconsistencies in the html and original script and the general complexity of the whole page and idea behind it.
0
 
hermesalphaAuthor Commented:
I really appreciate your efforts for helping me with this Michel. I just worry that the page cannot be functional in the end.

0
 
Michel PlungjanIT ExpertCommented:
It will be functional - a soon as it has been corrected to work with all browsers, which of course is easier when doing that from the beginning instead of trying to fix things afterwards.

I will be at an IE8 in about 5 hours and will try to finish - assuming I understand the rest of what you need
0
 
hermesalphaAuthor Commented:
Dare I ask about this also? If not too complicated, besides the "warnweek" you added, can you also add a control function and alert for?:

1. Text fields "Förnamn" and "Efternamn": Control that they are not empty.
2. Text field "Telefon": Control that the field contains only digits and "-".
3. Text field "E-post": Control that the field contains "@" and a dot ".".
4. Text area "Adress": Control that the text area contains characters.

If any of four above control requirements is not fulfilled, there should be an alert that reminds
which field/fields are not correct filled in:

"Förnamn" är inte ifyllt!", "Efternamn är inte riktigt ifyllt!", "Adress är inte riktigt ifyllt!", "Telefon" är inte riktigt ifyllt!", "E-post" är inte riktigt ifyllt!" (the same text except for the field name/text area name).

Finally, only after the button "Beräkna totalpris" has been clicked on and the total price is visible in the text field just beneath the button, then it should be possible to click the button "Skicka data" (submit data).
0
 
hermesalphaAuthor Commented:
I will try to make these controls now, and try them. If they don't work, perhaps you could tell me what needs to be changed?
0
 
hermesalphaAuthor Commented:
The control function with alert should be used for both the buttons: "Beräkna totalpris" and "Skicka data". It should not be possible to click "Beräkna totalpris" or "Skicka data" if not the control requirements are fulfilled.
0
 
Michel PlungjanIT ExpertCommented:
Can you email me on my email address in my profile?
0
 
hermesalphaAuthor Commented:
Can I do like this?:

In the body-section, I add two more functions for each of the two buttons:

<input type="button" value="Beräkna totalpris" onClick="Checkfield(); Checkcharacter(); Skrivtillformular(this.form)" />
<input type="button" value="Skicka data" onClick="Checkfield(); Checkcharacter(); Specifikation()" />

And I write the JavaScript in the head for these two new functions.
0
 
Michel PlungjanIT ExpertCommented:
the best is to put all in validate on submit. I'll show you in an hour or so
0
 
hermesalphaAuthor Commented:
Here are my two functions:

1. Checking that the two text fields and the text area are not empty.
2. Checking that the field E-post and the field Telefonnummer has been correctly filled in.
function kollaFalt()
{
if (document.formular.fnamn.value == "") 
alert("Förnamn har ej fyllts i!")
if (document.formular.enamn.value == "") 
alert("Efternamn har ej fyllts i!")
if (document.formular.ovrigt.value == "") 
alert("Adress har ej fyllts i!")
}
				 
function kollaTecken()
{
uttryck1 = /\w+@\w+\.+\w/
strang1 = document.formular.epost.value
if ((uttryck1.test(strang1)) != 1) alert("E-postadressen har ej fyllts i riktigt!")
uttryck2 = /\d+\-/
if ((uttryck2.test(strang2)) != 1) alert("Telefonnumret har ej fyllts i riktigt!")
}

Open in new window

0
 
hermesalphaAuthor Commented:
And here are my event handlers in the html, for button "Beräkna totalpris" and for button "Skicka data" first run function kollaFält() then function kollaTecken().

But it didn't work, I could "Skicka data" even when I had not filled in "E-post".


<input type="button" value="Beräkna totalpris" onClick="kollaFalt(); kollaTecken(); Skrivtillformular(this.form)" />

<input type="button" value="Skicka data" onClick="kollaFalt(); kollaTecken(); Specifikation()" />

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Can you wait a little?

Your syntax is not correct. Let me update the page I have with a proper validation
0
 
Michel PlungjanIT ExpertCommented:
Here. Try this one for now

I removed all onChange and onClick except for the berakna and skicka

<!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=UTF-8">
<title>Beställning</title>
<script language="JavaScript" type="text/javascript">
<!--
         function Destination()
         {
         var prisDestination = 0
              if (document.formular.destinationsort.selectedIndex == 0) prisDestination = 13400 * Veckor() * Medresenarer()
         else if (document.formular.destinationsort.selectedIndex == 1) prisDestination = 12900 * Veckor() * Medresenarer()     
         else if (document.formular.destinationsort.selectedIndex == 2) prisDestination = 11500 * Veckor() * Medresenarer()
         return prisDestination
         }
         
         function Veckor() {
           var antVeckor = 0;
           var hemkomstvecka = parseInt(document.formular.hemkomstvecka.value,10)
           var avresevecka = parseInt(document.formular.avresevecka.value,10);
           if (hemkomstvecka > avresevecka) antVeckor = hemkomstvecka - avresevecka;
           else if (hemkomstvecka < avresevecka) antVeckor = 52 - avresevecka + hemkomstvecka;
           return antVeckor     
         }
         
         
         function Maltider()
         {
         var prisMaltider = 0;
         if (document.formular.maltider[0].checked) prisMaltider = 500
         else if (document.formular.maltider[1].checked) prisMaltider == 300
         else if (document.formular.maltider[2].checked) prisMaltider = 200
         return prisMaltider
         }
         
         function Stadning()
         {
         var prisStadning = 0
         if (document.formular.stadning[0].checked) prisStadning += 250
         if (document.formular.stadning[1].checked) prisStadning += 350
         return prisStadning
         }
         
         
         function Medresenarer()
         {
         var antMedresenarer = 1; // ALWAYS 1 person
         if (document.formular.medresenar1.selectedIndex == 1) antMedresenarer ++;
         if (document.formular.medresenar1.selectedIndex == 2) antMedresenarer += 0.5;
         if (document.formular.medresenar2.selectedIndex == 1) antMedresenarer ++;
         if (document.formular.medresenar2.selectedIndex == 2) antMedresenarer += 0.5;
         if (document.formular.medresenar3.selectedIndex == 1) antMedresenarer ++;
         if (document.formular.medresenar3.selectedIndex == 2) antMedresenarer += 0.5;
         if (document.formular.medresenar4.selectedIndex == 1) antMedresenarer ++;
         if (document.formular.medresenar4.selectedIndex == 2) antMedresenarer += 0.5;
         return antMedresenarer
         }
         
         function Mangdrabatt()
         {
         var antVuxna = 1; // ALWAYS 1 person

         if (document.formular.medresenar1.selectedIndex == 1) antVuxna ++;
         if (document.formular.medresenar2.selectedIndex == 1) antVuxna ++;
         if (document.formular.medresenar3.selectedIndex == 1) antVuxna ++;
         if (document.formular.medresenar4.selectedIndex == 1) antVuxna ++;
         return antVuxna > 2; // returns true if 3 or more adults
         }                  
         
         function Betalsatt()
         {
         var prisBetalsatt = 0
         if (document.formular.betalsatt[2].checked) {
           prisBetalsatt = 45
         }
         return prisBetalsatt
         }
         

     
         function BruttoTotalpris() {
           return Destination() + Maltider() + Stadning();
         }
       
         function NettoTotalpris() {
           var netto = BruttoTotalpris()
           if (Mangdrabatt()) netto *= 0.90
           return netto + Betalsatt();
         }
         
         function calculate(theForm) {
           theForm.totalpriset.value = (Veckor()==0)?0:NettoTotalpris().toFixed(0);
         }
         function Specifikation() {
           var main=window.open('specifikation.html');
           return false;
         }
         var loading=true;
         window.onload=function() {
   //        calculate(document.formular);
   //        loading=false;
         }

         function validate(theForm) {
           calculate(theForm); // first make sure all has been calculated

           if (theForm.fnamn.value=="") {
             alert("Förnamn har ej fyllts i!");
             theForm.fnamn.focus();
             return false
           }
           if (theForm.enamn.value=="") {
             alert("Efternamn har ej fyllts i!");
             theForm.enamn.focus();
             return false
           }
           if (theForm.adress.value=="") {
             alert("Adress har ej fyllts i!");
             theForm.adress.focus();
             return false
           }
           if (theForm.telefon.value=="") {
             alert("Telefonnumret har ej fyllts i!");
             theForm.telefon.focus();
             return false
           }
           if (!/\d+\-/.test(theForm.telefon.value)) {
             alert("Telefonnumret har ej fyllts i riktigt!");
             theForm.telefon.focus();
             return false
           }
           
           if (theForm.epost.value=="") {
             alert("E-postadressen har ej fyllts i!");
             theForm.epost.focus();
             return false
           }
           if (!/\w+@\w+\.+\w/.test(theForm.epost.value)) {
             alert("E-postadressen har ej fyllts i riktigt!");
             theForm.epost.focus();
             return false
           }
           


           if (Veckor()==0) {
             alert('Du har inte valt rätt veckor!');
             theForm.hemkomstvecka.focus();
             return false;
           }
           return false; // we do not submit this form
         }
//-->         
</script>
</head>

<body><h2 align="center">Beställning av resa</h2>
  <form name="formular" onSubmit="if (validate(this)) return Specifikation()">
    
      
      <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Personliga uppgifter</b><p />

      <table>
      <tr><td valign="top">
      
      <!-- Text boxes --> 
      <label for="fnamn">Förnamn:&nbsp;&nbsp</label>
      <input type="text" name="fnamn" id="fnamn" size="17" maxlength="22" /><br />
      <label for="enamn">Efternamn:</label>
      <input type="text" name="enamn" id="enamn" size="17" maxlength="22" />
    
      
      <!-- Text area -->

      <p><label for="adress">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Adress:</label><br />
      <textarea name="adress" id="adress" cols="22" rows="3"> </textarea>
      </p>
      
      <!-- Radio buttons -->
      <p><label for="betalsatt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Betalsätt:</label><br />
         <input type="radio" name="betalsatt" id="betalKort" value="Kort" checked="checked" />Kort
         <input type="radio" name="betalsatt" id="betalKontant" value="Kontant" />Kontant
         <input type="radio" name="betalsatt" id="betalFaktura" value="Faktura" />Faktura<br />

         </p>
         <p>
      <!-- Button -->
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="button" value="Beräkna totalpris" onClick="validate(this.form)" /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="text" name="totalpriset" id="totalpriset" size="6" readonly="readonly" />&nbsp;kr   
      </p></td>
      <td valign="top">
      
      <!-- Text boxes --> 
      <label for="telefon">Telefon: </label>

      <input type="text" name="telefon" id="telefon" size="20" /><br />
      <label for="epost">E-post:&nbsp;</label>
      <input type="text" name="epost" id="epost" size="20" />
      
      
      <!-- Select lists and text areas -->
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Medresenärer<br />
      Nr.&nbsp;&nbsp;&nbsp;Vuxen/barn:&nbsp;&nbsp;Förnamn:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Efternamn:<br />

      1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar1" id="medresenar1">
              <option value="">Ingen</option>
              <option value="Vuxen">Vuxen</option>
              <option value="Barn">Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar1Fornamn" id="medresenar1Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar1Efternamn" id="medresenar1Efternamn" size="17" maxlength="22" /><br />

      2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar2" id="medresenar2">
              <option value="">Ingen</option>
              <option value="Vuxen">Vuxen</option>
              <option value="Barn">Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar2Fornamn" id="medresenar2Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar2Efternamn" id="medresenar2Efternamn" size="17" maxlength="22" /><br />

      3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar3" id="medresenar3">
              <option value="">Ingen</option>
              <option value="Vuxen">Vuxen</option>
              <option value="Barn">Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar3Fornamn" id="medresenar3Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar3Efternamn" id="medresenar3Efternamn" size="17" maxlength="22" /><br />

      4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="medresenar4" id="medresenar4">
              <option value="">Ingen</option>
              <option value="Vuxen">Vuxen</option>
              <option value="Barn">Barn</option>
      </select>&nbsp;&nbsp;
      <input type="text" name="medresenar4Fornamn" id="medresenar4Fornamn" size="17" maxlength="22" />
      <input type="text" name="medresenar4Efternamn" id="medresenar4Efternamn" size="17" maxlength="22" /><br /></p>

      <p>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Övrigt: önskemål, kommentarer, frågor mm<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        
        <!-- Textarea -->
        <textarea name="ovrigt" id="ovrigt" cols="40" rows="5">
    </textarea><br />
    
    <!-- Buttons -->
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input type="submit" value="Skicka data" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="reset" value="Rensa data" />
      </p>
      
      <td>
      <!-- Eight select lists -->
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Rese- och hotelluppgifter</b><br />  
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Avresa från:&nbsp;&nbsp;&nbsp;&nbsp;Destination:&nbsp;&nbsp;&nbsp;&nbsp;<br />

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select size="1" name="avreseort" id="avreseort">
              <option>Stockholm</option>
              <option>Göteborg</option>
              <option>Malmö</option>
      </select>
      <select size="1" name="destinationsort" id="destinationsort">

               <option>Peking</option>
               <option>Shanghai</option>
               <option>Hongkong</option>
      </select><br><br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Avresa vecka:&nbsp;Hemkomst vecka:<br>

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select size="1" name="avresevecka" id="avresevecka" style="width:90px">
<script type="text/javascript">
for (var i=1;i<=52; i++) {
  document.write('<option value="'+i+'">'+i+'</option>')
}
</script> 
</select>
<select size="1" name="hemkomstvecka" id="hemkomstvecka" style="width:90px">
<script type="text/javascript">
for (var i=1;i<=52; i++) {
  document.write('<option value="'+i+'">'+i+'</option>')
}
</script> 
        </select> 
        <br /><br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="radio" name="maltider" id="Helpension" value="Helpension" checked />Helpension<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="maltider" id="Halvpension" value="Halvpension" />Halvpension<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="maltider" id="Frukost" value="Frukost" />Endast frukost<p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        Städning:<br />

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="checkbox" name="stadning" id="Morgon" value="Morgon" checked />Morgon<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="checkbox" name="stadning" id="Kvall" value="Kväll" />Kväll
    </p>    
    </td>
    
    <td>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <img src="images/Changcheng.jpg" alt="Great Wall of China" width="300px" height="300px">

    </td>
    </tr>
    </table>
  </form>    
</body>
</html>

Open in new window

0
 
hermesalphaAuthor Commented:
Hi Michel,

When I click any of the buttons, now nothing happens, I don't get the specification as I did before, and there is no total price that is calculated. What do you think needs to be changed?
0
 
Michel PlungjanIT ExpertCommented:
I will put it on my server and test it on IE, it worked here,
0
 
Michel PlungjanIT ExpertCommented:
Please clear your cache and load http://plungjan.name/eetest/berekna.html 

I have tested it in FF3.6 and IE8 and it works as it should in my opinion

What it does NOT do is actually SEND the data anywhere. You need to hook up some server process to get the data to you
0
 
hermesalphaAuthor Commented:
Can I do without this metatag?:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

When I use it, I get boxes instead of characters in the form (but your link above works perfect, there I don't get any boxes instead of characters, only when I use it in my own HTML-file).
0
 
Michel PlungjanIT ExpertCommented:
You need
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

I was just tired of seeing boxes myself :)
0
 
hermesalphaAuthor Commented:
I really don't know what can be wrong with my file now. Your link works perfect. I copy and paste exactly the same file into my HTML-Kit and then run it. Now, I can't calculate total price ("Beräkna totalpris") for some reason. Really strange...
function Destination()
{
var prisDestination = 0
if (document.formular.destinationsort.selectedIndex == 0)
prisDestination = (8000 * Medresenarer()) + (2800 * Veckor())
else if (document.formular.destinationsort.selectedIndex == 1)prisDestination = (7000 * Medresenarer()) + (3800 * Veckor())
else if (document.formular.destinationsort.selectedIndex == 2)
prisDestination = (6000 * Medresenarer()) + (4000 * Veckor())return prisDestination
}

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I am sorry. I do not use html kit so I cannot tell you.

Can you publish what you have to a test folder on your server so I can take a look?
0
 
hermesalphaAuthor Commented:
Michel,

I used the contact form on your website and sent an e-mail to you with the URL.

It works better on the server than on my laptop, but not perfect as it does on the link to your server that you gave me. On my server, there is still no check for empty adress (text area "adress" can be left empty without any alert on my server but not on your server).

0
 
hermesalphaAuthor Commented:
I am very sorry Michel, I forgot to upload also the specifikation.html. It is uploaded now, so you can see the specification also.

But it's the same as on my laptop: When submitting, I don't get the "Totalpris att betala", "Betalas med", "Övrigt", "Måltider", "Städning". But on your server, these are displayed on the specification! Not on my laptop and on my server.
0
 
hermesalphaAuthor Commented:
Just wonder, isn't this a typo?:

function Specifikation() {
           if (validate(document.forms[0])) {
             var main=window.open('specifikation.html','_blank');
           }

Shouldn't it be document.form[0]))      That is, not in plural forms but in singular form?
0
 
hermesalphaAuthor Commented:
I changed that to singular, and it worked better (I got alerts all the time when I didn't fill in the fields correctly. But when I click on "Skicka beställning" the form gets reset.
0
 
Michel PlungjanIT ExpertCommented:
Old  specification

for example I do not have this at all:
document.getElementById("Specmaltider").innerHTML=doc.getElementById("maltider").getAttribute("value");




<!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>Specifikation</title>
<style type="text/css">
<!-- /* <![CDATA[ */ 
body {background: #ffff33; color: #000000; font-family: sans-serif; font-size: 10pt;}
  h2 {font-family: sans-serif; font-weight: 800; text-align: left;}
  h3 {font-family: sans-serif; font-weight: 800; text-align: left;}
  #Specifikation {position: absolute;
                  top: 5px;
                  left: 120px;} 
  #Bestallare {position: relative;
               width: 50px;
               top: 50px}
  #Medresenarer {position: absolute;
                 width: 50px;
                 top: 50px;
                 left: 300px;}
  #Resahotell {position: relative;}
  #Ovrigt {position: relative ;
           column-span: 40;
           row-span: 5;}
  #Betalning {position: relative;}
  .emphasized {font: bold;}
/* ]]> */ -->
</style>
</head>
<body>

<div id="Specifikation">
<h2>Specifikation</h2>
</div>

<div id="Bestallare">

<h3>Beställare:</h3>                            
<span id="Namn"></span><br />
<span id="Specadress"></span><br />
<span id="Spectelefon"></span><br />
<span id="Specepost"></span>
</div>

<div id="Medresenarer">
<h3>Medresenärer:</h3>
<span id="Specmedresenar1"></span>&nbsp;<span id="Specmedresenar1FornamnEfternamn"></span><br />
<span id="Specmedresenar2"></span>&nbsp;<span id="Specmedresenar2FornamnEfternamn"></span><br />
<span id="Specmedresenar3"></span>&nbsp;<span id="Specmedresenar3FornamnEfternamn"></span><br />
<span id="Specmedresenar4"></span>&nbsp;<span id="Specmedresenar4FornamnEfternamn"></span>
</div>

<div id="Resahotell">
<h3>Rese- och hotelluppgifter:</h3>
<span class="emphasized">Avresa från:</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specavreseort"></span><br />
<span class="emphasized">Avresevecka:</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specavresevecka"></span><br />
<span class="emphasized">Destination:</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specdestinationsort"></span><br />
<span class="emphasized">Hemkomstvecka:</span>&nbsp;<span id="Spechemkomstvecka"></span><br />
<span class="emphasized">Måltider:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specmaltider"></span><br />
<span class="emphasized">Städning:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specstadning"></span>
</div>

<div id="Ovrigt">
<h3>Övrigt: önskemål, kommentarer, frågor mm</h3> 
<span id="Specovrigt"></span>
</div>

<div id="Betalning">
<h3>Betalning:</h3>
<span class="emphasized">Totalpris att betala:</span>&nbsp;<span id="Spectotalpriset"></span><br />
<span class="emphasized">Betalas med:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="Specbetalsatt"></span>
</div>

<script>
<!--Bestallare -->
var doc = window.opener.document;
document.getElementById("Namn").innerHTML=doc.getElementById("fnamn").value + "&nbsp;" + doc.getElementById("enamn").value;
document.getElementById("Specadress").innerHTML=doc.getElementById("adress").value;
document.getElementById("Spectelefon").innerHTML=doc.getElementById("telefon").value;
document.getElementById("Specepost").innerHTML=doc.getElementById("epost").value;

<!--Medresenarer -->
document.getElementById("Specmedresenar1").innerHTML=doc.getElementById("medresenar1").options[doc.getElementById("medresenar1").selectedIndex].value;
document.getElementById("Specmedresenar1FornamnEfternamn").innerHTML=doc.getElementById("medresenar1Fornamn").value + "&nbsp;" + doc.getElementById("medresenar1Efternamn").value;
document.getElementById("Specmedresenar2").innerHTML=doc.getElementById("medresenar2").options[doc.getElementById("medresenar2").selectedIndex].value;
document.getElementById("Specmedresenar2FornamnEfternamn").innerHTML=doc.getElementById("medresenar2Fornamn").value + "&nbsp;" + doc.getElementById("medresenar2Efternamn").value;
document.getElementById("Specmedresenar3").innerHTML=doc.getElementById("medresenar3").options[doc.getElementById("medresenar3").selectedIndex].value;
document.getElementById("Specmedresenar3FornamnEfternamn").innerHTML=doc.getElementById("medresenar3Fornamn").value + "&nbsp;" + doc.getElementById("medresenar3Efternamn").value;
document.getElementById("Specmedresenar4").innerHTML=doc.getElementById("medresenar4").options[doc.getElementById("medresenar4").selectedIndex].value;
document.getElementById("Specmedresenar4FornamnEfternamn").innerHTML=doc.getElementById("medresenar4Fornamn").value + "&nbsp;" + doc.getElementById("medresenar4Efternamn").value;

<!--Resahotell -->
document.getElementById("Specavreseort").innerHTML=doc.getElementById("avreseort").options[doc.getElementById("avreseort").selectedIndex].value;
document.getElementById("Specavresevecka").innerHTML=doc.getElementById("avresevecka").options[doc.getElementById("avresevecka").selectedIndex].value;
document.getElementById("Specdestinationsort").innerHTML=doc.getElementById("destinationsort").options[doc.getElementById("destinationsort").selectedIndex].value;
document.getElementById("Spechemkomstvecka").innerHTML=doc.getElementById("hemkomstvecka").options[doc.getElementById("hemkomstvecka").selectedIndex].value;
var maltider = "";
if (doc.getElementById("Frukost").checked) maltider = doc.getElementById("Frukost").value;
else if (doc.getElementById("Halvpension").checked) maltider = doc.getElementById("Halvpension").value;
else if (doc.getElementById("Helpension").checked) maltider = doc.getElementById("Helpension").value;
document.getElementById("Specmaltider").innerHTML=maltider;

var stadning ="";
if (doc.getElementById("Morgon").checked) stadning += doc.getElementById("Morgon").value;
if (doc.getElementById("Kvall").checked &&   stadning != "") stadning += " och ";
if (doc.getElementById("Kvall").checked)  stadning += doc.getElementById("Kvall").value;

document.getElementById("Specstadning").innerHTML=stadning
     
<!--Ovrigt -->
document.getElementById("Specovrigt").innerHTML=doc.getElementById("ovrigt").value;

<!--Betalning -->
document.getElementById("Spectotalpriset").innerHTML=doc.getElementById("totalpriset").value;
var betalsatt = "";
if (doc.getElementById("betalKort").checked) betalsatt=doc.getElementById("betalKort").value;
else if (doc.getElementById("betalKontant").checked) betalsatt=doc.getElementById("betalKontant").value;
else if (doc.getElementById("betalFaktura").checked) betalsatt=doc.getElementById("betalFaktura").value;
document.getElementById("Specbetalsatt").innerHTML=betalsatt;

alert("Beställningen är skickad!");
</script>

</body>
</html>

Open in new window

0
 
hermesalphaAuthor Commented:
The form works better now in my IE8, the only thing is that when I click submit (Skicka data), the whole form gets reset.
0
 
hermesalphaAuthor Commented:
I'll upload the latest version to my server, so you can see, it works better than the current one there.
0
 
Michel PlungjanIT ExpertCommented:
Please change

<textarea name="adress" id="adress" cols="22" rows="3"> </textarea>
to
<textarea name="adress" id="adress" cols="22" rows="3"></textarea>

OR better:

add this:
if (!String.prototype.trim) {
 String.prototype.trim = function () {
   return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
 };
}



and change all .value==""
to
.value.trim()==""
0
 
hermesalphaAuthor Commented:
I changed all if:s under function validate(theForm) to .value.trim()==""

<textarea name="adress" id="adress" cols="22" rows="3"> </textarea>
to
<textarea name="adress" id="adress" cols="22" rows="3"></textarea>

Did you forget to type the second version? Because the above are exactly the same.

Didn't get it: where should I insert these lines of code?:

if (!String.prototype.trim) {
String.prototype.trim = function () {
  return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
};
}

Last in the function validate(theForm) in the head?


0
 
hermesalphaAuthor Commented:
Yes, now it worked also with alert for empty address text area. Also in my IE8.
0
 
hermesalphaAuthor Commented:
No, disregard my last posting, it doesn't work in my IE8, I don't get any alert at all, not for any text field or any text area.
0
 
Michel PlungjanIT ExpertCommented:
Sigh...

the difference was the space in the field:

<textarea name="adress" id="adress" cols="22" rows="3">*</textarea>

Here no space.
<textarea name="adress" id="adress" cols="22" rows="3"></textarea>

Please try my page on my server http://plungjan.name/eetest/berekna.html
after clearing your cache
0
 
hermesalphaAuthor Commented:
It works perfect! But what is the reason do you think that when I run exactly the same in my IE8 it just doesn't work?

 It's really peculiar, because I copy and paste your coding ("view source" from your latest upload) into my HTML-editor (HTML-Kit), and run from there. But it doesn't work. I will try again, do the same, I copy and paste from your latest upload into HTML-Kit and run from there.
0
 
Michel PlungjanIT ExpertCommented:
Try instead to right click the link and do a save target as
http://plungjan.name/eetest/berekna.html
http://plungjan.name/eetest/specifikation.html

Remember to change the UTF-8 if you are not saving as UTF-8
0
 
hermesalphaAuthor Commented:
It worked much better now also in my IE8 when I run from my HTML-Kit. I get alerts for all fields and also the text area adress when left empty or not correctly filled in. Not until I have filled in everything correctly is it possible to "Beräkna totalpris".

"Skicka data" also works now, I can submit the data to get the specification.

But the specification does not contain information about these inputs from the form (these fields are empty on the specification even though they are filled in on the form):

Totalpris att betala:, Betalas med:, Måltider:, Städning:, Övrigt:

Also, when all fields on the form have been correctly filled in (I get no alerts), it should only be possible to "Skicka data" if I first have clicked on "Beräkna totalpris".
0
 
Michel PlungjanIT ExpertCommented:
Why? I calculate when you click Skicka anyway.

I get all field filled on specifikation on my server - the version you have is STILL old
0
 
hermesalphaAuthor Commented:
IE8/Safety/Delete browsing history/Temporary internet files

I did this first (only cleared Temporary internet files, not cookies or history).

Ok, I already had sent my posting before you posted your two new links, I will try them now with right-click and save target as...

0
 
Michel PlungjanIT ExpertCommented:
But they are not that new.

however your version of specifikation.html is very old.
0
 
hermesalphaAuthor Commented:
But now, just one minute ago 22:18 Chinese time, I right-clicked your two links, saved target as..., opened these two in my HTML-Kit and run from there. With these last versions, berekna.htm and specifikation.htm I didn't get any alert and I couldn't Skicka data.

I also changed this in the just downloaded berekna.htm:

function Specifikation() {
           if (validate(document.forms[0])) {
             var main=window.open('specifikation.htm','_blank');

'specifikation.html' was written in your latest version, but the file name is 'specifikation.htm for the latest version. It doesn't make any difference perhaps. But neither worked: when I let it be 'specifikation.htm' or 'specifikation.html' neither worked, the same result.
0
 
Michel PlungjanIT ExpertCommented:

http://plungjan.name/eetest/berekna.html
http://plungjan.name/eetest/specifikation.html

is how they are spelled on my server and they both work on my server. I do not know where you got .htm from, perhaps that is what you called it - I suggest you use .html always
I cannot tell you why it does not work from html kit but you introduce many possible ways of making mistakes between one version and the next

I will not be online for a while now. I will read my mails again in perhaps 2-3 hours
0
 
hermesalphaAuthor Commented:
Michel,

I think it worked now when I changed to html on both files. They automatically got saved as htm, I didn't see that. Can you wait a little?
0
 
hermesalphaAuthor Commented:
Everyting was also printed out on the specification now.
0
 
Michel PlungjanIT ExpertCommented:
Great :)

0
 
hermesalphaAuthor Commented:
Yes, this time it worked very nice, perfect! Everything filled in from the form was on the specification.

Is it possible to add a final control function so that the button "Beräkna totalpris" must be clicked on before the button "Skicka data" can be clicked on?

And "Telefonnummer": only digits are allowed, no letters.
0
 
Michel PlungjanIT ExpertCommented:
Sure. However I would think it not necessary since the skicka also calculates. But no problem. I used the test you had to only allow numbers and a dash. I can find a better one if you tell me all the rules
0
 
hermesalphaAuthor Commented:
But now, the specification doesn't contain anything for these fields:

Totalpris att betala
Betalas med
Måltider
Städning
Övrigt

They are empty when I click "Skicka" to get the specification (the other fields are filled in on the specification, like Förnamn, Efternamn, etc.)

Otherwise, everything on the form works with the alert and the buttons.

I upload my version again to my server now.
0
 
hermesalphaAuthor Commented:
Their file names are

berekna.html
specifikation.html
0
 
hermesalphaAuthor Commented:
To clarify,

Totalpris att betala
Betalas med
Måltider
Städning
Övrigt

have been correctly filled in on the form but are not printed out on the specification.

Everything else on the form works very well now: the two buttons Beräkna totalpris and Skicka data;
the alert when field is empty or not correctly filled in.
0
 
hermesalphaAuthor Commented:
The rules you wanted me to tell in your posting ID: 33578090:

"Beräkna totalpris" must be clicked on before the button "Skicka data" can be clicked on. So there must be a total price in the text field beneath the button "Beräkna totalpris" on the form before I can click on "Skicka data".

"Telefonnummer": Only digits are allowed, no letters. Now, the there is no alert if I input "a" or "ba" or any letter also, there is only an alert if I don't input a dash and a digit.
0
 
Michel PlungjanIT ExpertCommented:
Still the old specifikation.html on your server
I still see
document.getElementById("Specmaltider").innerHTML=doc.getElementById("maltider").getAttribute("value");
0
 
Michel PlungjanIT ExpertCommented:
Will this be ok?

^(([+]\d{2}[ ][1-9]\d{0,2}[ ])|([0]\d{1,3}[-]))((\d{2}([ ]\d{2}){2})|(\d{3}([ ]\d{3})*([ ]\d{2})+))$  
Pass: +46 8 123 456 78|||08-123 456 78|||0123-456 78  
Fail: +46 08-123 456 78|||08 123 456 78|||0123 456 78
0
 
hermesalphaAuthor Commented:
The old specifikation.html is changed to the new specifikation.html on my server now, and the specification contains also those fields that were missing before. But after about 30 minutes, there were a lot of "sqmdata00.sqm" files in my directory on the server. I haven't put them there. And I can't view my uploaded files there anymore, the page online at my server is blank, even though the berekna.html and specifikation.html files are uploaded! And they worked fine 30 minutes ago.

I just tried to change the condition for Telefonnummer to your code above, like this:

if (!/^(([+]\d{2}[ ][1-9]\d{0,2}[ ])|([0]\d{1,3}[-]))((\d{2}([ ]\d{2}){2})|(\d{3}([ ]\d{3})*([ ]\d{2})+))$/.test(theForm.telefon.value)) {
         alert("Telefonnumret har ej fyllts i riktigt!");
         theForm.telefon.focus();
         return false

But now, nothing is accepted, I get alert even when the phone number is correct: 08-22 15 00 or 08-221500 (these are not accepted by the control function now).

0
 
Michel PlungjanIT ExpertCommented:
i'll look. The sql files cannot come from my html.
0
 
Michel PlungjanIT ExpertCommented:
I cannot see berekna.html on your server anymore
0
 
hermesalphaAuthor Commented:
I just checked with FileZilla and berekna.html is still there at the same location. But when I try the URL in my web browser, I also can only see a blank page. I'll talk to the person responsible for the server and ask what's wrong. I have problem with another uploaded file also, even though I've uploaded a new version, the old one is the only that is displayed in the browser.
0
 
Michel PlungjanIT ExpertCommented:
My version has been updated
Please see inside the script to see what to do if you REALLY need the user to click extra on the berakna button - I find it not necessary myself

The regular expression for phone number works fine
0
 
hermesalphaAuthor Commented:
The final version worked very well! Everything completed, very satisfied!
0
 
Michel PlungjanIT ExpertCommented:
Great to hear.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 48
  • 47
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now