Develop Reference

how can i show an edit box on output text on click with save button

how can i edit on output text on click with save button. please if any could help....
$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
let button = `<button name="button-${getVal}">Button for ${getVal}</button>`
$("#output").html($("#output").html() + " " + getVal + button);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<div id="output"></div>
</div>

$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
let button = `<button onclick="Update(this);" name="button">Edit/Update </button>`
//let button = `<button onclick="Update(this);" name="button-${getVal}">Edit/Update for ${getVal}</button>`
$("#output").append('<tr><td><input name="test[]" type="text" value="'+getVal+'" disabled></td><td>' + button +'</td></tr>');
});
});
function Update(CurrentElement)
{
if($(CurrentElement).closest('tr').find('input').attr('disabled')) {
$(CurrentElement).closest('tr').find('input').attr('disabled',false);
} else {
$(CurrentElement).closest('tr').find('input').attr('disabled',true);
}
}
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%;}
td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;}
tr:nth-child(even) { background-color: #dddddd;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<table id="output"><tr><th>Value</th><th>Action</th></tr></table>
</div>

May be this can help you.
$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
$('#output').val(getVal);
});
$("#save").click(function(){
let getValNew = $("#output").val();
$('#inputValue').val(getValNew);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<input type="text" name="text-out" id="output">
<button id="save">Update value</button>
</div>

Changing style.backgroundImage to php $_SESSION

In my .php I have session_start();, and a default avatar for specific users $_SESSION['avatar']. These avatars is displayed with background-image:. I made a JavaScript that changes the background-image to the one uploaded input, but before the user choose to Save this image as their new profile avatar, they have the option to Cancel what they are doing. If they do Cancel I want to change the background back to their avatar, and I was thinking this would work, but it doesn't:
.php
session_start();
$CurrentAvatar = $_SESSION['avatar'];
.html
<div id="avatar"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="imgDivEdit"></div>
<div id="ChangeImg" class="overlay">
<div class="text">Change Image</div>
</div>
</div>
</div>
<form method="POST" enctype="multipart/form-data">
<input id="imageUpload" type="file" name="imageUpload" placeholder="Photo" accept="image/x-png,image/gif,image/jpeg" required="" capture>
<div id="Change" hidden>
<input type="submit" name="Save" id="Save" value="Save" class="btn btn-info Save"/> <input type="button" onclick="Cancel()" value="Cancel" class="btn btn-info Cancel"/> <p style="font-size:11px;">Max size: 1Mb</p>
</div>
</form>
<style>
#imgDivEdit{
width: 125px;
height: 125px;
background-image: url("data:image/jpeg;base64,'.$_SESSION['avatar'].'");
border-radius: 50%;
background-size: cover;
}
</style>
.js
$("#imageUpload").change(function() {
$("#Change").show();
});
function Cancel() {
var CurrentAvatar = "<?php echo $CurrentAvatar;?>";
$("#Change").hide();
document.getElementById("imgDivEdit").style.backgroundImage =
"url(data:image/jpeg;base64,CurrentAvatar)";
}
$("#ChangeImg").click(function(e) {
$("#imageUpload").click();
});
function fasterPreview(uploader) {
if (uploader.files && uploader.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(uploader.files[0]);
reader.onloadend = function(){
document.getElementById("imgDivEdit").style.backgroundImage = "url(" + reader.result + ")";
}
}
}
$("#imageUpload").change(function() {
fasterPreview(this);
});

You overcomplicated with too many functions. Keep it simple. Click Run code snippet bellow bellow.
I rewrote my initial answer, therefore the code bellow is using pure JS and no jQuery.
document.getElementById('imageUpload').addEventListener('change', function(e) {
let preview_div = document.getElementById("imgDivEdit"),
change_div = document.getElementById("Change");
// If there are files, preview them, else go back to initial background
// which is defined inside <style> tags
if (this.files && this.files[0]) {
change_div.style.display = 'block';
let reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onloadend = function(){
preview_div.style.backgroundImage = "url(" + reader.result + ")";
}
} else {
Cancel();
}
});
function Cancel(){
let preview_div = document.getElementById("imgDivEdit"),
change_div = document.getElementById("Change");
change_div.style.display = 'none';
preview_div.style.backgroundImage = '';
}
<div id="avatar">
<div class="container">
<div id="imgDivEdit"></div>
<div id="ChangeImg" class="overlay">
<div class="text">Change Image</div>
</div>
</div>
</div>
<form method="POST" enctype="multipart/form-data">
<input id="imageUpload" type="file" name="imageUpload" placeholder="Photo" accept="image/x-png,image/gif,image/jpeg" required="" capture>
<div id="Change" hidden>
<input type="submit" name="Save" id="Save" value="Save" class="btn btn-info Save"/> <input type="button" onclick="Cancel()" value="Cancel" class="btn btn-info Cancel"/> <p style="font-size:11px;">Max size: 1Mb</p>
</div>
</form>
<style>
#imgDivEdit{
width: 125px;
height: 125px;
background-image: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABLCAIAAABRBSb5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE8SURBVHhe7ddBEsIwDENR7n/pknF+GBjYOHEKFXq7qmBby96Ov+GqilxVkasqclVFrqrIVRW5qiJXVeSqilxVkasqctUvuQUeqhXMrbqvz+mISq0O5bRANIspgajUb91XNeejX7+v0AVOrOKqilxVkasqclVFrqrIVRVdqWr/hGp4TrpMVVoGoqT5qqw960uVZYEoqaBqQ7QTmwJRUk3Vjhd7sCMQJS3dx+aBdA92BKKk1ftYPpBuwIJAlFRwHPsH0mpMD0RJNZdxwkBaitGBKKnsLK54xbsKTAxESbuueeDdMsYFoqTKqg23vOH1LKYMpEnFVTsu+oRfZPDPgTRvS9WGuzZgQd6uqg2n1WHurI1VH7h0GeNmnVH1GVcn8ec1Z1f9IldV5KqKXFWRqypyVUWuqshVFf1N1eO4A7VmgBItY0/QAAAAAElFTkSuQmCC);
border-radius: 50%;
background-size: cover;
}
</style>

JavaScript - How to place asterisk in the right side of the text box?

I want to place asterisk in the right side of the each text box individually when I am submitting the empty form/field. The code is working but asterisk is displaying in the end of the form.
This is my code:
[<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
input { text-align:center; border:2px solid #CCC; }
#wrap { width:400px; height:200px; margin:20px; padding:10px; }
#une { margin-top:10px; }
#reg {margin-top:10px; }
.a13B { color:#F00; }
.cntr { text-align:center; }
</style>
</head>
<body>
<div id="wrap">
<form id="regform" name="registerationform" method="POST">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="300">
<tr>
<td>First Name: </td>
<td class="cntr">
<input type="text" name="fnametxt" size="20"></td>
</tr>
<tr>
<td>Second Name: </td>
<td class="cntr">
<input type="text" name="snametxt" size="20"> </td>
</tr>
<tr>
<td>User Name:</td>
<td class="cntr">
<input type="text" name="unametxt" size="20"> </td>
</tr>
<tr>
<td>Email Address: </td>
<td class="cntr">
<input type="text" name="emailtxt" size="20"> </td>
</tr>
<tr>
<td>Password : </td>
<td class="cntr"><input type="password" name="pwdtxt" size="20"> </td>
</tr>
<tr>
<td>Confirm : </td>
<td class="cntr"><input type="password" name="cpwdtxt" size="20"> </td>
</tr>
</table>
<input id="reg" name="reg" type="button" onclick="regvalidate(this.form)" value="Register Now">
</form>
<div id="une" class="a13B">
</div>
</div>
<!-- end wrap -->
<script type="text/javascript">
var uneObj=document.getElementById("une"); // object ref to msg line
var currentBrdObj;
//
function regvalidate(formObj)
{ uneObj.innerHTML=""; // clear msg line before resubmitting
// gather object ref to input boxes
var allInputs=document.getElementById("regform").getElementsByTagName("input");
// check if value of box is ""
for(var i=0;i<allInputs.length;i++)
{ if(allInputs\[i\].name !="reg") // ignore submit button
{ if(allInputs\[i\].value=="")
{ uneObj.innerHTML=msg\[i\];
if(currentBrdObj){currentBrdObj.style.border="2px solid #CCC"; }
allInputs\[i\].style.border="2px solid #F00";
currentBrdObj=allInputs\[i\];
allInputs\[i\].onclick=function(){ this.style.border="2px solid #CCC"; }
return;
} } }
// check if password and confirm are the same
if((formObj.pwdtxt.value) != (formObj.cpwdtxt.value))
{ uneObj.innerHTML = msg\[msg.length-1\]; // last msg in array
formObj.pwdtxt.value = ""; formObj.pwdtxt.style.border="";
formObj.cpwdtxt.value = ""; formObj.cpwdtxt.style.border="";
return;
}
// all ok so submit form
uneObj.innerHTML = "All ok so submitting form";
formObj.submit();
}
// -----
var msg =\["*","*",
"*","*",
"*","*"\];
msg\[msg.length\]="Passwords must be equal.<br>Please type a password";
//
</script>
</body>
</html>][1]
#PawanKumar
Here is your code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#submitBtn').on('click', function(e) {
debugger;
e.preventDefault();
var fields = document.getElementsByTagName('input');
for (var i = 0; i < fields.length; i++) {
if (fields[i].hasAttribute('required')) {
if (fields[i].value == "") {
fields[i].classList.add('redBorder');
$(fields[i]).after('*');
} else {
fields[i].classList.remove('redBorder');
}
}
}
});
});
</script>
<style>
.redBorder {
border: 2px solid red;
border-radius: 2px;
}
</style>
</head>
<form novalidate>
<input type="text" placeholder="first name" required/><br/><br/>
<input type="text" placeholder="last name" /><br/><br/>
<button id="submitBtn" value="Submit">Submit</button>
</form>
</html>

Use span element to display asterisk at the end of text box. Try this :
<input type="text" id="name"/> <span style="color:red"> * </span>
Hope this solves your requirement.

Why bother with all that mess?
<input type="text" name="fnametxt" required />*
<input type="email" name="emailtxt" required />*
<input type="submit" value="Register" />
JavaScript required: none at all

With the help of jquery after() method, you can achieve this.
$(fields[i]).after("<span class='redColor'>*</span>");
I have also added code to show red border for required input field.
Note: If you use <form> tag, then HTML5 will automatically does the validation and your script will not execute, so to prevent that use novalidate attribute in the form tag or just remove the form tag.
$(document).ready(function() {
$('#submitBtn').on('click', function(e) {
e.preventDefault();
var fields = document.getElementsByTagName('input');
for (var i = 0; i < fields.length; i++) {
if (fields[i].hasAttribute('required')) {
if (fields[i].value == "") {
fields[i].classList.add('redBorder');
$(fields[i]).after("<span class='redColor'>*</span>");
} else {
fields[i].classList.remove('redBorder');
}
}
}
});
});
.redBorder {
border: 2px solid red;
border-radius: 2px;
}
.redColor{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form novalidate>
<input type="text" placeholder="first name" required/><br/><br/>
<input type="text" placeholder="last name" /><br/><br/>
<button id="submitBtn" value="Submit">Submit</button>
</form>

Replicating entries and XML with JavaScript

I'm building a user-submission system where a user can input data and an XML will be exported (which can be read by a different software down the line) but I'm coming across a problem where when I replicate the form for the user to input info, the XML is only taking information from the first.
Any suggestions on how do this?
Personal test code:
HTML:
$(function () {
$('#SubmitButton').click(update);
});
var added = [
'\t\t
<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>
'
].join('\r\n');
var adding = [
'\t\t
<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>
'
].join('\r\n');
function update() {
var variables = {
'channeldescription': $('#channeldescription').val(),
'channelrecordnumber': $('#channelrecordnumber').val(),
'channelhexcolor': $('#channelhexcolor').val(),
'channelbamlink': $('#channelbamlink').val()
};
var newXml = added.replace(/<\?(\w+)\?>/g,
function(match, name) {
return variables[name];
});
var finalXML = newXml;
$('#ResultXml').val(finalXML);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(finalXML))
.attr('download', 'bamdata.xml');
$('#generated').show();
}
$(function () {
$("#CloneForm").click(CloneSection);
});
function CloneSection() {
added = added + '\n' + adding;
$("body").append($("#Entries:first").clone(true));
}
<!DOCTYPE html>
<html>
<head>
<script src="cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<div id="Entries" name="Entries">
<legend class="leftmargin"> Entry </legend>
<form class="form">
<fieldset>
<div class="forminput">
<label for="channel-description" class="formtextarea">Description</label>
<textarea id="channeldescription" name="channeldescription" type="text"></textarea>
</div>
<div class="forminput">
<label for="channel-record_number">Record number</label>
<input id="channelrecordnumber" name="channelrecordnumber"/>
</div>
<div class="forminput">
<label for="channel-hex_color">Hex color</label>
<input id="channelhexcolor" name="channelhexcolor"/>
</div>
<div class="forminput">
<label for="channel-bam_link">RNA-Seq Data/BAM file Repsitory Link</label>
<input id="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
</div>
</fieldset>
</form>
</div>
</body>
<div id="Cloning" class="button_fixed">
<p>
<button id="CloneForm">Add another entry</button>
<button id="SubmitButton">Generate XM</button>
</p>
</div>
<div id="generated" style="display:none">
<h2>bamdata.xml</h2>
Download XML
<textarea id="ResultXml" style="width: 100%; height: 30em" readonly></textarea>
</div>
</div>
</html>
http://www.w3schools.com/code/tryit.asp?filename=F0TWR6VRQZ3J

Change your ids to classes use a loop to get all the entries
<!DOCTYPE html>
<html>
<head>
<script src="cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
.leftmargin {
margin-left: 2%;
}
.form {
background-color: #CBE8BA;
border-radius: 25px;
margin-left: 2%;
margin-right: 2%;
padding-top: 1%;
padding-bottom: 1%;
}
.forminput {
padding-left: 1.5%;
padding-top: 0.5%;
display: flex;
}
.button_fixed {
position: fixed;
margin-left: 2%;
bottom: 1%;
}
</script>
<script>
$(function () {
$('#SubmitButton').click(function(){
var finalXML = '';
$(".Entries").each(function(i,v) {finalXML +=update(finalXML,v)
$('#ResultXml').val(finalXML);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(finalXML))
.attr('download', 'bamdata.xml');
$('#generated').show();
});
});
});
var added = [
'\t\t<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>'
].join('\r\n');
var adding = [
'\t\t<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>'
].join('\r\n');
function update(finalXML,v) {
var variables = {
'channeldescription': $(v).find('.channeldescription').val(),
'channelrecordnumber': $(v).find('.channelrecordnumber').val(),
'channelhexcolor': $(v).find('.channelhexcolor').val(),
'channelbamlink': $(v).find('.channelbamlink').val()
};
var newXml = added.replace(/<\?(\w+)\?>/g,
function(match, name) {
return variables[name];
});
return newXml;
}
$(function () {
$("#CloneForm").click(CloneSection);
});
function CloneSection() {
$("body").append($(".Entries:first").clone(true));
}
</script>
<body>
<div class="Entries" name="Entries">
<legend class="leftmargin"> Entry </legend>
<form class="form">
<fieldset>
<div class="forminput">
<label for="channel-description" class="formtextarea">Description</label>
<textarea class="channeldescription" name="channeldescription" type="text"></textarea>
</div>
<div class="forminput">
<label for="channel-record_number">Record number</label>
<input class="channelrecordnumber" name="channelrecordnumber"/>
</div>
<div class="forminput">
<label for="channel-hex_color">Hex color</label>
<input class="channelhexcolor" name="channelhexcolor"/>
</div>
<div class="forminput">
<label for="channel-bam_link">BAM file Repsitory Link</label>
<input class="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
</div>
</fieldset>
</form>
</div>
</body>
<div id="Cloning" class="button_fixed">
<p>
<button id="CloneForm">Add another entry</button>
<button id="SubmitButton">Generate XM</button>
</p>
</div>
<div id="generated" style="display:none">
<h2>bamdata.xml</h2>
Download XML
<textarea id="ResultXml" style="width: 100%; height: 30em" readonly="readonly"></textarea>
</div>
</div>
</html>
demo:http://www.w3schools.com/code/tryit.asp?filename=F0TXIUR1CYE4

How to get the totals to display in a calculator?

so i have made a calculator for my work that sees how much we could save potential clients. All works well, but i cant get the total fee's for all of the boxes to appear. I just don't think i know the right process to get all the "total monthly savings" to add up at the end.
Here is a JSFiddle: https://jsfiddle.net/snn5vhg2/
Here is the page:http://176.32.230.46/sarahmcdonald.com/files/index.html
And here is the code:
<html>
<head>
<title>First Data Calculator</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body{
background-color:#e5e5e5;
}
#container{
font-family:Tahoma, Geneva, sans-serif;
}
#main{
margin-bottom:50px;
font-size:3em;
text-decoration:underline;
}
#VISABOX{
display:inline-block;
width:238px;
background-color:#fce4d1;
padding:15px;
border-radius:6px;
height:238px;
border:#c9c9c9 solid 1px;
}
.boxes{
display:inline-block;
margin-left:20px;
vertical-align:top;
width:238px;
background-color:#fce4d1;
padding:15px;
height:238px;
border-radius:6px;
border:#c9c9c9 solid 1px;
}
.titles{
margin:0 0 0 8px;
}
.inputs{
margin:7px;
height:25px;
width:200px;
}
.words{
margin:7px 0 0 8px ;
}
.calculators{
margin:7px;
height:25px;
border-radius:5px;
background-color:#F3F3F3;
}
#totals{
margin:30px 0 0 5px;
font-size:1.3em;
}
#finishButton{
font-size:1.3em;
border-radius:7px;
background-color:#F3F3F3;
}
</style>
</head>
<body>
<div id="container">
<h1 id="main">Fee Calculator</h1>
<div id="VISABOX" >
<h4 id="VISA" class="titles">Visa</h4>
<input id="vVol" class="inputs" type="text" placeholder="Visa Volume..."/><br>
<input id="vFees" class="inputs" type="text" placeholder="Visa Fees..."/><br>
<button id="vCalc" class="calculators"> Calculate </button>
<p id="vEMDR" class="words">EMDR=<span id="vEMDRSPAN"></span></p>
<p id="vMonthly" class="words">Monthly Savings=<span id="vMonthlySpan"></span></p>
<p id="vYearly" class="words">Yearly Savings=<span id="vYearlySpan"></span></p>
<p id="vFive" class="words">Five Year Savings=<span id="vFiveSpan"></span></p>
</div>
<div id="MCBOX" class="boxes">
<h4 id="MC" class="titles">MasterCard</h4>
<input id="mcVol" class="inputs" type="text" placeholder="MC Volume..."/><br>
<input id="mcFees" class="inputs" type="text" placeholder="MC Fees..."/><br>
<button id="mcCalc" class="calculators"> Calculate </button>
<p id="mcEMDR" class="words">EMDR=<span id="mcEMDRSPAN"></span></p>
<p id="mcMonthly" class="words">Monthly Savings=<span id="mcMonthlySpan"></span></p>
<p id="mcYearly" class="words">Yearly Savings=<span id="mcYearlySpan"></span></p>
<p id="mcFive" class="words">Five Year Savings=<span id="mcFiveSpan"></span></p>
</div>
<div id="IDPBOX" class="boxes">
<h4 id="IDP" class="titles">Interac</h4>
<input id="idpTrans" type="text" class="inputs" placeholder="# of Trans..."/><br>
<input id="idpFees" type="text" class="inputs" placeholder="IDP Fees..."/><br>
<button id="idpCalc" class="calculators"> Calculate </button>
<p id="idpPerTran" class="words">Per Tran=<span id="idpPerTranSpan"></span></p>
<p id="idpMonthly" class="words">Monthly Savings=<span id="idpMonthlySpan"></span></p>
<p id="idpYearly" class="words">Yearly Savings=<span id="idpYearlySpan"></span></p>
<p id="idpFive" class="words">Five Year Savings=<span id="idpFiveSpan"></span></p>
</div>
<div id="OCBOX" class="boxes">
<h4 id="OC" class="titles"> Other Charges </h4>
<input id="otherCharges" type="text" class="inputs" placeholder="Total Other Charges..." /><br>
<input id="ourCharges" type="text" class="inputs" placeholder="Our Other Charges..." /><br>
<button id="ocCalc" class="calculators"> Calculate </button>
<p id="ocMonthly" class="words"> Monthly Savings=<span id="ocMonthlySpan"></span></p>
<p id="ocYearly" class="words">Yearly Savings=<span id="ocYearlySpan"></span></p>
<p id="ocFive" class="words">Five Year Savings=<span id="ocFiveSpan"></span></p>
</div>
<div id="totals">
<button id="finishButton"> Finish </button>
<p id="monthlyTotal"> Monthly Total Savings=<span id="monthlyTotalSpan"></span></p>
<p id="yearlyTotal"> Total Yearly Savings=</p>
</div>
<script type="text/javascript">
document.getElementById("vCalc").onclick=function(){
var visaVol=document.getElementById("vVol").value;
var visaFees=document.getElementById("vFees").value;
var visaEMDR;
visaEMDR=(visaFees/visaVol*100).toFixed(2);
var visaMonthly=(visaFees-(visaVol*.0171)).toFixed(2);
var visaYearly=(visaMonthly*12).toFixed(2);
var visaFive=(visaYearly*5).toFixed(2);
document.getElementById("vMonthlySpan").innerHTML=" "+visaMonthly+"$";
document.getElementById("vYearlySpan").innerHTML=" "+visaYearly+"$";
document.getElementById("vFiveSpan").innerHTML=" "+visaFive+"$";
document.getElementById("vEMDRSPAN").innerHTML=" "+visaEMDR+"%";
}
document.getElementById("mcCalc").onclick=function(){
var mcVol=document.getElementById("mcVol").value;
var mcFees=document.getElementById("mcFees").value;
var mcEMDR=(mcFees/mcVol*100).toFixed(2);
var mcMonthly=(mcFees-(mcVol*.0178)).toFixed(2);
var mcYearly=(mcMonthly*12).toFixed(2);
var mcFive=(mcYearly*5).toFixed(2);
document.getElementById("mcMonthlySpan").innerHTML=" "+mcMonthly+"$";
document.getElementById("mcYearlySpan").innerHTML=" "+mcYearly+"$";
document.getElementById("mcFiveSpan").innerHTML=" "+mcFive+"$";
document.getElementById("mcEMDRSPAN").innerHTML=" "+mcEMDR+"%";
}
document.getElementById("idpCalc").onclick=function(){
var debitTrans=document.getElementById("idpTrans").value;
var debitFees=document.getElementById("idpFees").value;
var perTran=(debitFees/debitTrans).toFixed(2);
var debitMonthly=(debitFees-(debitTrans*.04)).toFixed(2);
var debitYearly=(debitMonthly*12).toFixed(2);
var debitFive=(debitYearly*5).toFixed(2);
document.getElementById("idpPerTranSpan").innerHTML=" "+perTran+"$";
document.getElementById("idpMonthlySpan").innerHTML=" "+debitMonthly+"$";
document.getElementById("idpYearlySpan").innerHTML=" "+debitYearly+"$";
document.getElementById("idpFiveSpan").innerHTML=" "+debitFive+"$";
}
document.getElementById("ocCalc").onclick=function(){
var otherFees=document.getElementById("otherCharges").value;
var ourFees=document.getElementById("ourCharges").value;
var ocMonthlySav=(otherFees-ourFees).toFixed(2);
var ocYearlySav=(ocMonthlySav*12).toFixed(2);
var ocFiveSav=(ocYearlySav*5).toFixed(2);
document.getElementById("ocMonthlySpan").innerHTML=" "+ocMonthlySav+"$";
document.getElementById("ocYearlySpan").innerHTML=" "+ocYearlySav+"$";
document.getElementById("ocFiveSpan").innerHTML=" "+ocFiveSav+"$";
}
document.getElementById("finishButton").onclick=function(){
var monTotal=
document.getElementById("monthlyTotalSpan").innerHTML=" "+monTotal+"$";
}
</script>

It appears that you just quit when you are 90% finished (hopefully not).
But to finish up you needed to grab the values from the xxMonthlySpan and xxYearlySpan tags, convert them to floats, add them together, and then change the innerHTML of the span tags in the end.
You also did not have <span id="yearlyTotalSpan"></span> so I added that in just to be consistent with everything else you had.
I also rounded to two decimal places for the year total.
Here is a fiddle: https://jsfiddle.net/qkx8h3hy/
Comment if you have any questions.