Develop Reference

Onchange refresh when adding a new item

onchange works fine when selecting items from a datalist. The problem arises when I want to modify some element. Then they add another onchange and the modified text disappears once it is refreshed.
What should he do to save the modification when adding another onchange?
function information(ele){
var address1 = document.getElementsByClassName('test2');
for(var i=0; i<address1.length; i++){
if( ele.value == "test4"){
address1[i].value = "test5";
} else if (ele.value == "test6"){
address1[i].value = "test7";
} else if (ele.value == "test8"){
address1[i].value = "test9";
}
}
}
<div class="form grup information">
<lable for="dates-full.names"> Names full</lable>
<input name="dates-full.names" list="dates-full.names" type="text"
class="form grup test1" onchange="information(this)">
<datalist type="text" id="dates-full.names">
<option value="test4">
<option value="test6">
<option value="test8">
</datalist>
</div>
<div class="form grup test2">
<lable for="power-full.adress"> Adress full</lable>
<input id="test2" name="dates-full.adress" list="dates-full.adress" type="text"
class="form grup test2">
<datalist type="text" id="dates-full.adress">
<option value="test5">
<option value="test7">
<option value="test9">
</datalist>
</div>

How to use different attribute on change the second select option

I'm trying to change the value of my input box by changing two different select options.
The first select box is product_type with two different data attributes on the options: data-price and data-price_c.
The second Select box pay_type is to selecting between data-price or data-price_c, to update the value of lprice.
This is what I've tried:
var sp = document.getElementById('select_product');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var selected_type = pt.options[pt.selectedIndex];
sp.onchange = function(){
var selected = sp.options[sp.selectedIndex];
if (selected_type === 1){
lp.value = selected.getAttribute('data-price');
} else {
lp.value = selected.getAttribute('data-price_c');
}
fp.value = "";
};
sp.onchange();
count.onchange = function(){
fp.value = lp.value * count.value;
}
<div>
<label for="select_product">Select Product</label>
<select name="product_id" id="select_product" onchange="update();">
<option value="1" data-price="10000" data-price_c="11000">Product 1</option>
<option value="2" data-price="20000" data-price_c="21000">Product 2</option>
<option value="3" data-price="30000" data-price_c="31000">Product 3</option>
</select>
</div>
<div>
<label for="paytype">Pay type:</label>
<select name="paytype" id="paytype">
<option value="1">Cash</option>
<option value="2">Dept</option>
</select>
</div>
<div>
<label for="lprice">Single Price:</label>
<input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>
</div>
<div>
<label for="count">Count:</label>
<input type="number" name="count" id="count" class="form-control" tabindex="1" />
</div>
<div>
<label for="price">Full Price:</label>
<input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>
</div>

I hope I understated you correctly what needs to be done from code and explanation:
Your first problem was that you had your selected_type outside of you onchange function so it wasn't getting the changed options onchange.
Second is that you where trying to compare values 1 & 2 with element without actually extracting those values from element (missing .value on selected_type)
I assumed you will need to update the values on your Pay type change too as well as Select Product, so there is nit trick to wrap both HTML selects into one div in this case div id="wrapper" and that will listen on both selects and call function if any of them are changed. So now you call it on wrapper.onchange.
I would also advise to put your calculation fp.value = lp.value * count.value; inside this function to update total price on change of any of those elements so I wrapped your Count: into wrapper div.
Hope this helps.
var sp = document.getElementById('select_product');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var wrapper=document.getElementById('wrapper');
wrapper.onchange = function(){
var selected = sp.options[sp.selectedIndex];
var selected_type = pt.options[pt.selectedIndex].value;
if (selected_type === "1"){
lp.value = selected.getAttribute('data-price');
}
if (selected_type === "2"){
lp.value = selected.getAttribute('data-price_c');
}
fp.value = "";
fp.value = lp.value * count.value;
};
wrapper.onchange();
<div id="wrapper">
<div>
<label for="select_product">Select Product</label>
<select name="product_id" id="select_product" >
<option value="1" data-price="10000" data-price_c="11000">Product 1</option>
<option value="2" data-price="20000" data-price_c="21000">Product 2</option>
<option value="3" data-price="30000" data-price_c="31000">Product 3</option>
</select>
</div>
<div>
<label for="paytype">Pay type:</label>
<select name="paytype" id="paytype">
<option value="1">Cash</option>
<option value="2">Dept</option>
</select>
</div>
<div>
<label for="lprice">Single Price:</label>
<input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>
</div>
<div>
<label for="count">Count:</label>
<input type="number" name="count" id="count" class="form-control" tabindex="1" />
</div>
</div>
<div>
<label for="price">Full Price:</label>
<input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>
</div>

Do not repeat yourself best practices showing and hiding fields

I am trying to figure out the best way to show and hide fields that are being reused. Cleaning up the code so that I do not repeat myself "DRY". Will someone please assist me in the best practices of doing so?
What I have is a select that allows the user to choose from two different reports.
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option id ="checklistreport" value="checklistreport" >Checklist Stats</option>
<option id ="locationreport" value="locationreport" >Location Stats</option>
</select>
Then each report have a lot of similar fields. How can I have them use the same fields but hide/show the differences and go to the correct form "action" based which report is chosen.
Location Report
<form name="generatereport" method="post" action="_location_queries.cfm">
<select name="Location" id="loc" multiple="multiple" required size="9">
<option value="OPERATIONS">Operations</option>
<option value="CCC">Contact Center</option>
<option value="QA">QA Department</option>
<option value="DS">DeSoto</option>
<option value="PS">Palma Sola</option>
<option value="LWR">Lakewood Ranch</option>
<option value="NR">North River</option>
<option value="SDL">SDL</option>
<option value="FSC">FSC</option>
</select>
<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>
<textarea id="selected" rows="10" readonly></textarea>
<br /><br />
<label for="StartDate">From</label>
<input type='text' name="StartDate" id="StartDate" value="" required/>
<br /><br />
<label for="EndDate">To</label>
<input type='text' name="EndDate" id="EndDate" value="" required/>
<br /><br />
<label for="Format">Format</label>
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
<br /><br />
<input type="submit" name="submit" value="Continue" />
</form>
<script type="text/javascript">
var opts = document.querySelectorAll('#loc option');
document.getElementById('add').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = true;
}
reflectChange();
});
document.getElementById('rem').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = false;
}
reflectChange();
});
document.getElementById('loc').addEventListener('change', reflectChange);
function reflectChange() {
document.getElementById('selected').value = '';
for ( var i=0; i<opts.length; i++ ) {
if(opts[i].selected)
document.getElementById('selected').value += opts[i].text+'\n';
}
}
</script>
Checklist Report
<form name="generatereport" method="post" action="_checklists_queries.cfm">
<select name="Location" id="loc" multiple="multiple" required size="8">
<option value="OPERATIONS">Operations</option>
<option value="CCC">Contact Center</option>
<option value="QA">QA Department</option>
<option value="DS">DeSoto</option>
<option value="PS">Palma Sola</option>
<option value="LWR">Lakewood Ranch</option>
<option value="NR">North River</option>
<option value="SDL">SDL</option>
<option value="FSC">FSC</option>
</select>
<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>
<textarea id="selected" rows="7" readonly></textarea>
<br /><br />
<cfquery name="GetActiveEmps" datasource="tco_associates">
SELECT assoc_userid, assoc_last, assoc_first FROM tco_associates
WHERE assoc_status = 'ACTIVE'
and assoc_last NOT LIKE 'Test%'
and len(assoc_last) > 0
ORDER BY assoc_last
</cfquery>
<select name="EmployeeName" id="EmployeeName" multiple="multiple" required size="8">
<cfoutput query="GetActiveEmps">
<option value="#assoc_userid#">#Trim(assoc_last)#, #Trim(assoc_first)#</option>
</cfoutput>
</select>
<button id="add1" type="button">ADD ALL</button>
<button id="rem1" type="button">REMOVE ALL</button>
<textarea id="selected1" rows="7" readonly></textarea>
<br /><br />
<label for="StartDate">From</label>
<input type='text' name="StartDate" id="StartDate" value="" required/>
<br /><br />
<label for="EndDate">To</label>
<input type='text' name="EndDate" id="EndDate" value="" required/>
<br /><br />
<label for="Format">Format</label>
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
<br /><br />
<input type="submit" name="submit" value="Continue" />
</form>
<script type="text/javascript">
// JS for Showing Chosen Locations in textarea
var opts = document.querySelectorAll('#loc option');
document.getElementById('add').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = true;
}
reflectChange();
});
document.getElementById('rem').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = false;
}
reflectChange();
});
document.getElementById('loc').addEventListener('change', reflectChange);
function reflectChange() {
document.getElementById('selected').value = '';
for ( var i=0; i<opts.length; i++ ) {
if(opts[i].selected)
document.getElementById('selected').value += opts[i].text+'\n';
}
}
// End JS for Showing Chosen Locations in textarea
// JS for Showing Chosen Associates in textarea
var opts1 = document.querySelectorAll('#EmployeeName option');
document.getElementById('add1').addEventListener('click', function() {
for ( var i=0; i<opts1.length; i++ ) {
opts1[i].selected = true;
}
reflectChange1();
});
document.getElementById('rem1').addEventListener('click', function() {
for ( var i=0; i<opts1.length; i++ ) {
opts1[i].selected = false;
}
reflectChange1();
});
document.getElementById('EmployeeName').addEventListener('change', reflectChange1);
function reflectChange1() {
document.getElementById('selected1').value = '';
for ( var i=0; i<opts1.length; i++ ) {
if(opts1[i].selected)
document.getElementById('selected1').value += opts1[i].text+'\n';
}
}
// End JS for Showing Chosen Associates in textarea
</script>
Many of these fields are the same is there a way i can just have one set and show them if either option is chosen and not have two different sets?
This is what I have tried:
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option id ="checklistreports" value="checklistreports" >Checklist Stats</option>
<option id ="locationreports" value="locationreports" >Location Stats</option>
</select>
<script>
$(document).on('change', '#reporttype', function() {
var value = $(this).val();
//var checklistreport = $("#checklistreport");
//var locationreport = $("#locationreport");
var location = $("#location");
var employeelist = $("#employeelist");
var chosendates = $("#chosendates");
var formattype = $("#formattype");
var submitbtn = $("#submitbtn");
if (value == "checklistreports") {
//checklistreport.show();
//locationreport.hide();
location.show();
employeelist.show();
chosendates.show();
formattype.show();
submitbtn.show();
} else if (value == "locationreports") {
//checklistreport.hide();
//locationreport.show();
location.show();
employeelist.hide();
chosendates.show();
formattype.show();
submitbtn.show();
} else {
//checklistreport.hide();
//locationreport.hide();
location.hide();
employeelist.hide();
chosendates.hide();
formattype.hide();
submitbtn.hide();
}
});
</script>
<br /><br />
<!--<div id="locationreport" style="display: none;">-->
<form name="generatereport" method="post" action="_location_queries.cfm">
<!--<div id="checklistreport" style="display: none;">-->
<form name="generatereport" method="post" action="_checklists_queries.cfm">
</form>
<div id="location" style="display: none;">
<select name="Location" id="loc" multiple="multiple" required size="9">
<option value="OPERATIONS">Operations</option>
<option value="CCC">Contact Center</option>
<option value="QA">QA Department</option>
<option value="DS">DeSoto</option>
<option value="PS">Palma Sola</option>
<option value="LWR">Lakewood Ranch</option>
<option value="NR">North River</option>
<option value="SDL">SDL</option>
<option value="FSC">FSC</option>
</select>
<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>
<textarea id="selected" rows="10" readonly></textarea>
</div>
<br /><br />
<div id="employeelist" style="display: none;">
<cfquery name="GetActiveEmps" datasource="tco_associates">
SELECT assoc_userid, assoc_last, assoc_first FROM tco_associates
WHERE assoc_status = 'ACTIVE'
and assoc_last NOT LIKE 'Test%'
and len(assoc_last) > 0
ORDER BY assoc_last
</cfquery>
<select name="EmployeeName" id="EmployeeName" multiple="multiple" required size="9">
<cfoutput query="GetActiveEmps">
<option value="#assoc_userid#">#Trim(assoc_last)#, #Trim(assoc_first)#</option>
</cfoutput>
</select>
<button id="add1" type="button">ADD ALL</button>
<button id="rem1" type="button">REMOVE ALL</button>
<textarea id="selected1" rows="10" readonly></textarea>
</div>
<br /><br />
<div id="chosendates" style="display: none;">
<label for="StartDate">From</label>
<input type='text' name="StartDate" id="StartDate" value="" required/>
<br /><br />
<label for="EndDate">To</label>
<input type='text' name="EndDate" id="EndDate" value="" required/>
</div>
<br /><br />
<div id="formattype" style="display: none;">
<label for="Format">Format</label>
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
</div>
<br /><br />
<div id="submitbtn" style="display: none;">
<input type="submit" name="submit" value="Continue" />
</div>
</form>
<script type="text/javascript">
// JS for Showing Chosen Locations in textarea
var opts = document.querySelectorAll('#loc option');
document.getElementById('add').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = true;
}
reflectChange();
});
document.getElementById('rem').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = false;
}
reflectChange();
});
document.getElementById('loc').addEventListener('change', reflectChange);
function reflectChange() {
document.getElementById('selected').value = '';
for ( var i=0; i<opts.length; i++ ) {
if(opts[i].selected)
document.getElementById('selected').value += opts[i].text+'\n';
}
}
// End JS for Showing Chosen Locations in textarea
// JS for Showing Chosen Associates in textarea
var opts1 = document.querySelectorAll('#EmployeeName option');
document.getElementById('add1').addEventListener('click', function() {
for ( var i=0; i<opts1.length; i++ ) {
opts1[i].selected = true;
}
reflectChange1();
});
document.getElementById('rem1').addEventListener('click', function() {
for ( var i=0; i<opts1.length; i++ ) {
opts1[i].selected = false;
}
reflectChange1();
});
document.getElementById('EmployeeName').addEventListener('change', reflectChange1);
function reflectChange1() {
document.getElementById('selected1').value = '';
for ( var i=0; i<opts1.length; i++ ) {
if(opts1[i].selected)
document.getElementById('selected1').value += opts1[i].text+'\n';
}
}
// End JS for Showing Chosen Associates in textarea
</script>
Not sure how I choose which action for the form. Depending on which report is chosen.
https://jsfiddle.net/bobrierton/o2gxgz9r/10018/

You have a few options here:
Option #1:
Always show the "common" inputs, and only hide the inputs that are conditional upon selection, that way your code is cleaner because you only have to manage the conditional elements (not all of them as you are doing now)
Option #2:
Use CF includes to hold your "common" elements, and "conditional" elements, combining them where necessary to build the correct list.
Option #3:
Use JavaScript to hold your "common" elements, and "conditional" elements, and render the composed list based on your conditions.
var location = $('select[name=Location]');
// This lists could hold anything you want, jQuery elements
// references, strings, etc.
var lists = {
common: ['a', 'b', 'c'],
locationreports: ['location #1', 'location #2'],
checklistreports: ['checklist #1', 'checklist #2']
};
$('#reporttype').on('change', function() {
var value = $(this).val();
// Grab a copy of the common list to begin with
var options = [].concat(lists.common);
// Now combine the conditional options
if (value === "checklistreports" || value === "locationreports") {
options = options.concat(lists[value]);
}
// Now you have a complete list of options to show based
// your conditions, so now you can just show them all, or
// do whatever you want with this new list.
location.empty();
options.forEach(function($element) {
// Do something with the list
location.append('<option value="' + $element + '">' + $element + '</option>');
})
There are lots of other options, but between using and combining includes, or composing objects together you should be able to customize a nice DRY workflow.

Javascript not working to validate a form in HTML

Hi i'm having trouble trying to validate a simple form. I'm not the best at Javascript and am unsure where i'm going wrong. It may be a simple speelling mistake or a complete clash between my code that i can't see. All help is appreciated. Sorry for the big chunk of code, i wanted to make sure you see every detail.
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet"
type = "text/css"
href = "Stylesheet.css" />
<title>Customer details form</title>
<script src="gen_validatorv4.js" type="text/javascript"></script>
<!-- ============================== My failed attempt to try and validate my form with Javascript ============================== -->
<script>
function check() {
document.getElementById("Agree").checked = true;
}
function uncheck() {
document.getElementById("Agree").checked = false;
}
</script>
<center><img src= Images/HorizonHomePageTitle.png ALT="Horizon Bed and Breakfast Title"></center>
</head>
<body>
<script>
window.alert(Please enter data where * is assigned.);
</script>
<center>Budget Rooms<center>
<HR COLOR="blue" WIDTH="60%">
<center>Luxury Rooms<center>
<HR COLOR="blue" WIDTH="60%">
<center>Home<center>
<HR COLOR="blue" WIDTH="60%">
<center>Our privacy policy<center>
<HR COLOR="blue" WIDTH="60%">
<center>Our terms of conditions<center>
<HR COLOR="blue" WIDTH="60%">
<center>Our terms and conditions<center>
<HR COLOR="blue" WIDTH="60%">
<center>Contact us<center>
<form id='CustomerDetailForm' action="">
<!-- ============================== Fieldset 1 - includes personal information of clients ============================== -->
<fieldset>
<legend>Personal Information:</legend>
<hr class="form" />
<label for="Full Name"><strong>Full Name:*</strong></label>
<input name="FullNm" type="text" size="20" id="FN" class="text"/>
<label for="Email"><strong>Email:</strong></label><br/>
<input name="Emil" type="text" size="20" id="EM" class="text"/>
<label for="Age"><strong>Input age if between 18 and 100:</strong></label>
<input name="Ages" type="text" size="20" id="AG" class="text"/>
<label for="select" class="choose"><strong>On what continent do you live?</strong></label>
<select id="select" name="select">
<option value="1">Africa</option>
<option value="2">Europe</option>
<option value="3">Asia</option>
<option value="4">North Amrica</option>
<option value="5">South America</option>
<option value="6">Ausralia</option>
</select>
</fieldset>
<!-- ============================== Fieldset 2 - Includes further optional information from clients to help productivity ============================== -->
<fieldset>
<legend>Questions:</legend>
<hr class="form" />
<label for="select2" class="choose">How long was your stay?</label><br />
<select id="select" name="select2">
<option value="7">Less than one week</option>
<option value="8">More than one week</option>
<option value="9">Months/years</option>
</select>
<label for="select3" class="choose">How many stars would you rate our BnB?</label><br />
<select id="selectCon" name="select3">
<option value="10">One star</option>
<option value="11">Two star</option>
<option value="12">Three star</option>
<option value="13">Four star</option>
<option value="14">Five star</option>
</select>
</fieldset>
<!-- ============================== Fieldset 3 - Holds the comments section, aggreement radio button, submit button and a date button for the client ============================== -->
<fieldset>
<legend>Further commetns:</legend>
<hr class="form" />
<textarea name="message" id="message" cols="20" rows="10"></textarea><br />
<label for="protection" class="spam-protection">Spam check: 1 + 1=</label><br />
<input name="ochrana" type="text" id="protection" class="answer" /><br />
Do you agree to our terms?*<br>
<input type="radio" name="Agreement" id="Agree">Agree<br>
<button onclick="formValidation()">SUBMIT</button>
<script>
function submitFunction() {
alert("Thankyou for your submission");
}
</script>
<script>
function formValidation()
{
var uname = document.registration.FullNm;
var uemail = document.registration.Emil;
var uage = document.registration.Ages;
var ucon = document.registration.select;
{
if(nameinput(FullName,2,25))
{
if(emailval(uemail))
{
if(agenum(ag))
{
if(conselect(con))
{
}
}
}
}
}
}
}
}
return false;
}
function nameinput(uname,2,25)
{
var uname_len = uname.value.length;
if (uname_len == 0 || uname_len >= 2 || uname_len < 25)
{
alert("Full Name is needed. Between "+2+" to "+25" characters.);
uname.focus();
return false;
}
return true;
}
function emailval(uemail,2,25)
{
var uemail_len = uemail.value.length;
if (uemail_len == 0 || uemail_len >= 2 || uemail_len < 30)
{
alert("Email is required.");
uemail.focus();
return false;
}
return true;
}
function agenum(uage,18,100)
{
var uage_len = uage.value.length;
if (uage_len == 0 || uage_len >= 18 || uage_len < 100)
{
alert("Age is required. Between 18 and 100.");
uage.focus();
return false;
}
return true;
}
function conselect(ucon)
{
if(ucon.value == "Default")
{
alert('Select your continent from the list');
ucon.focus();
return false;
}
else
{
return true;
}
}
</script>
</form>
<button type="button"
onclick="document.getElementById('date/time').innerHTML = Date()">
Display date and time.</button>
<p id="date/time"></p>
</fieldset>
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
<title>Customer details form</title>
<script src="gen_validatorv4.js" type="text/javascript"></script>
<!-- ============================== My failed attempt to try and validate my form with Javascript ============================== -->
<script type="text/javascript">
function check() {
document.getElementById("Agree").checked = true;
}
function uncheck() {
document.getElementById("Agree").checked = false;
}
function formValidation() {
var uname = document.getElementById("FullNm");
var uemail = document.getElementById("Email");
var uage = document.getElementById("Ages");
var ucon = document.getElementById("select1");
if (nameInput(uname)) {
if (emailVal(uemail)) {
if (ageNum(uage)) {
if (conSelect(ucon)) {
}
}
}
}
}
function nameInput(uname) {
var uname_len = uname.value.length;
if (uname_len == 0 || uname_len <= 2 || uname_len > 25) {
alert("Full Name is needed. Between 2 to 25 characters.");
uname.focus();
return false;
}
else {
return true;
}
}
function emailVal(uemail) {
var uemail_len = uemail.value.length;
if (uemail_len == 0) {
alert('Email is required');
return false;
}
else {
return true;
}
}
function ageNum(uage) {
var age = uage.value;
if (age == 0 || age < 18 || age > 100) {
alert("Age is required. Between 18 and 100.");
uage.focus();
return false;
}
else
return true;
}
function conSelect(ucon) {
if (ucon.value == 0) {
alert('Select your continent from the list');
ucon.focus();
return false;
}
else {
return true;
}
}
</script>
<center>
<img src="Images/HorizonHomePageTitle.png" alt="Horizon Bed and Breakfast Title"></center>
</head>
<body>
<center>
Budget Rooms<center>
<hr color="blue" width="60%">
<center>
Luxury Rooms<center>
<hr color="blue" width="60%">
<center>
Home<center>
<hr color="blue" width="60%">
<center>
<a href="https://www.visser.com.au/blog/generic-privacy-policy-for-australian-websites/"
target="_blank">Our privacy policy</a><center>
<hr color="blue" width="60%">
<center>
<a href="https://media.termsfeed.com/pdf/terms-and-conditions-template.pdf" target="_blank">
Our terms of conditions</a><center>
<hr color="blue" width="60%">
<center>
<a href=" http://www.blogtyrant.com/best-about-us-pages/" target="_blank">Our terms
and conditions</a><center>
<hr color="blue" width="60%">
<center>
Contact us<center>
<form id='CustomerDetailForm' action="">
<!-- ============================== Fieldset 1 - includes personal information of clients ============================== -->
<fieldset>
<table>
<tr>
<td colspan="2">
<legend>Personal Information:</legend>
</td>
</tr>
<tr>
<td>
<label for="Full Name">
<strong>Full Name:*</strong></label>
</td>
<td>
<input id="FullNm" name="FullNm" type="text" size="20" class="text" />
</td>
</tr>
<tr>
<td>
<label for="Email">
<strong>Email:</strong></label><br />
</td>
<td>
<input id="Email" name="Email" type="text" size="20" class="text" />
</td>
</tr>
<tr>
<td>
<label for="Age">
<strong>Input age if between 18 and 100:</strong></label>
</td>
<td>
<input name="Ages" type="text" size="20" id="Ages" class="text" />
</td>
</tr>
<tr>
<td>
<label for="select" class="choose">
<strong>On what continent do you live?</strong></label>
</td>
<td>
<select id="select1" name="select">
<option value="0">Select</option>
<option value="1">Africa</option>
<option value="2">Europe</option>
<option value="3">Asia</option>
<option value="4">North Amrica</option>
<option value="5">South America</option>
<option value="6">Ausralia</option>
</select>
</td>
</tr>
</table>
</fieldset>
<!-- ============================== Fieldset 2 - Includes further optional information from clients to help productivity ============================== -->
<fieldset>
<legend>Questions:</legend>
<hr class="form" />
<label for="select2" class="choose">
How long was your stay?</label><br />
<select id="select" name="select2">
<option value="7">Less than one week</option>
<option value="8">More than one week</option>
<option value="9">Months/years</option>
</select>
<label for="select3" class="choose">
How many stars would you rate our BnB?</label><br />
<select id="selectCon" name="select3">
<option value="10">One star</option>
<option value="11">Two star</option>
<option value="12">Three star</option>
<option value="13">Four star</option>
<option value="14">Five star</option>
</select>
</fieldset>
<!-- ============================== Fieldset 3 - Holds the comments section, aggreement radio button, submit button and a date button for the client ============================== -->
<fieldset>
<legend>Further commetns:</legend>
<hr class="form" />
<textarea name="message" id="message" cols="20" rows="10"></textarea><br />
<label for="protection" class="spam-protection">
Spam check: 1 + 1=</label><br />
<input name="ochrana" type="text" id="protection" class="answer" /><br />
Do you agree to our terms?*<br>
<input type="radio" name="Agreement" id="Agree">Agree<br>
<button onclick="formValidation();">
SUBMIT</button>
</fieldset>
</form>
<script type="text/javascript">
function submitFunction() {
alert("Thankyou for your submission");
}
</script>
<button type="button" onclick="document.getElementById('date/time').innerHTML = Date()">
Display date and time.</button>
<p id="date/time">
</p>
</body>
</html>

Create a button to call function cal()

I created a form with cal() in it, so people can choose options and then it would calculate the answer depending on what they have chosen.
But I would like to insert a button at the end that would call the result. So when people have chosen their options they would click the submit button and it would give them the right answer depending on their choice.
I haven't been able to do it. I tried an input type button but I don't know how to call the rest.
Here's my code:
<script>
function cal() {
var pl = document.form1.template.value;
var resultat = pl;
document.form1.tresultat.value = resultat;
document.formfin.tresultatfin.value = calfin();
}
function cal2() {
var pl2 = document.form2.envoi.value;
var resultat2 = pl2;
document.form2.tresultat2.value = resultat2;
document.formfin.tresultatfin.value = calfin();
}
function cal3() {
var pl3 = document.form3.article.value;
var tl3 = document.form3.ecrit.value;
var resultat3 = pl3*tl3;
document.form3.tresultat3.value = resultat3;
document.formfin.tresultatfin.value = calfin();
}
function calfin() {
var r1 = form1.tresultat.value;
var r2 = form2.tresultat2.value;
var r3 = form3.tresultat3.value;
return (parseFloat(r1)+(parseFloat(r2)*parseFloat(r3)));
}
</script>
<form name="form1">
<label for="template">Template :</label>
<select name="template" onChange="cal()">
<option value="500">Yes
<option value="800">No
<option value="2900">Maybe
</select>
<input type="hidden" value="0" name="tresultat">
</form>
<br><br><br>
<form name="form2">
<label for="envoi">Quantité d'envoi annuel :</label>
<select name="envoi" onChange="cal2()">
<option value="2">2
<option value="3,6">4
<option value="5,1">6
<option value="6,4">8
<option value="9">12
</select>
<input type="hidden" value="0" name="tresultat2">
</form>
<br><br><br>
<form name="form3">
<label for="article">Articles par infolettre :</label>
<select name="article" onChange="cal3()">
<option value="1">1
<option value="2">2
<option value="3">3
</select>
<label for="ecriture"> Écriture des articles :</label>
<select name="ecrit" onChange="cal3()">
<option value="50">X
<option value="300">Y
<option value="200">Z
</select>
<input type="hidden" value="0" name="tresultat3">
<br><br><br>
<form name="formfin">
<label for="total"> Total :</label>
<input type="text" value="0" name="tresultatfin">
</form>
All my functions seem to work. They calculate what I want, only the button that would call the answer is missing.
Thanks a lot for any help!

Just add a button in your form
<form name="formfin">
<label for="total"> Total :</label>
<input type="text" value="0" name="tresultatfin">
**<input type="button" onclick="cal()" value="Calculer" />**
</form>