Tijmen Tijmen - 6 months ago 7
HTML Question

Javascript form with disappearing divs, carry values from div to div

I'm working on a multi-page form where a customer can enter their information, and the system spits out a price based on that information.

The idea is to have several divs, which appear or disappear by hitting a button, the customer enters some information on every div, and the final div then takes all that info and returns a price with breakdown and total.

I'm quite new to Javascript, but I have written the code below. It essentially does everything it has to do, but it doesn't 'remember' the entered values between the divs.

My guess would be I might need to use a GET or POST to get this to work, but I have no idea where and how. All help is greatly appreciated!

NB: the script also includes a calculator which uses the Google Maps API to calculate the distance between the customer's address and our business address, and then returns a pickup & return price based on that distance. This script works, but the output also isn't 'remembered' for the price breakdown in the last div.

if it helps, the entire page is downloadable as a .html file from here: https://drive.google.com/file/d/0B-xbN3H6Mm2SLUpKZ0pWR0Z2d28/view?usp=sharing



var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
directionsDisplay = new google.maps.DirectionsRenderer();

function initialize() {

var melbourne = new google.maps.LatLng(-37.813187, 144.96298);
var myOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: melbourne
}
}

function calcRoute() {
var start = "Ceresstraat 11, Stadskanaal, Netherlands";
var end = document.getElementById("end").value;
var distanceInput = document.getElementById("distance");

var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK && (response.routes[0].legs[0].distance.value / 1000 < 20)) {
directionsDisplay.setDirections(response);
distanceInput.innerHTML = "Het ophalen en terugbrengen van uw auto is gratis!";
document.getElementById('naar5').style.display = "initial"
} else if (status == google.maps.DirectionsStatus.OK && (response.routes[0].legs[0].distance.value / 1000 > 19)) {
directionsDisplay.setDirections(response);
distanceInput.innerHTML = "Het ophalen en terugbrengen van uw auto kost &euro;" + Math.round(response.routes[0].legs[0].distance.value / 1000) + ",-";
document.getElementById('naar5').style.display = "initial"
} else {
distanceInput.innerHTML = "Het adres lijkt niet te kloppen. Probeer het nogmaals of neem contact op voor een vrijblijvende offerte"
}

});
}


var kteken = document.getElementById('kteken');
var merk = document.getElementById('merk');
var model = document.getElementById('model');
var vsnel = document.getElementById('vsnel');
var hbser = document.getElementById('hbser');
var prijs1 = document.getElementById('prijs1');
var prijs2 = document.getElementById('prijs2');
var prijs3 = prijs1 + prijs2;

function naarscherm2() {
document.getElementById('kteken').value;
document.getElementById('scherm1').style.display = "none";
document.getElementById('scherm2').style.display = "block";

}

function naarscherm3() {
document.getElementById('merk').value;
document.getElementById('model').value;
document.getElementById('scherm2').style.display = "none";
document.getElementById('scherm3').style.display = "block";
document.getElementById('merkmodelvraag').innerHTML = "Hoe veel versnellingen heeft uw " + merk + " " + model;
document.getElementById('homepage-module').style.width = "500px";
}

function naarscherm4() {
document.getElementById('scherm3').style.display = "none";
document.getElementById('scherm4').style.display = "block";
document.getElementById('homepage-module').style.height = "200px";
}

function naarscherm5() {
document.getElementById('scherm4').style.display = "none";
document.getElementById('scherm5').style.display = "block";
document.getElementById('homepage-module').style.height = "300px";
}

function bereken() {
if (document.getElementById('vsnel').value = "5 versnellingen") {
document.getElementById('prijs1').innerHTML = 695
} else {
document.getElementById('prijs1').innerHTML = 795
}
document.getElementById('prijs2').innerHTML = Math.round(response.routes[0].legs[0].distance.value / 1000) + ",-";
document.getElementByID('prijs3').innerHTML = prijs3
}

body {
width: 700px;
}
#homepage-calculator {
width: 100%;
height: 394px;
display: flex;
background-image: url("http://www.aircostadskanaal.nl/wp-content/uploads/2016/05/Versnellingsbak-Revisie-Potgieter.png");
}
#homepage-module {
width: 350px;
height: 150px;
margin: auto;
background: linear-gradient(#0879bd, #42c3e7);
background: -webkit-linear-gradient(#0879bd, #42c3e7);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#0879bd, #42c3e7);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0879bd, #42c3e7);
/* For Firefox 3.6 to 15 */
border: 5px solid #1d334e;
border-radius: 25px;
}
#kenteken {
background-image: url("http://www.aircostadskanaal.nl/wp-content/uploads/2016/05/Kenteken.png");
background-repeat: no-repeat;
width: 241px;
height: 50px;
margin: auto;
padding: 5px;
}
#kteken {
width: 210px;
height: 40px;
font-size: 1.5em;
float: right;
background: transparent;
border: none;
}
#ktekenknop {
width: 56px;
height: 34px;
border: 1px solid;
border-color: #ccc #ccc #bbb;
border-radius: 3px;
background: #e6e6e6;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.8);
font-size: 12px;
font-size: 1em;
line-height: 1;
padding: .6em 1em .4em;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
float: right !important;
margin-top: -35px;
}
#scherm1 {
display: block;
width: 90%;
margin: auto;
text-align: center;
color: white;
}
#scherm2 {
display: none;
width: 90%;
margin: auto;
text-align: center;
color: white;
}
#scherm3 {
display: none;
width: 90%;
margin: auto;
text-align: center;
color: white;
}
#scherm4 {
display: none;
width: 90%;
margin: auto;
text-align: center;
color: white;
}
#naar5 {
display: none;
}
#scherm5 {
display: none;
width: 90%;
margin: auto;
text-align: center;
color: white;
}
#knop-blauw {
display: inline-block;
height: 50px;
width: 170px;
border-radius: 10px;
margin: auto;
margin-top: 25px;
background: -webkit-linear-gradient(#6e99d4, #4d76ae);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#6e99d4, #4d76ae);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#6e99d4, #4d76ae);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#6e99d4, #4d76ae);
/*Standard Syntax*/
color: white;
text-align: center;
text-decoration: bold;
font-size: 1.5em;
line-height: 2em;
}
#knop-rood {
display: inline-block;
height: 50px;
border-radius: 10px;
margin: auto;
background: linear-gradient(#bd0425, #a91527);
background: -webkit-linear-gradient(#bd0425, #a91527);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#bd0425, #a91527);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#bd0425, #a91527);
/* For Firefox 3.6 to 15 */
color: white;
text-align: center;
text-decoration: bold;
font-size: 1.5em;
line-height: 2em;
width: 170px !important;
}
#eindtabel {
width: 100%;
}
td {
text align: right;
}
td:first-child {
text-align: left;
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="homepage-calculator">
<div id="homepage-module">
<div id="scherm1">
<h2 style="color:white;text-align:center;font-weight:bold;">Bereken uw Prijs</h2>
<div id="kenteken">
<input id="kteken">
<button id="ktekenknop" type="button" onclick="naarscherm2()">OK</button>
</div>
<!-- kenteken -->
</div>
<!-- scherm1 -->
<div id="scherm2">
<h3>Uw auto</h3>
<input label="merk" id="merk" value="Merk" onFocus="this.value='';">
<br />
<input label="model" id="model" value="Model" onFocus="this.value='';">
<br/>
<button id="merkmodel" onclick="naarscherm3()">OK</button>
</div>
<!-- scherm2 -->
<div id="scherm3">
<p id="merkmodelvraag"></p>
<select id="vsnel">
<option value="volvo">5 versnellingen</option>
<option value="saab">6 versnellingen</option>
</select>
<br />
<br/>
<button onclick="naarscherm4()">Verder</button>
</div>
<!-- scherm3 -->
<div id="scherm4">
<h3>Haal- en Breng-service</h3>
<p>
<!--<label for="start">Start: </label>
//<input type="text" name="start" id="start" />-->

<label for="end">Vul hier uw postcode of straat- en plaatsnaam in:</label>
<br />
<input type="text" name="end" id="end" />

<input type="submit" value="OK" onclick="calcRoute()" />
</p>
<p>
<label for="distance"></label>
<p name="distance" id="distance" readonly="true" /></p>
</p>
<button onclick="naarscherm5()" id="naar5">Verder</button>
</div>
<!-- scherm4 -->
<div id="scherm5" onload="bereken">
<h3>Uw Prijs</h3>
<table id="eindtabel">
<tbody>
<tr>
<td>Versnellingsbak revisie</td>
<td id="prijs1"></td>
</tr>
<tr>
<td>Haal- en Breng-Service</td>
<td id="prijs2"></td>
</tr>
<tr>
<td>Demontage</td>
<td>&euro; 395,-</td>
</tr>
<tr>
<th>Totaal</th>
<td id="prijs3"></td>
</tr>
</tbody>
</table>
<br />
<br />
<div id="knop-blauw"><a style="text-decoration:none;color:white;" href="../over-ons/online-afspraak-maken/">Afspraak</a>
</div>
<div id="knop-rood"><a style="text-decoration:none;color:white;" href="../contact">Contact</a>
</div>
</div>
<!-- scherm5 -->
</div>
<!-- homepage-module -->
</div>
<!-- homepage-calculator -->




rsn rsn
Answer

Make sure you're actually STORING the values, such as in:

function naarscherm2() {
  document.getElementById('kteken').value;
  document.getElementById('scherm1').style.display = "none";
  document.getElementById('scherm2').style.display = "block";
}

Store the 'kteken' val (like you did above that function):

function naarscherm2() {
  kteken = document.getElementById('kteken').value;
  document.getElementById('scherm1').style.display = "none";
  document.getElementById('scherm2').style.display = "block";
  alert(kteken);
}
Comments