yeah im having some trouble with this, it wont calculate the prices and i was hoping some one would could help me please
function calculatePrice(myForm){
//Get selected data
var elt = document.getElementById("tickets1");
var tickets1 = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("tickets2");
var tickets2 = elt.options[elt.selectedIndex].value;
//convert data to integers
tickets1 = parseInt(tickets1);
tickets2 = parseInt(tickets2);
//calculate total value
var total = tickets1 + tickets2;
//print value to PicExtPrice
document.getElementById("PicExtPrice").value=total;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/stylepage.css">
<script type="text/javascript" src="../JS/prcecal.js">
</script>
</head>
<center>
<body>
<fieldset>
<div id="box_1">
<center><h2>Order</h2></center>
<form name="myForm">
Email:
<br>
<input type="email" name="email" id="email" required />
<br>
<br>
Date:
<br>
<input type="date" name="date" id="date" min="today" required />
<br>
<br>
<div id="dropdowns">
<SELECT NAME="Ticketsadults" onChange="calculatePrice()" id="tickets1">
<OPTION value="0">0</OPTION>
<OPTION value="20">1</OPTION>
<OPTION value="40">2</OPTION>
<OPTION value="60">3</OPTION>
<OPTION value="80">4</OPTION>
</SELECT>
<br>
<SELECT NAME="Ticketskids" onChange="calculatePrice()" id="tickets2" >
<OPTION value="0">0</OPTION>
<OPTION value="20">1</OPTION>
<OPTION value="40">2</OPTION>
<OPTION value="60">3</OPTION>
<OPTION value="80">4</OPTION>
</SELECT>
</div>
<br>
<br>
<br>
<button type="button" onclick="calculatePrice()">Calculate</button>
<INPUT type="text" id="PicExtPrice" Size=8>
</form>
</center>
</div>
</fieldset>
</body>
</html>
Ive tried changing it around and stuff but it still wont calcualte the two select drop downs
You put parseInt(tick1) and parseInt(tick2) instead of parseInt(tickets1) and parseInt(tickets2).
Also, you put tick1 + tick2 instead of tickets1 + tickets2.
Related
I'm trying to develop a form where fields will be show according to already selected fields.
I'm facing problem to integrate JavaScript with html properly. I need your help to let me know how I can update the display of fields asynchronously.
Expected Behavior :
By default there will 1 choice selected and 1 input field , if user selects 2 choices from select input then there should be 2 input fields
This is minimal example where I'm trying:
document.getElementById("app").innerHTML = `
<h1>Show fields According to Selected Choice</h1>
<div>
1 field if selected one choice
2 fields if selected 2 choices
</div>
`;
body {
font-family: sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<fieldset>
<div class="form-row field-type">
<div>
<label class="required" for="id_type">Select Choices:</label>
<select name="type" id="id_type">
<option value="1" selected>1 Choice</option>
<option value="2">2 Choices</option>
</select>
</div>
</div>
<div>
<label for="id_choice_1">Choice 1:</label>
<input
type="text"
name="choice_1"
class="vTextField"
maxlength="100"
id="id_choice_1"
/>
</div>
<div>
<label for="id_choice_2">Choice 2:</label>
<input
type="text"
name="choice_2"
class="vTextField"
maxlength="100"
id="id_choice_2"
/>
</div>
</fieldset>
<script>
function myFunction() {
var x = document.getElementById("id_type").value || null;
// Put logic here
}
</script>
<script src="src/index.js"></script>
</body>
</html>
I also added this into a sandbox if you want to run the code. https://codesandbox.io/s/fervent-worker-r6xszj?file=/src/index.js
Using the onchange event of the select you can call a function that first clears all the fields and then adds N fields as selected:
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<fieldset>
<div class="form-row field-type">
<div>
<label class="required" for="id_type">Select Choices:</label>
<select name="type" id="id_type" onchange="genFields()">
<option value="1" selected>1 Choice</option>
<option value="2">2 Choices</option>
<option value="3">3 Choices</option>
<option value="4">4 Choices</option>
</select>
</div>
</div>
<div id="fields"></div>
</fieldset>
</body>
<script>
function genFields() {
document.getElementById("fields").innerHTML = "";
let numFields = document.getElementById("id_type").value;
for (let i = 1; i <= numFields; i++) {
document.getElementById(
"fields"
).innerHTML += `<div><label for='id_choice_${i}'>Choice ${i}</label><input type='text' id='id_choice_${i}' name='choice_${i}' class='vTextField' maxLength=100></div>`;
}
}
</script>
</html>
You can follow this:
let selects = document.querySelector("#id_type");
console.log(selects);
selects.onchange = function (e) {
let inputs = document.querySelector("#inputs");
inputs.innerHTML = `
<div>
<label for="id_choice_1">Choice 1:</label>
<input
type="text"
name="choice_1"
class="vTextField"
maxlength="100"
id="id_choice_1"
/>
</div>
`;
if(e.target.value == "2") {
inputs.innerHTML +=`
<div>
<label for="id_choice_1">Choice 2:</label>
<input
type="text"
name="choice_2"
class="vTextField"
maxlength="100"
id="id_choice_2"
/>
</div>
`;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<fieldset>
<div class="form-row field-type">
<div>
<label class="required" for="id_type">Select Choices:</label>
<select name="type" id="id_type">
<option value="1" selected>1 Choice</option>
<option value="2">2 Choices</option>
</select>
</div>
</div>
<div id="inputs">
<div>
<label for="id_choice_1">Choice 1:</label>
<input
type="text"
name="choice_1"
class="vTextField"
maxlength="100"
id="id_choice_1"
/>
</div>
</div>
</fieldset>
</body>
</html>
You just have to toggle the visibility of those elements with some logic to compare the selected option.
function myFunction(e) {
switch (e.target.value) {
case '1':
document.getElementById('id_choice_1_container').style.display = "block";
document.getElementById('id_choice_2_container').style.display = "none";
break;
case '2':
document.getElementById('id_choice_1_container').style.display = "none";
document.getElementById('id_choice_2_container').style.display = "block";
break;
default:
break;
}
}
<div id="app">
<h1>Show fields According to Selected Choice</h1>
</div>
<fieldset>
<div class="form-row field-type">
<div>
<label class="required" for="id_type">Select Choices:</label>
<select name="type" id="id_type" onchange="myFunction(event)">
<option value="1" selected>1 Choice</option>
<option value="2">2 Choices</option>
</select>
</div>
</div>
<div id="id_choice_1_container">
<label for="id_choice_1">Choice 1:</label>
<input type="text" name="choice_1" class="vTextField" maxlength="100" id="id_choice_1" onchange="myFunction(event)"/>
</div>
<div id="id_choice_2_container" style="display: none">
<label for="id_choice_2">Choice 2:</label>
<input type="text" name="choice_2" class="vTextField" maxlength="100" id="id_choice_2" onchange="myFunction(event)"/>
</div>
</fieldset>
i'm a total newbie to this.
I'd like to receive string in input the following:
Surname:
Name:
Country:
Region:
Email:
Phone number:
Special Requests:
Then I have to show them back in output when the button get pressed.
You can edit the code as much as you want because I think I made everything wrong.
The real problem is the output and the array.
What am I doing wrong (everything, I already know)?
Thanks.
var risposta;
var array = ["cognome", "nome", "comune", "regioni", "email", "telefono"]
function soluzione()
{
for (var i = 0; i < input.length; i++) {
var a = input[i];
k = k + "array[" + i + "].value= "
+ a.value + " ";
}
risposta = "Il numero รจ" +array+" Dai un altro numero.";
document.forms[1].risultato.value=risposta;
setTimeout(function(){window.location.reload()}, 3000);
}
#elaborato{
border-width:10px;
background-color:#FFFDC6;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<center><td> <a href="http://www.istitutokennedy.net/">
<img alt="Istituto Kennedy" src="logokennedy.png"
width=400" height="120">
</a>
<td><h1>Form istituto Kennedy</h1></center>
</head>
<body bgcolor="#FFFDC6">
<div>
<table id="form" align="center">
<tr>
<br>
</tr>
<tr>
<td>
<form id="myForm" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
Cognome: <INPUT type="text" style="padding-top:5px;" name="cognome" size=40><br><br>
Nome: <INPUT type="text" style="padding-top:5px;"name="nome" size=30><br><br>
Comune di Residenza: <INPUT type="text" style="padding-top:5px;"name="comune" size=12><br><br>
<label for="regioni">Regione:</label>
<select id="regioni" name="regioni">
<option value="Abruzzo">Abruzzo</option>
<option value="Basilicata">Basilicata</option>
<option value="Calabria">Calabria</option>
<option value="Campania">Campania</option>
<option value="Emilia-Romagna">Emilia-Romagna</option>
<option value="Friuli-Venezia Giulia">Friuli-Venezia Giulia</option>
<option value="Lazio">Lazio</option>
<option value="Liguria">Liguria</option>
<option value="Lombardia">Lombardia</option>
<option value="Marche">Marche</option>
<option value="Molise">Molise</option>
<option value="Piemonte">Piemonte</option>
<option value="Puglia">Puglia</option>
<option value="Sardegna">Sardegna</option>
<option value="Sicilia">Sicilia</option>
<option value="Toscana">Toscana</option>
<option value="Trentino-Alto Adige">Trentino-Alto Adige</option>
<option value="Umbria">Umbria</option>
<option value="Valle d Aosta">Valle d'Aosta</option>
<option value="Veneto">Veneto</option>
</select>
Email: <INPUT type="text" style="padding-top:5px;"name="email" size=30><br><br>
Telefono: <INPUT type="text" style="padding-top:5px;"name="telefono" size=15><br><br>
<label> Richieste Particolari </label>
<textarea rows="12" cols="60">
</textarea>
<INPUT type="button" class="myButton" value=" Soluzione " onClick="soluzione()"><br>
</form>
<form>
<br>Risultato: <INPUT type="text" style="padding-top:5px;" name="risultato" size=44><br>
</form>
</html>
I think you want to add a new input value to the array.
just use array_name.push(value)
For output use an iterator, like for loop or for each.
The best solution I could come up with is this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
</head>
<body>
<form id="myForm">
Cognome: <input type="text" style="padding-top: 5px" name="cognome" size="40" /><br /><br />
Nome: <input type="text" style="padding-top: 5px" name="nome" size="30" /><br /><br />
Comune di Residenza: <input type="text" style="padding-top: 5px" name="comune" size="12" /><br /><br />
<label for="regioni">Regione:</label>
<select id="regioni" name="regioni">
<option value="Abruzzo">Abruzzo</option>
<option value="Basilicata">Basilicata</option>
<option value="Calabria">Calabria</option>
<option value="Campania">Campania</option>
<option value="Emilia-Romagna">Emilia-Romagna</option>
<option value="Friuli-Venezia Giulia">Friuli-Venezia Giulia</option>
<option value="Lazio">Lazio</option>
<option value="Liguria">Liguria</option>
<option value="Lombardia">Lombardia</option>
<option value="Marche">Marche</option>
<option value="Molise">Molise</option>
<option value="Piemonte">Piemonte</option>
<option value="Puglia">Puglia</option>
<option value="Sardegna">Sardegna</option>
<option value="Sicilia">Sicilia</option>
<option value="Toscana">Toscana</option>
<option value="Trentino-Alto Adige">Trentino-Alto Adige</option>
<option value="Umbria">Umbria</option>
<option value="Valle d Aosta">Valle d'Aosta</option>
<option value="Veneto">Veneto</option>
</select>
Email: <input type="text" style="padding-top: 5px" name="email" size="30" /><br /><br />
Telefono: <input type="text" style="padding-top: 5px" name="telefono" size="15" /><br /><br />
<label> Richieste Particolari </label>
<textarea rows="12" cols="60"> </textarea>
<input type="submit" class="myButton" value="Soluzione" /><br />
</form>
<br />Risultato:
<pre name="risultato" />
<script type="text/javascript" src="index.js" />
</body>
</html>
var risposta = {};
var array = ["cognome", "nome", "comune", "regioni", "email", "telefono"];
const formEl = document.getElementById("myForm");
formEl.addEventListener("submit", (e) => soluzione(e));
function soluzione(e) {
e.preventDefault();
for (var i = 0; i < array.length; i++) {
let value = document.getElementsByName(array[i])[0].value;
risposta[array[i]] = value;
}
document.getElementsByName("risultato")[0].innerHTML = JSON.stringify(risposta, null, 2);
}
If you can understand then perfect and if not then I can explain some parts in the comments too. Let me know :)
I was able to retrieve the input box values, but I am not sure how to retrieve the values from the drop down and radio button values using Java Script get method.
Here is my code:
INDEX PAGE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css">
<title>Test</title>
</head>
<body>
<form action="Results.html" method="get">
<fieldset class = "form1">
<legend><b>Payment</b></legend>
<input type="radio" name="payment" value="Visa" id="Visa" checked> Visa
<input type="radio" name="payment" value="MasterCard" id="MasterCard"> MasterCard
<input type="radio" name="payment" value="AmericaExpress" id="AmericaExpress"> AmericaExpress
<input type="radio" name="payment" value="Discover" id="Discover"> Discover <br>
Card #: <input type="text" name="Card" required id="Card"><br>
Expiration:
<select id="Month">
<option value="01">01</option>
<option value="02">02</option>
</select>
<select id="Day">
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
<br>
CVV: <input type="text" name="cvv" id="Cvv" required> <br>
</fieldset>
<input type="submit" value="Submit" id="button1" name="submit"/>
</form>
</body>
</html>
Javascript/ Output Page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Results</title>
<script>
var parseQueryString = function() {
var str = window.location.search;
var objURL = {};
str.replace(
new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
function( $0, $1, $2, $3 ){
objURL[ $1 ] = $3;
}
);
return objURL;
};
</script>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<P> <b>Payment Information</b> </P>
<div class = "Visa"> Visa: </div>
<div class = "MasterCard"> Master Card: </div>
<div class = "AmericanExpress"> American Express: </div>
<div class = "Discover"> Discover: </div>
<div class = "Card"> Card Number: </div>
<div class = "Month"> Expiration Month: </div>
<div class = "Day"> Expiration Day: </div>
<div class = "cvv"> CVV: </div>
<script>
var params = parseQueryString();
var Visa = params["Visa"];
var MasterCard = params["MasterCard"];
var AmericanExpress = params["AmericanExpress"];
var Discover = params["Discover"];
var Card = params["Card"];
var Month = params["Month"];
var Day = params["Day"];
var cvv = params["cvv"];
console.log(Visa)
document.querySelector('.Visa').innerText += Visa;
console.log(MasterCard)
document.querySelector('.MasterCard').innerText += MasterCard;
console.log(AmericanExpress)
document.querySelector('.AmericanExpress').innerText += AmericanExpress;
console.log(Discover)
document.querySelector('.Discover').innerText += Discover;
console.log(Card)
document.querySelector('.Card').innerText += Card;
console.log(Month)
document.querySelector('.Month').innerText += Month;
console.log(Day)
document.querySelector('.Day').innerText += Day;
console.log(cvv)
document.querySelector('.cvv').innerText += cvv;
</script>
</body>
</html>
Card #: <input type="text" name="Card" required id="Card"><br>
Expiration:
<select id="Month">
<option value="01">01</option>
<option value="02">02</option>
</select>
<select id="Day">
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<br>
CVV: <input type="text" name="cvv" id="Cvv" required> <br>
</fieldset>
<input type="submit" value="Submit" id="button1" name="submit"/>
</form>
</body>
</html>
The results.html page displays the values from the input type that are text, but doesn't return the value from the radio and the drop down menu. Please help me with this. Thanks in advance.
For Radio buttons and Drop down's parameter name in query string is sent as name of the control.
You need to define a name for Month and Year. Card Type is sent as payment in query string as you gave the name as payment.
Index Page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css">
<title>Test</title>
</head>
<body>
<form action="Results.html" method="get">
<fieldset class = "form1">
<legend><b>Payment</b></legend>
<input type="radio" name="payment" value="Visa" id="Visa" checked> Visa
<input type="radio" name="payment" value="MasterCard" id="MasterCard"> MasterCard
<input type="radio" name="payment" value="AmericaExpress" id="AmericaExpress"> AmericaExpress
<input type="radio" name="payment" value="Discover" id="Discover"> Discover <br>
Card #: <input type="text" name="Card" required id="Card"><br>
Expiration:
<select id="Month" name="Month">
<option value="01">01</option>
<option value="02">02</option>
</select>
<select id="Day" name="Day">
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
<br>
CVV: <input type="text" name="cvv" id="Cvv" required> <br>
</fieldset>
<input type="submit" value="Submit" id="button1" name="submit"/>
</form>
</body>
</html>
Results Page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Results</title>
<script>
var parseQueryString = function() {
var str = window.location.search;
var objURL = {};
str.replace(
new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
function( $0, $1, $2, $3 ){
objURL[ $1 ] = $3;
}
);
return objURL;
};
</script>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<P> <b>Payment Information</b> </P>
<div class = "paymentType"> Payment Type: </div>
<div class = "Card"> Card Number: </div>
<div class = "Month"> Expiration Month: </div>
<div class = "Day"> Expiration Day: </div>
<div class = "cvv"> CVV: </div>
<script>
var params = parseQueryString();
var paymentType = params["payment"];
var Card = params["Card"];
var Month = params["Month"];
var Day = params["Day"];
var cvv = params["cvv"];
document.querySelector('.paymentType').innerText += paymentType;
console.log(paymentType)
document.querySelector('.Card').innerText += Card;
console.log(Month)
document.querySelector('.Month').innerText += Month;
console.log(Day)
document.querySelector('.Day').innerText += Day;
console.log(cvv)
document.querySelector('.cvv').innerText += cvv;
</script>
</body>
</html>
Card #: <input type="text" name="Card" required id="Card"><br>
Expiration:
<select id="Month">
<option value="01">01</option>
<option value="02">02</option>
</select>
<select id="Day">
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<br>
CVV: <input type="text" name="cvv" id="Cvv" required> <br>
</fieldset>
<input type="submit" value="Submit" id="button1" name="submit"/>
</form>
</body>
</html>
This are two different things, that can be retrieved very easily, as soon as you experiment a bit around.
See the following simplified examples:
console.log(masterCard.checked)
console.log(day.value)
<input type="radio" id="masterCard" checked>
<select id="day">
<option value="2018" selected></option>
</select>
Side note: This is a standard requirement for clean scripting, use camelCase to name an id, mostly don't use uppercase in the first char for id!
function Submit(){
var city = document.getElementById('Arrival').value;
var hotel = document.getElementById('Hotel').value;
var people = document.getElementById('travelers').value;
var days = document.getElementById('day').value;
var Wifi;
if ( document.getElementById('Wifi').checked = false)
wifi = 0;
if ( document.getElementById('Wifi').checked = true)
wifi = 10;
var seat;
if ( document.getElementById('recline').checked = false) seat = 0;
if ( document.getElementById('recline').checked = true) seat = 20;
var meal = document.getElementById('Meal').value;
var price1 = people * Meal;
var price2 = people * Recline;
var price3 = hotel * day;
document.getElementById("Total").innerHTML = 'Your total is ' + ( Arrival + price3 + Wifi + price1 + price2 );
return false;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Make a Reservation</title>
<script type="text/javascript" src="final_project_javascript.js"></script>
<link rel="stylesheet" type="text/css" href="final_project_css.css">
</head>
<body>
<div id="Nav">
<nav>
Make a Reservation
Contact Us
Join Our Mailing List
Home
</nav>
</div>
<div> <h1> Mad Men Bus Company </h1> </div>
<form name="reservation">
<p>First Name: <input type="text"></p>
<p>Last Name: <input type="text"></p>
<p>Arrival City:</p>
St. Louis <input type="radio" name="Arrival" id="louis" value="40"/></br>
Milwaukee <input type="radio" name="Arrival" id="milwaukee" value="20"/></br>
Detroit <input type="radio" name="Arrival" id="detroit" value="35"/></br>
<p>Hotel Choice:</p>
Economy<input type="radio" name="Hotel" id="economy" value="50"/></br>
Standard<input type="radio" name="Hotel" id="standard" value="70"/></br>
Upscale<input type="radio" name="Hotel"id="upscale" value="120"/></br>
<p>Number of Travelers</p>
<select id="travelers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<p>Number of Days</p>
<select id="day">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<p>Extras</p>
<input type="checkbox" name="extra" id="Wifi" value="10">Wifi</br>
<input type="checkbox" name="extra" id="recline" value="20">Fully-reclining seat</br>
<div id="Meal">
<p>Meal Choice:</p>
None<input type="radio" name="Meal" id="none"/></br>
Snack<input type="radio" name="Meal" id="snack" value="5"/></br>
Full Meal<input type="radio" name="Meal" id="fullmeal" value="10"/></br>
</div>
<p>Special Requests:</p>
<input type="text" name="SpecialRequests"/>
<div>
</br><input type="button" value="Book My Trip" onclick="Submit">
</div>
<h1>Total</h1>
</form>
</body>
</html>
I am trying to run a calculation but javascript does not return anything or work. I have given every variable something to tie back to. I have including their values and I have everything but when I click "book my trip" button nothing happens. Can anyone see why this may be happening?
I want to calculate everything the user chooses and output the cost but the button is not doing anything.
To answer your question in short (why the button does nothing and your code doesn't execute) , Is because the input[type="button"] onsubmit property is referencing a function (Submit) that has not yet.. (according to the DOM) been loaded/defined.
Plus you forgot to add the parentheses e.g <input type="button" onclick="Submit()"/>
Your code was poorly formatted and lacked the semantics necessary to accomplish the task. I did some heavy refactoring and got this...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Make a Reservation</title>
<script type="text/javascript" src="final_project_javascript.js"></script>
<link rel="stylesheet" type="text/css" href="final_project_css.css">
</head>
<body>
<div id="Nav">
<nav>
Make a Reservation
Contact Us
Join Our Mailing List
Home
</nav>
</div>
<div>
<h1> Mad Men Bus Company </h1>
</div>
<form name="reservation">
<p>First Name: <input required type="text"></p>
<p>Last Name: <input required type="text"></p>
<div id="Arrival">
<p>Arrival City:</p>
St. Louis <input checked type="radio" name="Arrival" id="louis" value="40"/></br>
Milwaukee <input type="radio" name="Arrival" id="milwaukee" value="20"/></br>
Detroit <input type="radio" name="Arrival" id="detroit" value="35"/></br>
</div>
<div id="Hotel">
<p>Hotel Choice:</p>
Economy<input type="radio" name="Hotel" id="economy" value="50"/></br>
Standard<input checked type="radio" name="Hotel" id="standard" value="70"/></br>
Upscale<input type="radio" name="Hotel" id="upscale" value="120"/></br>
</div>
<p>Number of Travelers</p>
<select id="travelers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<p>Number of Days</p>
<select id="day">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<p>Extras</p>
<input type="checkbox" name="extra" id="Wifi" value="10">Wifi</br>
<input type="checkbox" name="extra" id="recline" value="20">Fully-reclining seat</br>
<div id="Meal">
<p>Meal Choice:</p>
None<input checked type="radio" name="meal" id="none" value="0" /></br>
Snack<input type="radio" name="meal" id="snack" value="5"/></br>
Full Meal<input type="radio" name="meal" id="fullmeal" value="10"/></br>
</div>
<p>Special Requests:</p>
<input type="text" name="SpecialRequests"/>
<div>
</br><input type="button" value="Book My Trip" />
</div>
<h1 id="Total">Total</h1>
</form>
<script type="text/javascript">
document.querySelector('input[type="button"]').onclick = Submit;
function Submit(){
var city = Number(document.querySelector('input[name="Arrival"]:checked').value);
var hotel = Number(document.querySelector('input[name="Hotel"]:checked').value);
var people = Number(document.getElementById('travelers').value);
var days = Number(document.getElementById('day').value);
var wifi = document.getElementById('Wifi').checked === false ?
0 :
10;
var seat = document.getElementById('recline').checked === false ?
0 :
20;
var meal = Number(document.querySelector('input[name="meal"]:checked').value);
var price1 = people * meal;
var price2 = people * seat;
var price3 = hotel * days;
document.getElementById("Total").innerHTML = 'Your total is ' + (city + price3 + wifi + price1 + price2 );
return false;
}
</script>
</body>
</html>
I'm new to coding for websites and am really struggling! I'm trying to add the select values from different select menu options to a total which will then give me a figure I can add to a number entered in a free text box.
I"ve searched extensively on the net and on this site and have found examples that are similar but when I've tried them out it doesn't work with my additions/changes!
Any help would be greatly appreciated!!!! Below is my html and also javascript.
Thanks in advance!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="example.js"></script>
</head>
<form action="" id="myform" onsubmit="return false;">
<div class="cont_order">
<div data-role="fieldcontain">
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<select name="Sport" id="Sport" data-native-menu="false" data-theme="a" onchange="calculateTotal()">
<option value="0">Sport</option>
<option value="Tennis">Tennis</option>
<option value="Golf">Golf</option>
<option value="Soccer">Soccer</option>
<option value="Rugby">Rugby</option>
<option value="Polo">Polo</option>
<option value="Fencing">Fencing</option>
<option value="Swimming">Swimming</option>
</select>
<br/>
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<select name="Star Sign" id="SS" data-native-menu="false" onchange="calculateTotal()">
<option value="0">Star Sign</option>
<option value="1.5">Aries</option>
<option value="3">Taurus</option>
<option value="1.5">Gemini</option>
<option value="2">Cancer</option>
<option value="3">Leo</option>
<option value="1.5">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="1.5">Capricorn</option>
<option value="0.5">Aquarius</option>
<option value="0.5">Pisces</option>
</select>
<br/>
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<br/>
<select name="Hobby" id="Hobby" data-native-menu="false" onchange="calculateTotal()">Hobby
<option value="0">Hobby</option>
<option value="A lot">A lot</option>
<option value="Some">Some</option>
<option value="Few">Few</option>
<option value="None">None</option
</select>
</div>
<br/>
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<br/>
<select name="Favourite Colour" id="FC" data-native-menu="false" onchange="calculateTotal()">
<option value="0">Favourite Colour</option>
<option value="1.5">Black</option>
<option value="3">Blue</option>
<option value="1.5">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="1.5">Pink</option>
<option value="2">Purple</option>
<option value="3">Red</option>
<option value="2">Yellow</option>
<option value="1.5">White</option>
<option value="4">Other</option>
</select>
<br/>
<p>
<br/>
<div data-role="fieldcontain">
<label for="Age">
<div align="center">Age
:
</div>
</label>
<div align="center">
<input type="number" name="Age" id="Age" value="" />
</div>
</div>
</form>
<p> </p>
<p> <a href="#" data-role="button"> <input type='submit' id='Submit' value='submit' onclick="calculateTotal()"/>
<br/>
</div>
</form>
</div>
</body>
</html>
// JavaScript Document
var Sport = new Array();
Sport["Tennis"]=1.5;
Sport["Golf"]=3;
Sport["Soccer"]=2;
Sport["Rugby"]=3;
Sport["Polo"]=1.5;
Sport["Fencing"]=2;
Sport["Swimming"]=3;
var SS = new Arr4ay();
Star_Sign["Aries"]=1.5;
Star_Sign["Taurus"]=3;
Star_Sign["Cancer"]=2;
Star_Sign["Leo"]=3;
Star_Sign["Virgo"]=1.5;
Star_Sign["Libra"]=2;
Star_Sign["Scorpio"]=3;
Star_Sign["Sagittarius"]=2;
Star_Sign["Capricorn"]=1.5;
Star_Sign["Aquarius"]=0.5;
Star_Sign["Pisces"]=1.5;
var Hobby = new Array();
Hobby["A lot"]=0.5;
Hobby["Some"]=1;
Hobby["Few"]=1;
Hobby["None"]=2;
var FC = new Array();
Favourite_Colour["Blue"]=3;
Favourite_Colour["Brown"]=1.5;
Favourite_Colour["Green"]=2;
Favourite_Colour["Orange"]=3;
Favourite_Colour["Pink"]=1.5;
Favourite_Colour["Purple"]=2;
Favourite_Colour["Red"]=3;
Favourite_Colour["Yellow"]=2;
Favourite_Colour["White"]=1.5;
Favourite_Colour["Other"]=4;
function calc() {
var Sport = Number(document.getElementsById("Sport").value);
var SS = Number(document.getElementsById("SS").value);
var Hobby = Number(document.getElementsById("Hobby").value);
var FC = Number(document.getElementsById("FC").value);
var Age = Number(document.getElementsById("Age").value);
var total = Sport + SS + Hobby + FC;
var Score = Age = Score
}// JavaScript Document
In your function calc replace Number with either parseInt if you always expect an integer from your value or parseFloat otherwise.
Unless I am misunderstanding what you're after you could just use the Array.reduce function:
Array.reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
So for you:
function calc() {
new tempAry = [
Number(parseInt (document.getElementsById("Sport").value),10),
Number(parseInt (document.getElementsById("SS").value),10),
Number(parseInt (document.getElementsById("Hobby").value),10),
Number(parseInt (document.getElementsById("FC").value),10)
];
var total = tempAry.reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
//No idea what these are for
//var Age = Number(document.getElementsById("Age").value);
//var Score = Age = Score
}
Not sure exactly what you're after, nor what `Score is meant for, but total should equal the total number.