Solved

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

Posted on 2010-08-22
97
402 Views
Last Modified: 2012-05-10
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
Comment
Question by:hermesalpha
  • 48
  • 47
  • 2
97 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33498426
<form name="formular" type="text/javascript">

remove that.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33498441
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33498446
This is not correct syntax

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

I think you mean

if (document.formular.destinationsort.selectedIndex==0)
 
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33498456
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33498502
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33498754
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33498797
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
 

Author Comment

by:hermesalpha
ID: 33499533
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
 

Author Comment

by:hermesalpha
ID: 33499546
One more thing: I selected for Betalsatt() "Betala med:" (pay with) Kort (credit card), but on the specification popup it says Faktura (invoice).
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33499605
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33499901
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33500116
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
 
LVL 29

Expert Comment

by:Badotz
ID: 33500526
Yup, and setting expectations, too...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33500719
Yeah - that is what happens when I get caught up in fixing things.
Normally charge per hour...
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33500934
Ditto...and ditto.
0
 

Author Comment

by:hermesalpha
ID: 33503112
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33503390
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33504117
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33504130
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33504179
PS: Min email är i min profil.
0
 

Author Comment

by:hermesalpha
ID: 33540256
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33540392
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
 

Author Comment

by:hermesalpha
ID: 33540925
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33541036
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
 

Author Comment

by:hermesalpha
ID: 33541237
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
 

Author Comment

by:hermesalpha
ID: 33541317
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33541399
Fixed. If no weeks are selected, the price will be 0

Missed the onclick on the betalsatt.
0
 

Author Comment

by:hermesalpha
ID: 33542643
Do you have the fixed version?
0
 

Author Comment

by:hermesalpha
ID: 33542661
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33542662
just download them from my site.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33542728
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
 

Author Comment

by:hermesalpha
ID: 33542741
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33543613
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
 

Author Comment

by:hermesalpha
ID: 33549949
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33550289
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
 

Author Comment

by:hermesalpha
ID: 33552586
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33557660
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
 

Author Comment

by:hermesalpha
ID: 33561101
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
 

Author Comment

by:hermesalpha
ID: 33561126
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33561508
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
 

Author Comment

by:hermesalpha
ID: 33563296
I really appreciate your efforts for helping me with this Michel. I just worry that the page cannot be functional in the end.

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33564520
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
 

Author Comment

by:hermesalpha
ID: 33565321
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
 

Author Comment

by:hermesalpha
ID: 33565404
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
 

Author Comment

by:hermesalpha
ID: 33565429
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33565453
Can you email me on my email address in my profile?
0
 

Author Comment

by:hermesalpha
ID: 33565530
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33565647
the best is to put all in validate on submit. I'll show you in an hour or so
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:hermesalpha
ID: 33565698
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
 

Author Comment

by:hermesalpha
ID: 33565728
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33565899
Can you wait a little?

Your syntax is not correct. Let me update the page I have with a proper validation
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33566018
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
 

Author Comment

by:hermesalpha
ID: 33572946
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33573780
I will put it on my server and test it on IE, it worked here,
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33574093
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
 

Author Comment

by:hermesalpha
ID: 33574571
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33574614
You need
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

I was just tired of seeing boxes myself :)
0
 

Author Comment

by:hermesalpha
ID: 33574845
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33574907
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
 

Author Comment

by:hermesalpha
ID: 33575145
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
 

Author Comment

by:hermesalpha
ID: 33575309
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
 

Author Comment

by:hermesalpha
ID: 33575718
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
 

Author Comment

by:hermesalpha
ID: 33575729
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33575737
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
 

Author Comment

by:hermesalpha
ID: 33575764
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
 

Author Comment

by:hermesalpha
ID: 33575771
I'll upload the latest version to my server, so you can see, it works better than the current one there.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33575792
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
 

Author Comment

by:hermesalpha
ID: 33575950
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
 

Author Comment

by:hermesalpha
ID: 33575962
Yes, now it worked also with alert for empty address text area. Also in my IE8.
0
 

Author Comment

by:hermesalpha
ID: 33575979
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33576067
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
 

Author Comment

by:hermesalpha
ID: 33576472
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33576537
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
 

Author Comment

by:hermesalpha
ID: 33576646
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33576766
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
 

Author Comment

by:hermesalpha
ID: 33577070
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33577182
But they are not that new.

however your version of specifikation.html is very old.
0
 

Author Comment

by:hermesalpha
ID: 33577347
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 33577628

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
 

Author Comment

by:hermesalpha
ID: 33577752
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
 

Author Comment

by:hermesalpha
ID: 33577759
Everyting was also printed out on the specification now.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33577786
Great :)

0
 

Author Comment

by:hermesalpha
ID: 33577836
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33578090
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
 

Author Comment

by:hermesalpha
ID: 33578482
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
 

Author Comment

by:hermesalpha
ID: 33578515
Their file names are

berekna.html
specifikation.html
0
 

Author Comment

by:hermesalpha
ID: 33578541
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
 

Author Comment

by:hermesalpha
ID: 33578740
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33578747
Still the old specifikation.html on your server
I still see
document.getElementById("Specmaltider").innerHTML=doc.getElementById("maltider").getAttribute("value");
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33578802
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
 

Author Comment

by:hermesalpha
ID: 33583242
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33584087
i'll look. The sql files cannot come from my html.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33594687
I cannot see berekna.html on your server anymore
0
 

Author Comment

by:hermesalpha
ID: 33606808
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33606895
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
 

Author Comment

by:hermesalpha
ID: 33714650
The final version worked very well! Everything completed, very satisfied!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33716527
Great to hear.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now