Hi I have these caculator code, I want to hide the result at the bottom everytime I clicked the "calculate" button on the top, how can I do that? below is my code:
when I clicked on the calculate it should give you result of first box and all the result of the rest box, then you can still change the value from box 2 to box 4, then it will show the final result at the bottom, the issue here is when I go back to the box1 and re-input the value and calculate it, the result at the bottom remain old result, how can I hide it when I re-click the button?? full code see here: https://jsfiddle.net/jackwei/w42yocgv/248/
function calculation() {
var firstValue = document.getElementById("firstValue").value;
var secondValue = document.getElementById("secondValue").value;
var first1Value = document.getElementById("first1Value").value;
var second2Value = document.getElementById("second2Value").value;
var first3Value = document.getElementById("first3Value").value;
var first4Value = document.getElementById("first4Value").value;
var result = document.getElementById("result");
var result2 = document.getElementById("result2");
var result3 = document.getElementById("result3");
var result4 = document.getElementById("result4");
var resultall = document.getElementById("resultall");
var calc = firstValue *3 + secondValue *7 + first1Value *1 + second2Value *3;
var calc2 = (firstValue*1 +first1Value*1)*3 + (secondValue*1+second2Value*1)*5;
var calc3 = firstValue*1 + secondValue*1 + first1Value*1 + second2Value*1;
var calc4 = firstValue*1 + secondValue*1 + first1Value*1 + second2Value*1;;
result.textContent = "Template Build " + calc + " Hours";
result2.textContent = calc2 + " Hours";
result3.textContent = calc3 + " Hours";
result4.textContent = calc4 + " Hours";
resultall.textContent = " Campaign Management " + calc2 + " Hours," + " Deployment " + calc3 + " Hours,"+ " Ongoing " + calc4 + " Hours";
document.getElementById('first3Value').value=parseFloat(firstValue) + parseFloat(first1Value);
document.getElementById('first4Value').value=parseFloat(secondValue) + parseFloat(second2Value);
document.getElementById('first5Value').value=parseFloat(firstValue) + parseFloat(secondValue)+ parseFloat(first1Value)+ parseFloat(second2Value);
document.getElementById('first6Value').value=parseFloat(firstValue) + parseFloat(secondValue)+ parseFloat(first1Value)+ parseFloat(second2Value);
}
$('#first3Value,#first4Value,#first5Value,#first6Value').keyup(function(){ // run anytime the value changes
var first3Value = Number($('#first3Value').val()); // get value of field
var first4Value = Number($('#first4Value').val());
var first5Value = Number($('#first5Value').val());
var first6Value = Number($('#first6Value').val()); // convert it to a floa
$('#result2').html(first3Value*3 + first4Value*5 + "Hours" ); // add them and output it
$('#result3').html(first5Value*1 + "Hours");
$('#result4').html(first6Value*1 + "Hours");
$('#resultbox2').html(first3Value*3 + first4Value*5 + "Hours" );
$('#resultbox3').html(first5Value*1 + "Hours" );
$('#resultbox4').html(first6Value*1 + "Hours" );
});
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
#wrap{
width:400px;
margin:0 auto;
text-align:left;
margin-top:8px;
padding:5px;
padding-bottom:15px;
background:#fff;
font-family:AvenirLTStd, Arial, Helvetica, sans-serif;
font-size:13px;
line-height:16px;
}
#wrap .cont_details fieldset,.cont_order fieldset{
margin:10px;
padding:20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#wrap legend{
font-size:16px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-weight:bold;
font-style:italic;
padding-bottom:10px;
}
#wrap .cont_details input{
margin-bottom:10px;
color:#000;
}
#wrap .input1:hover,.input1:active{
}
#wrap label{
display:block;
font-size:12px;
color:#000;
font-weight:bold;
}
#wrap label.inlinelabel
{
display:inline;
}
#wrap .cont_order input{
margin-bottom:5px;
}
#wrap .cont_order p{
padding-top:5px;
}
#wrap input[type="radio"]
{
margin-top:8px;
margin-bottom:8px;
}
#wrap input[type="text"]:hover,
#wrap input[type="text"]:active {
background-color: #FAF398;
}
#wrap input#submit
{
margin:10px;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}
.totalPrice
{
padding:10px;
font-weight:bold;
background-color:#ff0;
}
#wrap label.radiolabel
{
font-weight:normal;
display:inline;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Cake Form</title>
<link href="http://files.javascript-coder.com/calculation/styles/cakeform.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body onload="hideTotal()">
<div id="wrap">
<div>
<div class="cont_order">
<fieldset>
<legend>Template Build</legend>
<label >New Template Build</label><br><input type="number" id="firstValue" name="firstValue" onclick="calculateTotal()" /> x Simple (3h)<br>
<input type="number" id="secondValue" name="secondValue" onclick="calculateTotal()" />
x Medium (7h)<br>
<br/>
<label >Adaptions of new templates</label>
<br>
<input type="text" id="first1Value" name="first1Value" onclick="calculateTotal()" />
x Simple (1h)<br>
<input type="text" id="second2Value" name="second2Value" onclick="calculateTotal()" />
x Medium (3h)<br/>
<br/>
<p>
<input type="button" id="calc" onclick="calculation()" value="Calculate">
</p>
<div id="result" class="wrap totalPrice"> </div>
</p>
<div id="resultall" class="wrap totalPrice">
</div>
</fieldset>
</div>
<div class="cont_order">
<fieldset>
<legend>Campaign Management</legend>
<label >Campaign Integration</label><br>
<input type="number" id="first3Value" name="first3Value" onclick="calculateTotal()" class="cm">
x Simple (3h)<br>
<p>
<input type="number" id="first4Value" name="first4Value" onclick="calculateTotal()" class="cm"> x Medium (5h)
</p>
<div id="" class="wrap totalPrice"> Total: <span id="result2">
</span></div>
</fieldset>
</div>
<div class="cont_order">
<fieldset>
<legend>Deployment</legend>
<label >Campaign Deployment</label><br>
<input type="number" id="first5Value" name="first5Value" onclick="calculateTotal()" /> x Per section Per Run<br>
<div id="" class="wrap totalPrice"> Total: <span id="result3">
</fieldset>
</div>
<div class="cont_order">
<fieldset>
<legend>Ongoing</legend>
<label >
Continuous Run (non-automated) + Deployment</label><br><input type="text" id="first6Value" name="first6Value" value="0" onclick="calculateTotal()" />
x Per section Per Run<br>
<div id="" class="wrap totalPrice"> Total: <span id="result4">
</fieldset>
</div>
</p>
<div id="" class="wrap totalPrice">
Campaign Management <span id="resultbox2"></span><br> Deployment <span id="resultbox3"></span><br> Ongoing <span id="resultbox4"></span><br> </div>
</div>
</div><!--End of wrap-->
</body>
</html>
Related
This question already has answers here:
How to force JS to do math instead of putting two strings together [duplicate]
(11 answers)
Closed 1 year ago.
I get 4.5.525 when adding in javascript
this is the answer i have to get 4.5 + .525 = 5.025 but instead of this i get 4.5.525
here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swinburnes Test Of Dc Shunt Motor</title>
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 15px;
background: var(--primary-color);
transition: background 2s;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div style="text-align: center;" class="container col-xs-12 col-md-4">
<h1 style="font-size: 2em;">Swinburnes Calculator (Motor) <span><button class="btn btn-dark badge badge-dark "
style=" margin-left: 101px;
font-size: 12px;" onclick="myFunction()">Dark mode</button></span> </h1>
<div class="inpSection">
<div class="amt">
<label for="VL">VL</label>
<input type="number" name="VL" id="VL" placeholder="Enter VL Value In Name Plate"
style="margin: 2%; margin-left: 6%;">
</div>
<div class="time">
<label for="IL">IL</label>
<input type="number" name="IL" id="IL" placeholder="Enter IL Value"
style="margin: 2%;margin-left: 7%; ">
</div>
<div class="rate">
<label for="Ish">Ish</label>
<input type="number" name="Ish" id="Ish" placeholder="Enter Ish Value"
style="margin: 2%;margin-left: 5%;">
</div>
<div class="rate">
<label for="Ra">Ra</label>
<input type="number" name="Ra" id="Ra" placeholder="Enter Ra value" style="margin: 2%;margin-left: 6%;">
</div>
<div class="rate">
<label for="Load">Load</label>
<input type="number" name="Load" id="Load" placeholder="Enter Load value In Name Plate" style="margin: 2%;">
</div>
<div class="rate">
<label for="noLoad">VL</label>
<input type="number" name="noLoad" id="noLoad" placeholder="Enter NoLoad VL value" style ="margin:2%; margin-left: 6%">
</div>
<div class="button">
<button class="btn btn-success" onclick="Calculate()" style="margin: 2%;
text-align: center;
;
margin-top: 5%;">Calculate</button>
<button class= "btn btn-danger" style="margin: 2%;
text-align: center;
;
margin-top: 5%;" onclick="refreshPage()">Reset All</button>
</div>
<script>
function refreshPage(){
window. location. reload();
}
</script>
<div class="result" style="margin-top: 30px;">
<h3 id="si"></h3>
<h3 id="wv"></h3>
<h3 id="Ip"></h3>
<h3 id="Wc"></h3>
<h3 id="toloss"></h3>
<h3 id="Oppower"></h3>
<h3 id="Eff"></h3>
</div>
</div>
<hr style="height:1px;border:none;color:#333;background-color:#333;" />
<p style=" text-align: center;
margin-top: 30px;">Copyright ©️ 2021 AJB</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
<script>
function Calculate() {
let vl = document.getElementById('VL').value;
let il = document.getElementById('IL').value;
let ish = document.getElementById('Ish').value;
let ra = document.getElementById('Ra').value;
let ld = document.getElementById('Load').value;
let vlo = document.getElementById('noLoad').value;
let SI = (vl * ld)
document.getElementById('si').innerHTML = "O/P : " + SI;
var Iao = (ld+ish);
console.log(Iao)
var WV = (Math.pow(Iao, 2) * ra)
document.getElementById('wv').innerHTML = "Wv : " + WV;
let IP = (vl * il)
document.getElementById('Ip').innerHTML = "No Load I/P Power : " + IP;
var ip21 = (vl*il)
var WcIa = (il - ish)
var WvIa = (Math.pow(WcIa, 2) * ra)
var Wc = (IP - WvIa)
document.getElementById('Wc').innerHTML = "Wc : " + Wc;
var TLoss = (WV + Wc)
document.getElementById('toloss').innerHTML = " Total Loss : " + TLoss;
var OP = (SI + TLoss)
document.getElementById('Oppower').innerHTML = "Input Power : " + OP;
var ef = (SI / OP) * 100
document.getElementById('Eff').innerHTML = " η % : " + ef;
}
</script>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</html>
when i add IL = 4.5 and Ish = .525 it gives 4.5.525 in the console what to do ?
but the orginal answer it should show is 5.025
rewrite the code and comment it below so i can understand more clearly
when i write same in the javascript it gives me the correct answer
Try something like this:
var lat = (parseFloat(document.getElementById('VL').dataset.value));
That's how to save in variable 'var' the document.getElementById('VL') values and make them float, so now it won't see it as a string and hopefully it will let you sum them and get the number you need.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am a first year programming student, so I am sorry if this questions seems a little nooby.
I have created a Calorie Calculator and am having an issue displaying the end result (how many calories they need to take in/let out to reach their desired weight). Also, I apologize for the inline CSS, please ignore it. Any help would be greatly appreciated!
EDIT: Added HTML,JS snippet (sorry about that!). I am still having issues with getting the end result to display.
//var weight = document.getElementById("weight").value;
function getCalc() {
var weight = document.querySelector('.weight');
//var height = document.getElementById("height").value;
var height = document.querySelector('.height');
//var age = document.getElementById("age").value;
var age = document.querySelector('.weight');
//var goalweight = document.getElementById("goalweight").value;
var goalweight = document.querySelector('.goalweight');
//var gender = document.getElementById("gender").value;
var gender = document.querySelector('.gender');
//var activity = document.getElementById("activity").value;
var activity = document.querySelector('.activity');
var BMR = " ";
var BMRGoal = " ";
var dailyCalories = " ";
var goalCalories = " ";
if (gender == "male") {
BMR = 66.47+(6.24*weight)+(12.7*height)-(6.755*age);
BMRGoal = 66.47+(6.24*goalweight)+(12.7*height)-(6.755*age);
} else {
BMR = 655.1+(4.35*weight)+(4.7*height)-(4.7*age);
BMRGoal = 66.47+(6.24*goalweight)+(12.7*height)-(6.755*age);
}
if (activity == "none") {
dailyCalories = BMR*1.2;
goalCalories = BMRGoal*1.2;
} else if (activity == 'light') {
dailyCalories = BMR*1.375;
goalCalories = BMRGoal*1.2;
} else if (activity == 'moderate') {
dailyCalories = BMR*1.55;
goalCalories = BMRGoal*1.2;
} else if (activity == 'heavy') {
dailyCalories = BMR*1.725;
goalCalories = BMRGoal*1.2;
} else if (activity == 'xheavy') {
dailyCalories = BMR*1.9;
goalCalories = BMRGoal*1.2;
}
document.getElementByClassName('requireddailycals').innerHTML = 'Your current daily calorie intake is ' + dailyCalories + '. In order to reach your desired weight goal, you will need to increase your caloric intake to ' + goalCalories + '.';
document.getElementById("requireddailycals").value = dailyCalories(goalCalories);
}
<!DOCTYPE html>
<html>
<head>
<title>Nutrition Calculator</title>
<style>
body {
background-color:rgba(102,143,74, 0.3);
}
a {
text-decoration:none;
}
.calcalc_box {
position:absolute;
margin:auto;
top:35vh;
transform:translateY(-35%);
left:50vw;
transform:translateX(-50%);
border:0.2vw solid #a6b727;
text-align:center;
padding:5vw;
font-family:Arial;
box-shadow:0.5vw 0.5vh 0 #a6b727;
}
.calcalc_box > h1 {
font-family:Lucida Console;
color:#316886;
font-size:3vw;
}
.calcalc_box > h2 {
color:#a6b727;
margin:5vh 0 5vh 0;
}
.calcalc_logo {
margin:auto;
}
.calcalc_button {
background-color:#a6b727;
color:black;
padding:0.8vw;
font-size:1.3vw;
font-weight:bold;
border:0.2vw solid #a6b727;
margin:0.5vw;
display:inline-block;
border-radius:0.3vw;
}
.calcalc_button:hover {
background-color:rgba(102,143,74, 0.3);
}
label {
display:inline;
color:#a6b727;
font-weight:bold;
}
.the_calculator {
border:0.2vw solid #a6b727;
text-align:left;
padding:0.5vw;
}
.calculator_section {
display:inline-block;
margin:1vw 0 1vw 0;
width:100%;
}
.calculator_section > label {
font-weight:bold;
padding:0.5vw;
}
.calculator_input {
padding:0.5vw;
margin-bottom:2vw;
}
.calcalc_back {
color:#a6b727;
font-weight:bold;
padding:2vw;
}
</style>
</head>
<body>
<div class="calcalc_box">
<img src="calcalc.png" width="250" height="250" />
<h1>Cal-Calc</h1>
<h2>Nutrition Calculator</h2>
<form class="the_calculator">
<div class="calculator_section">
<label for="gender">Gender</label>
Male<input type="radio" name="gender" value="Male" id="gender">
Female<input type="radio" name="gender" value="Female" id="gender">
</div>
<label for="age">Age : </label><input type="number" name="age" class="calculator_input" id="age"><br>
<label for="height">Height (in inches) : </label><input type="number" name="height" class="calculator_input" id="height"><br>
<label for="weight">Weight (in pounds) : </label><input type="number" name="weight" class="calculator_input" id="weight"><br>
<label for="goalweight">Goal Weight : </label><input type="number" name="weight" class="calculator_input" id="goalweight"><br>
<label for="activity">Activity Level</label>
Little to no exercise <input type="radio" name="activity" value="none" id="activity">
Light Exercise (walks, runs) <input type="radio" name="activity" value="light" id="activity">
Moderate Exercise (sports) <input type="radio" name="activity" value="moderate" id="activity">
Heavy Exercise (daily consistent routine) <input type="radio" name="activity" value="heavy" id="activity">
Extra Heavy Exercise (twice daily consistent routine) <input type="radio" name="activity" value="xheavy" id="activity">
<br><br>
<button class="calcalc_button" onClick="getCalc()" style="margin-left:13vw;" >Calculate
</button>
<span class= "requireddailycals"></span>
</form>
<span class="calcalc_back"><br><br><br>click here to go back</span>
</div>
<script src="./project.js">
</script>
</body>
</html>
In your HTML you have:
<span class= "requireddailycals"/span>
Try instead:
<span class= "requireddailycals"></span>
Then change the JS this way:
document.getElementsByClassName("requireddailycals")[0].innerHTML = 'Your current daily calorie intake is ' + dailyCalories + '. In order to reach your desired weight goal, you will need to increase your caloric intake to ' + goalCalories + '.';
or better, get the element by id
NB: try to use the JS/HTML/CSS snipped to allow use to run your code more easily.
I used an eventListener() with preventDefault(). You can also add a type="button" to your calculate button if you continue to use an inline HTML event attributes but that is not recommended.
I also changed your querySelector because you were attempting to select an element by id, and you were using a class as a selector.
You also had a minor typo, which did not break your code.
This will solve your problem:
document.querySelector('.calcalc_button').addEventListener('click', function(e) {
e.preventDefault();
var weight = document.getElementById('weight').value;
var height = document.getElementById("height").value;
var age = document.getElementById("age").value;
var goalweight = document.getElementById("goalweight").value;
var gender = document.getElementById("gender").value;
var activity = document.getElementById("activity").value;
var BMR = " ";
var BMRGoal = " ";
var dailyCalories = " ";
var goalCalories = " ";
if (gender == "male") {
BMR = 66.47+(6.24*weight)+(12.7*height)-(6.755*age);
BMRGoal = 66.47+(6.24*goalweight)+(12.7*height)-(6.755*age);
} else {
BMR = 655.1+(4.35*weight)+(4.7*height)-(4.7*age);
BMRGoal = 66.47+(6.24*goalweight)+(12.7*height)-(6.755*age);
}
if (activity == "none") {
dailyCalories = BMR*1.2;
goalCalories = BMRGoal*1.2;
} else if (activity == 'light') {
dailyCalories = BMR*1.375;
goalCalories = BMRGoal*1.2;
} else if (activity == 'moderate') {
dailyCalories = BMR*1.55;
goalCalories = BMRGoal*1.2;
} else if (activity == 'heavy') {
dailyCalories = BMR*1.725;
goalCalories = BMRGoal*1.2;
} else if (activity == 'xheavy') {
dailyCalories = BMR*1.9;
goalCalories = BMRGoal*1.2;
}
document.querySelector('.requireddailycals').innerHTML = 'Your current daily calorie intake is ' + dailyCalories + '. In order to reach your desired weight goal, you will need to increase your caloric intake to ' + goalCalories + '.';
//document.getElementById("requireddailycals").value = dailyCalories(goalCalories);
})
//var weight = document.getElementById("weight").value;
function getCalc() {
preventDefault();
console.log("asd");
}
body {
background-color:rgba(102,143,74, 0.3);
}
a {
text-decoration:none;
}
.calcalc_box {
position:absolute;
margin:auto;
top:35vh;
transform:translateY(-35%);
left:50vw;
transform:translateX(-50%);
border:0.2vw solid #a6b727;
text-align:center;
padding:5vw;
font-family:Arial;
box-shadow:0.5vw 0.5vh 0 #a6b727;
}
.calcalc_box > h1 {
font-family:Lucida Console;
color:#316886;
font-size:3vw;
}
.calcalc_box > h2 {
color:#a6b727;
margin:5vh 0 5vh 0;
}
.calcalc_logo {
margin:auto;
}
.calcalc_button {
background-color:#a6b727;
color:black;
padding:0.8vw;
font-size:1.3vw;
font-weight:bold;
border:0.2vw solid #a6b727;
margin:0.5vw;
display:inline-block;
border-radius:0.3vw;
}
.calcalc_button:hover {
background-color:rgba(102,143,74, 0.3);
}
label {
display:inline;
color:#a6b727;
font-weight:bold;
}
.the_calculator {
border:0.2vw solid #a6b727;
text-align:left;
padding:0.5vw;
}
.calculator_section {
display:inline-block;
margin:1vw 0 1vw 0;
width:100%;
}
.calculator_section > label {
font-weight:bold;
padding:0.5vw;
}
.calculator_input {
padding:0.5vw;
margin-bottom:2vw;
}
.calcalc_back {
color:#a6b727;
font-weight:bold;
padding:2vw;
}
<div class="calcalc_box">
<img src="https://placekitten.com/200/300" width="250" height="250" />
<h1>Cal-Calc</h1>
<h2>Nutrition Calculator</h2>
<form class="the_calculator">
<div class="calculator_section">
<label for="gender">Gender</label>
Male<input type="radio" name="gender" value="Male" id="gender">
Female<input type="radio" name="gender" value="Female" id="gender">
</div>
<label for="age">Age : </label><input type="number" name="age" class="calculator_input" id="age"><br>
<label for="height">Height (in inches) : </label><input type="number" name="height" class="calculator_input" id="height"><br>
<label for="weight">Weight (in pounds) : </label><input type="number" name="weight" class="calculator_input" id="weight"><br>
<label for="goalweight">Goal Weight : </label><input type="number" name="weight" class="calculator_input" id="goalweight"><br>
<label for="activity">Activity Level</label>
Little to no exercise <input type="radio" name="activity" value="none" id="activity">
Light Exercise (walks, runs) <input type="radio" name="activity" value="light" id="activity">
Moderate Exercise (sports) <input type="radio" name="activity" value="moderate" id="activity">
Heavy Exercise (daily consistent routine) <input type="radio" name="activity" value="heavy" id="activity">
Extra Heavy Exercise (twice daily consistent routine) <input type="radio" name="activity" value="xheavy" id="activity">
<br><br>
<button class="calcalc_button" style="margin-left:13vw;" >Calculate</button>
<span class= "requireddailycals"></span>
</form>
<span class="calcalc_back"><br><br><br>click here to go back</span>
</div>
I found this script online and it is very helpful. This script creates a new file and saves the form.
In addition to this form, I added HTML table to the same HTML script. How do I download the HTML table along with the other contents of this index.html file into the same text file?
See the code snippet below:
// Current date - http://stackoverflow.com/a/4929629/412329
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = yyyy+'-'+mm+'-'+dd;
function saveFormAsTextFile()
// Based on https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/
{
var textToSave =
'---\n'+
'title: ' + document.getElementById('title').value + '\n' + // =title
'location: ' + document.getElementById('location').value + '\n' + // =location
'date: ' + today + '\n' + // =date - automatically puts today's date =todo: fix bug allowing going over 60 seconds, i.e. 61 seconds
'senses: ' + document.getElementById('senses').value + '\n' + // =senses - select menu
'tags: ' + '\n- ' + document.getElementById('tags').value.replace(/,\s/g, "\n- ") + '\n' +
// =tags
// The replace() bit above converts 'tag,tag' to '- tag\n- tag\n' with regular expressions
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
'---\n' + '\n' +
document.getElementById('content').value // =content;
var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = document.getElementById("filename").value;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}
body {font-family:verdana, sans-serif; color:#666; background:#fafafa; padding:20px; text-align:center;}
#page {text-align:left; max-width:600px; margin:0 auto;}
h1 {font-size:16px; font-weight:normal; text-align:center;}
label {font-size:16px;}
label i {font-style:normal; display:inline-block; text-align:right; width:100px;}
label textarea {vertical-align:top;}
button {margin-left:105px; padding:5px; margin-top:5px; font-size:16px;}
input, textarea {width:400px; font-size:16px; font-family: courier, "courier new", monospace; margin:0 0 5px 0; padding:5px; border:1px solid #eee;}
select {margin:0 0 5px 0;}
#media (min-width:300px) and (max-width: 768px) {
input, textarea {width:100%;}
label i {display:block; width:auto; text-align:left;}
button {display:block; margin:0;}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Post</title>
</head>
<body>
<div id="page">
<h1>New Post</h1>
<label for="title">
<i>Title</i> <!-- =title - input example -->
<input id="title" size="40" placeholder="Title">
</label>
<br>
<label for="title">
<i>Location</i> <!-- =location - input example -->
<input id="location" size="40" placeholder="Location">
</label>
<input type="hidden" id="date" size="40"> <!-- =date - hidden input example (automatically populated with current date in yyyy-mm-dd format) -->
<br>
<label for="senses">
<i>Senses</i> <!-- =senses select menu example -->
<select name="senses" id="senses" size="1">
<option value="Touch">Touch</option>
<option value="Sound">Sound</option>
<option value="Sight">Smell</option>
<option value="Sight">Taste</option>
<option value="Sight">Sight</option>
</select>
</label>
<br>
<label for="tags">
<i>Tags</i> <!-- =tags textarea example -->
<textarea id="tags" cols="40" rows="3" placeholder="tag, tag, tag"></textarea>
</label>
<br>
<label for="content">
<i>Content</i> <!-- =content textarea example -->
<textarea id="content" cols="40" rows="10" placeholder="Write something."></textarea>
</label>
<br>
<label for="filename">
<i>Filename</i>
<input id="filename" value="" size="40" placeholder="title.md">
</label>
<button onclick="saveFormAsTextFile()">
Save to File
</button>
</div>
</body>
</html>
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.
I have a table that has some values that whenever the edit button on that row gets clicked all of the values on that row get passed to the corresponding input tags so they can be edited.
This is my code:
$(document).ready(function() {
//"use strict";
cargarDatos();
$('#frmContacto').submit(function(event) {
event.preventDefault(); //Bloqueo de comportamiento por defecto de formulario
guardarDatos();
cargarDatos();
});
$('input').on('blur', function() {
$(this).addClass('marcado');
//alert(this.value);
});
$('.btnEditar').on('click', function(event) {
event.preventDefault();
//Here is where I call a function that is supposed to pass values to the inputs on my html page so I could update the values
});
$('#inputFoto').on('change', function(e) {
precargarImagen(this);
});
$(window).load(function() {
$(document).ready($('#efecto1').addClass('animacion1'));
// $(document).ready($('#efecto2').addClass('animacion1'));
// cargarDatos();
});
});
/*jshint latedef:false */
function guardarDatos() {
name = $('#inputNombre').val();
direccion = $('#inputDireccion').val();
telefono = $('#inputTelefono').val();
fecha = $('#inputFecha').val();
email = $('#inputEmail').val();
color = $('#inputColor').val();
dataFoto = $("#imgFoto").attr("src");
/*alert("Sus datos son: \n" + nombre + "\n"
+ direccion + "\n" + telefono + "\n"
+ fecha + "\n" + email+ "\n" + color);*/
contacto = {
nombre: name,
direccion: direccion,
telefono: telefono,
fecha: fecha,
email: email,
color: color,
foto: dataFoto
};
contactos.push(contacto);
console.log(JSON.stringify(contactos));
localStorage.setItem('lstcontactos2', JSON.stringify(contactos));
}
/*jshint latedef:false */
function cargarDatos() {
var data = localStorage.getItem('lstcontactos2');
contactos = data && JSON.parse(data);
if (contactos == null)
contactos = new Array();
$('#tablaContactos').bootstrapTable({
data: contactos
});
}
function btnEditar(value) {
console.log("valueformat " + value);
return '<span class="glyphicon glyphicon-pencil"></span>';
}
function imgFoto(value) {
return '<img id="imgFoto" src="' + value +
'" style="width:auto;height:160px;">';
}
function precargarImagen(inputfile) {
var file = inputfile.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = reader.result;
$(".file-caption-name").html(file.name);
$(".file-preview-frame").empty();
$(".file-preview-frame").
append('<img id="imgFoto" src="' + reader.result +
'" style="width:auto;height:160px;">');
};
reader.readAsDataURL(file);
inputfile.val(img.src);
} else {
alert("Archivo no soportando!");
}
}
.marcado {
color: #ff0000;
border: 1px solid #0000ff;
}
.desmarcado {
color: #00000;
border: 0;
}
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
text-align: right;
opacity: 0;
filter: alpha(opacity=0);
opacity: 0;
background: none repeat scroll 0 0 transparent;
cursor: inherit;
display: block;
}
.file-preview-frame {
display: table;
margin: 8px;
height: 160px;
width: 160px;
border: 1px solid #ddd;
box-shadow: 1px 1px 5px 0px #a2958a;
padding: 6px;
float: left;
text-align: center;
vertical-align: middle;
transition: all .4s ease-in-out;
}
.file-preview-frame:hover {
box-shadow: 3px 3px 5px 0px #333;
cursor: pointer;
background-size: 150% 150%;
transform: scale(2.2);
}
/* Shrink */
.hvr-shrink {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-shrink:hover,
.hvr-shrink:focus,
.hvr-shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset=utf-8>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Contactos</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css">
<link rel="stylesheet" href="estilos.css" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/locale/bootstrap-table-es-AR.min.js"></script>
</head>
<body>
<div class="container">
<h1>Contactos personales</h1>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Listado</a>
</div>
</div>
</nav>
<div class="row show-grid">
<div class="animacion1">
<div class="col-sm-6">
<table id="tablaContactos" class="table table-hover" data-toggle="table" data-search="true" data-row-style="rowStyle" data-show-refresh="true" data-show-toggle="true" data-show-columns="true">
<thead>
<tr>
<th data-field="nombre" data-sortable="true">Nombre</th>
<th data-field="direccion" data-sortable="true">Dirección</th>
<th data-field="email" data-sortable="true">Email</th>
<th data-field="fecha" data-sortable="true">Fecha</th>
<th data-field="telefono" data-sortable="true" data-visible="false">Telefono</th>
<th data-field="color" data-sortable="false" data-visible="false">Color</th>
<th data-field="foto" data-sortable="false" data-formatter="imgFoto">Foto</th>
<th data-field="email" data-formatter="btnEditar"></th>
</tr>
</thead>
</table>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">Agregar/editar contacto</div>
<div class="panel-body">
<form class="form-horizontal" id="frmContacto">
<div class="form-group">
<label for="inputFoto" class="col-sm-2 control-label">Foto</label>
<div class="col-sm-10">
<div class="file-preview-frame">
<img src="" style="width:auto;height:160px;">
</div>
<input type="file" class="form-control file" id="inputFoto" data-show-upload="false" required="true">
</div>
</div>
<div class="form-group">
<label for="inputNombre" class="col-sm-2 control-label">Nombre</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputNombre" placeholder="Ingrese nombre" required>
</div>
</div>
<div class="form-group">
<label for="inputDireccion" class="col-sm-2 control-label">Dirección</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputDireccion" required placeholder="Ingrese dirección personal">
</div>
</div>
<div class="form-group">
<label for="inputTelefono" class="col-sm-2 control-label">Telefono</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputTelefono" placeholder="Ingrese # telefónico" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Ingrese Email" required>
</div>
</div>
<div class="form-group">
<label for="inputFecha" class="col-sm-2 control-label">Fecha de nacimiento</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="inputFecha" placeholder="Ingrese su fecha de nacimiento" required>
</div>
</div>
<div class="form-group">
<label for="inputColor" class="col-sm-2 control-label">Color favorito</label>
<div class="col-sm-10">
<input type="color" class="form-control" id="inputColor">
</div>
</div>
<div class="form-group">
<label for="inputURL" class="col-sm-2 control-label">Página Web</label>
<div class="col-sm-10">
<input type="url" class="form-control" id="inputURL" placeholder="Ingrese su página web">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="btnGuardar">Guardar OK</button>
<button type="button" class="btn btn-default">Cancelar</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
How can I do this with jquery or is there a better way of doing this? and also whenever I click the btnGuardar submit button how can I update table without having to refresh the page to see the new added values?
This is my second answer on this question. It have the same structure as the earlier answer but this one picks up all fields on the same row (wich have the same class) at once.
function edit(key) {
var x = document.getElementsByClassName("prow" + key);
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var x = document.getElementsByClassName("inputrow" + key);
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "initial";
}
document.getElementById('inputA' + key ).value = document.getElementById('pA' + key ).innerHTML;
document.getElementById('inputB' + key ).value = document.getElementById('pB' + key ).innerHTML;
document.getElementById('inputC' + key ).value = document.getElementById('pC' + key ).innerHTML;
}
function save(key) {
var x = document.getElementsByClassName("prow" + key);
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "initial";
}
var x = document.getElementsByClassName("inputrow" + key);
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById('pA' + key ).innerHTML = document.getElementById('inputA' + key ).value;
document.getElementById('pB' + key ).innerHTML = document.getElementById('inputB' + key ).value;
document.getElementById('pC' + key ).innerHTML = document.getElementById('inputC' + key ).value;
}
*{
font-family: Arial, Helvetica, sans-serif;
}
p {
margin:0px;
}
input[type=text] {
display:none;
height:12px;
width:45px;
}
table, th, td {
border: 2px solid darkslategray ;
background:darkseagreen ;
border-collapse: collapse;
margin:0px;
padding:0px;
}
<table>
<form id=formA>
<tr>
<td>
<p id=pA1 class=prow1>value 1</p><input id=inputA1 type="text" name="A" class=inputrow1 value="value 1"></td>
<td><p id=pB1 class=prow1>value 2</p><input id=inputB1 type="text" name="B" class=inputrow1 value="value 2">
</td>
<td><p id=pC1 class=prow1>value 3</p><input id=inputC1 type="text" name="C" class=inputrow1 value="value 3">
</td>
<td><button type="button" onclick="edit(1)">edit</button><button type="button" onclick="save(1)">save</button>
</td>
</tr>
<tr>
<td>
<p id=pA2 class=prow2>value 1</p><input id=inputA2 type="text" name="D" class=inputrow2 value="value 1"></td>
<td><p id=pB2 class=prow2>value 2</p><input id=inputB2 type="text" name="E" class=inputrow2 value="value 2">
</td>
<td><p id=pC2 class=prow2>value 3</p><input id=inputC2 type="text" name="F" class=inputrow2 value="value 3">
</td>
<td><button type="button" onclick="edit(2)">edit</button><button type="button" onclick="save(2)">save</button>
</td>
</tr>
<tr>
<td colspan=4>
<input type="submit" value="Submit" style="width:100%;">
</td>
</tr>
</form>
</table>
This would be comment but I can't add a comment yet.
It may be a good idea to look at an MVVM library such as:
http://knockoutjs.com/
https://angularjs.org/
http://vuejs.org/
If you're new to the idea of MVVM I would recommend looking at knockout, although it is probably the more complex option the tutorials are excellent: http://learn.knockoutjs.com/
This line gets the text from an element and stores it in the variable y:
var y = document.getElementById('text id').innerHTML;
This line places the value stored in the y variable on the edit box:
document.getElementById('input text id').value = y;
Here it comes a working example:
function edit(key) {
document.getElementById('p' + key).style.display = "none";
document.getElementById('input' + key).style.display = "initial";
var yy = document.getElementById('p' + key).innerHTML;
document.getElementById('input' + key).value = yy;
}
function save(key) {
document.getElementById('p' + key).style.display = "initial";
document.getElementById('input' + key).style.display = "none";
var xx = document.getElementById('input' + key).value;
document.getElementById('p' + key).innerHTML = xx;
}
*{
font-family: Arial, Helvetica, sans-serif;
}
p {
margin:0px;
}
input[type=text] {
display:none;
height:12px;
width:40px;
}
table, th, td {
border: 2px solid tomato;
background:gold;
border-collapse: collapse;
margin:0px;
padding:0px;
}
<table>
<form id=formA>
<tr>
<td>
<p id=pA>value 1</p><input id=inputA type="text" name="A" value="value 1"></td><td><p id=pB>value 2</p><input id=inputB type="text" name="B" value="value 2">
</td>
</tr>
<tr>
<td>
<button type="button" onclick="edit('A')">edit 1</button><button type="button" onclick="save('A')">save 1</button></td>
<td><button type="button" onclick="edit('B')">edit 2</button><button type="button" onclick="save('B')">save 2</button>
</td>
</tr>
<tr>
<td colspan=2>
<input type="submit" value="Submit" style="width:100%;">
</td>
</tr>
</form>
</table>