radio buttons as submit buttons javascript? - javascript

Hi I am developing calculator in javascript just for exercise purpose. this is my Html code.
<h1 id="h1">Calculator</h1>
<input type="text" id="vaLue" name="val1">
<input type="submit" value="+" onclick="cal()" id="plus">
<input type="submit" value="-" onclick="cal()" id="minus">
<input type="submit" value="*" onclick="cal()" id="mul">
<input type="submit" value="/" onclick="cal()" id="devide">
<input type="submit" value="=" onclick="cal()" id="equal">
javascript code
function cal(){
var val1 = document.getElementById('vaLue').value;
var errormessage = 'enter value';
var plu= document.getElementById('plus').value;
var minu= document.getElementById('minus').value;
var mult= document.getElementById('mul').value;
var div= document.getElementById('devide').value;
var equ= document.getElementById('equal').value;
if( val1.length == 0) {
var error = document.getElementById('error');
error.innerHTML= errormessage;
return;
}
if (val1.length != 0){
var bt=document.getElementById('h1');
calc= val1+plu;
bt.innerHTML=calc;
val1=null;
}
}
I want to use these operator buttons as submit button to be used randomly according to their functions. I thought to convert them to radio buttons with same name attribute but I don't know how to make radio button act as submit button too.
also if you can tell me how to define variable value null.
thanks for your expert advice in advance.
Regards
Dheeraj

Hope you are lookiing something like this..
var sum = 0;
var inputVal = document.getElementById('vaLue');
function div() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum / inputNum);
}
function mul() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum * inputNum);
}
function sub() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum - inputNum);
}
function add() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum + inputNum);
}
function showResult(value) {
sum = value
document.getElementById('result').innerHTML = value;
}
#result {
font-weight: bold;
}
<h1 id="h1">Calculator</h1>
<input type="text" id="vaLue" name="val1">
<input type="submit" value="+" onclick="add()" id="plus">
<input type="submit" value="-" onclick="sub()" id="minus">
<input type="submit" value="*" onclick="mul()" id="mul">
<input type="submit" value="/" onclick="div()" id="devide">
<div id="result">0</div>

var sum = 0;
var inputVal = document.getElementById('vaLue');
function div() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum / inputNum);
}
function mul() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum * inputNum);
}
function sub() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum - inputNum);
}
function add() {
var inputNum = parseFloat(inputVal.value) || 0;
showResult(sum + inputNum);
}
function showResult(value) {
sum = value
document.getElementById('result').innerHTML = value;
}
#result {
font-weight: bold;
}
<h1 id="h1">Calculator</h1>
<input type="text" id="vaLue" name="val1">
<input type="submit" value="+" onclick="add()" id="plus">
<input type="submit" value="-" onclick="sub()" id="minus">
<input type="submit" value="*" onclick="mul()" id="mul">
<input type="submit" value="/" onclick="div()" id="devide">
<div id="result">0</div>

Related

I add the max value of three input numbers and it's worked but how to add the increment decrement button without losing the max value?

I need the addition of a three-element is 8, with click + and - button. But, I don't want that it will increase each element up to 8.
// Addtion of select items LINK - https://stackoverflow.com/questions/49644837/set-max-value-of-three-input-numbers-together
var max = 8;
var $inputs = $('input');
function sumInputs($inputs) {
var sum = 0;
$inputs.each(function() {
sum += parseInt($(this).val(), 0);
});
return sum;
}
$inputs.on('input', function(e) {
var $this = $(this);
var sum = sumInputs($inputs.not(function(i, el) {
return el === e.target;
}));
var value = parseInt($this.val(), 10) || 0;
if (sum + value > max) $this.val(max - sum);
});
//Increment Decrement value
function up(max) {
document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) + 1;
if (document.getElementById("myNumber").value >= parseInt(max)) {
document.getElementById("myNumber").value = max;
}
}
function down(min) {
document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) - 1;
if (document.getElementById("myNumber").value <= parseInt(min)) {
document.getElementById("myNumber").value = min;
}
}
function up2(max) {
document.getElementById("myNumber2").value = parseInt(document.getElementById("myNumber2").value) + 1;
if (document.getElementById("myNumber2").value >= parseInt(max)) {
document.getElementById("myNumber2").value = max;
}
}
function down2(min) {
document.getElementById("myNumber2").value = parseInt(document.getElementById("myNumber2").value) - 1;
if (document.getElementById("myNumber2").value <= parseInt(min)) {
document.getElementById("myNumber2").value = min;
}
}
function up3(max) {
document.getElementById("myNumber3").value = parseInt(document.getElementById("myNumber3").value) + 1;
if (document.getElementById("myNumber3").value >= parseInt(max)) {
document.getElementById("myNumber3").value = max;
}
}
function down3(min) {
document.getElementById("myNumber3").value = parseInt(document.getElementById("myNumber3").value) - 1;
if (document.getElementById("myNumber3").value <= parseInt(min)) {
document.getElementById("myNumber3").value = min;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="select-1">
<button type="submit" value="-" onclick=" down('0')" class="sub" id="">-</button>
<input type="number" id="myNumber" value="0" name="qty" max="8" min="0" step="1"/>
<button type="submit" value="+" onclick="up('8')" class="add">+</button>
</div>
<div class="select-2">
<button type="submit" value="-" onclick=" down2('0')" class="sub">-</button>
<input type="number" id="myNumber2" value="0" name="qty2" max="8" min="0" step="1"/>
<button type="submit" value="+" onclick="up2('8')" class="add">+</button>
</div>
<div class="select-3">
<button type="submit" value="-" onclick=" down3('0')" class="sub" id="">-</button>
<input type="number" id="myNumber3" value="0" name="qty3" max="8" min="0" step="1"/>
<button type="submit" value="+" onclick="up3('8')" class="add">+</button>
</div>
Currently, the max value is 8. I would like to get the max value with the + and - button as well.
How can I solve this with javascript or jquery?
Here, there is a link below I follow for increment and decrement.
https://stackoverflow.com/a/49645518/15412266
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<button type="submit" value="+" onclick="minusoperation(1)" class="minus">-</button>
<input type="number" class="numbers" id="number1" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
<button type="submit" value="+" onclick="plusoperation(1)" class="plus">+</button>
<button type="submit" value="+" onclick="minusoperation(2)" class="minus">-</button>
<input type="number" class="numbers" id="number2" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
<button type="submit" value="+" onclick="plusoperation(2)" class="plus">+</button>
<button type="submit" value="+" onclick="minusoperation(3)" class="minus">-</button>
<input type="number" class="numbers" id="number3" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
<button type="submit" value="+" onclick="plusoperation(3)" class="plus">+</button>
</div>
<script type="text/javascript">
function inputNumber(el)
{
var myElements = document.getElementsByClassName('numbers');
var sum = 0;
for (var i=0;i<myElements.length;i++) {
if(myElements[i].value)
sum = sum+parseInt(myElements[i].value);
}
if(sum<=8)
{
el.dataset.prevvalue = el.value;
} else {
el.value = el.dataset.prevvalue;
}
}
function minusoperation(inputNumber)
{
var el = document.getElementById('number'+inputNumber);
if(parseInt(el.value))
{
el.value = parseInt(el.value)-1;
} else {
el.value = 0;
}
el.onchange();
}
function plusoperation(inputNumber)
{
var el = document.getElementById('number'+inputNumber);
if(parseInt(el.value))
{
el.value = parseInt(el.value)+1;
} else {
el.value = 1;
}
el.onchange();
}
</script>
</body>
</html>

How do I increase and decrease the addition in a span tag by click + and - buttons around input tag?

It's worked without buttons.
But how to apply input addition with help of + and - buttons.
How can I solve this with javascript or jquery?
// addition of three input in span Tag
$("input[type=number]").change(function() {
var val = 0;
//loop through each inputs
$("input[type=number]").each(function() {
//sum values
val += (isNaN(parseInt($(this).val()))) ? 0 : parseInt($(this).val());
})
//put in a span
$(".total-select").text(val);
});
function inputNumber(el) {
var myElements = document.getElementsByClassName('numbers');
var sum = 0;
for (var i = 0; i < myElements.length; i++) {
if (myElements[i].value)
sum = sum + parseInt(myElements[i].value);
}
if (sum <= 8) {
el.dataset.prevvalue = el.value;
} else {
el.value = el.dataset.prevvalue;
}
}
function minusoperation(inputNumber) {
var el = document.getElementById('number' + inputNumber);
if (parseInt(el.value)) {
el.value = parseInt(el.value) - 1;
} else {
el.value = 0;
}
el.onchange();
}
function plusoperation(inputNumber) {
var el = document.getElementById('number' + inputNumber);
if (parseInt(el.value)) {
el.value = parseInt(el.value) + 1;
} else {
el.value = 1;
}
el.onchange();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="total-select" name="4">0</span> <br>
<button type="submit" value="+" onclick="minusoperation(1)" class="minus">-</button>
<input type="number" class="numbers" id="number1" name="1" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" />
<button type="submit" value="+" onclick="plusoperation(1)" class="plus">+</button><br>
<button type="submit" value="+" onclick="minusoperation(2)" class="minus">-</button>
<input type="number" class="numbers" id="number2" name="2" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" />
<button type="submit" value="+" onclick="plusoperation(2)" class="plus">+</button>
How to get an answer at runtime by clicking the buttons around them.
I also have a separate code for the increase and decrease buttons.
This is what I actually want. The sum of three input displayed in the span tag.
// addition of three input in span Tag
// $("input[type=number]").change(function() {
// var val = 0;
// //loop through each inputs
// $("input[type=number]").each(function() {
// //sum values
// val += (isNaN(parseInt($(this).val()))) ? 0 : parseInt($(this).val());
// })
// //put in span
// $(".total-select").text(val);
// });
function inputNumber(el) {
var myElements = document.getElementsByClassName('numbers');
var sum = 0;
for (var i = 0; i < myElements.length; i++) {
if (myElements[i].value)
sum = sum + parseInt(myElements[i].value);
}
if (sum <= 8) {
el.dataset.prevvalue = el.value;
//add ID of SPAn tag for getting the addtion of total inputs
document.getElementById("total").innerHTML = sum;
} else {
el.value = el.dataset.prevvalue;
}
}
function minusoperation(inputNumber) {
var el = document.getElementById('number' + inputNumber);
if (parseInt(el.value)) {
el.value = parseInt(el.value) - 1;
} else {
el.value = 0;
}
el.onchange();
}
function plusoperation(inputNumber) {
var el = document.getElementById('number' + inputNumber);
if (parseInt(el.value)) {
el.value = parseInt(el.value) + 1;
} else {
el.value = 1;
}
el.onchange();
}
<span class="total-select" name="4" id="total">0</span> <br>
<button type="submit" value="+" onclick="minusoperation(1)" class="minus">-</button>
<input type="number" class="numbers" id="number1" name="1" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" disabled/>
<button type="submit" value="+" onclick="plusoperation(1)" class="plus">+</button><br>
<button type="submit" value="+" onclick="minusoperation(2)" class="minus">-</button>
<input type="number" class="numbers" id="number2" name="2" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" disabled/>
<button type="submit" value="+" onclick="plusoperation(2)" class="plus">+</button><br>
<button type="submit" value="+" onclick="minusoperation(3)" class="minus">-</button>
<input type="number" class="numbers" id="number3" name="3" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" disabled/>
<button type="submit" value="+" onclick="plusoperation(3)" class="plus">+</button>

How to set minimum Increment ++ and Decrement -- value (can't go bellow 1) + how to decrease or increase button added value

I am working on a web store which offers 2 pre-assigned options (buy two for XX and buy 3 for XY). I also added a normal - 0 + system whith which the customer can select a different number of products.
I wrote a little code which works fine for +- or 2,3 alone, but if i wanna decrease a number added by 2,3 buttons, it doesn't go from 3 to 2 but to 0 or -1.
So, i want to be able to select pre-defined option 2 or 3 but i also want it to be editable by +- buttons.
Any suggestions?
<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="0"></input>
<button class="plus" onclick="buttonClicDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
var i = 0;
function buttonClickUP() {
i++;
document.getElementById('gumb2').value = i;
if (i <= 0) {
i = 0;
display(i);
}
}
var i = 0;
function buttonClickDOWN() {
i--;
document.getElementById('gumb2').value = i;
if (i <= 0) {
i = 0;
display(i);
}
}
</script>
As I already mention in the comment, you have a typo in buttonClicDOWN .......missing k. You directly increment/decrement the value of the element. Please see the modified functions:
<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="1"></input>
<button class="plus" onclick="buttonClickDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
function buttonClickUP() {
var el = document.getElementById('gumb2');
el.value = Number(el.value) + 1;
}
function buttonClickDOWN() {
var el = document.getElementById('gumb2');
if(el.value == 1) return false;
el.value = Number(el.value) - 1;
}
</script>
I'd have this added as a comment, but was not able to for missing rep. So an answer:
In simple terms: you are not updating your global variable i when pressing the 2 or 3 button, so when you in/decrease i and assign it to the value property, you do override the old value.
I would recommend to drop the i (global) variable and just to work with the value property, e.g.
function buttonClickDOWN() {
var elm = document.getElementById('gumb2');
if (elm.value > 0)
elm.value--;
else
elm.value = 0;
}
P.S.: as you are using a text type input, you might also want to consider non-numbers the user might have entered.
Why not simply use input type="number"?
<button class="gumb_shop2" onclick="gumb2.value=2">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="gumb2.value=3">3 for 8,99 €</button>
<input type="number" id="gumb2" value="1" step="1" min="1" />
<input type="button" id="order" value="ORDER NOW" />
Here's a simple example that that meets your specs:
<button onclick="setAbs(event)" data-val="2">2 for 10,99 €</button>
<button onclick="setAbs(event)" data-val="3">3 for 8,99 €</button><br/><br/>
<button onclick="down()">-</button>
<input size="2" id="counter" value="0" />
<button onclick="up()">+</button><br/><br/>
<input type="submit" value="Submit" />
<script>
let counter = document.getElementById("counter");
function setAbs(event){
counter.value = event.target.dataset.val;
}
function up(){
counter.value = parseInt(counter.value) + 1;
}
function down(){
if(counter.value > 0){
counter.value = parseInt(counter.value) - 1;
}
}
</script>
this is the answer i was looking for.
Thank you #Mamun for quick response.
<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="1"></input>
<button class="plus" onclick="buttonClickDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
function buttonClickUP() {
var el = document.getElementById('gumb2');
el.value = Number(el.value) + 1;
}
function buttonClickDOWN() {
var el = document.getElementById('gumb2');
if(el.value == 1) return false;
el.value = Number(el.value) - 1;
}
</script>

radio button only changes value when double clicked?

In my code I have five radio buttons with one set checked by default. When I click on a radio button the function setMode() is called but the test to check which button is checked fails.
When the same radio button is clicked a second time setMode() is called the test will return true.
The test is if(document.getElementById("rcool").checked)
I have tried changing the mouse events and the test eg. .checked=="true" and .checked=="checked".
I have searched and only found similar topics in jQuery which I am unfamiliar with so could not make sense of them.
I am using Firefox 47.0 and have checked for errors using Firebug 2.0.17.
I am not very sure how to use Firebug and don't know what to try next.
Any help or comments are greatly appreciated.
var options = ["power=off","mode=heat","temp=20"];
var temp = 20;
function power() {
var pwr = document.getElementById("powerBtn");
var pwrtxt;
if(pwr.innerHTML=="OFF"){
pwrtxt = "power=on";
pwr.innerHTML = "ON";
}
else {
pwrtxt = "power=off";
pwr.innerHTML = "OFF";
}
options[0] = pwrtxt;
document.getElementById("textOutput").value = options;
}
function setMode(){
if(document.getElementById("rheat").checked)
options[1] = "mode=heat";
if(document.getElementById("rcool").checked)
options[1] = "mode=cool";
if(document.getElementById("rdry").checked)
options[1] = "mode=dry";
if(document.getElementById("rauto").checked)
options[1] = "mode=auto";
if(document.getElementById("recono").checked)
options[1] = "mode=econo";
document.getElementById("textOutput").value = options;
}
function updateTemp(){
var tempString = "temp=";
options[2] = tempString.concat("",temp);
document.getElementById("textOutput").value = options;
}
function increaseTemp(){
temp += 1;
if(temp>31) {
temp = 31;
}
updateTemp();
}
function decreaseTemp(){
temp -= 1;
if(temp < 16){
temp = 16;
}
updateTemp();
}
function stopTime(){
}
function startTime(){
}
function incTime(){
}
function decTime(){
}
<!DOCTYPE html>
<html>
<body>
<button type="button" id="powerBtn" onmouseup="power()">OFF</button>
<button type="button" id="increase" onmouseup="increaseTemp()">Up</button>
<button type="button" id="decrease" onmouseup="decreaseTemp()">Down</button>
<br>
<input type="radio" id="rheat" name="mode" onmouseup="setMode()" value="heat" checked="checked">HEAT<br>
<input type="radio" id="rcool" name="mode" onmouseup="setMode()" value="cool">COOL<br>
<input type="radio" id="rdry" name="mode" onmouseup="setMode()" value="dry">DRY<br>
<input type="radio" id="rauto" name="mode" onmouseup="setMode()" value="auto">AUTO<br>
<input type="radio" id="recono" name="mode" onmouseup="setMode()" value="econo">ECONOCOOL<br>
<br>
<button type="button" id="stopTmr" onmouseup="stopTime()">Stop Time</button>
<button type="button" id="startTimer" onmouseup="startTime()">Start Timer</button>
<br>
<button type="button" id="incTime" onmouseup="incTime()">Increase Time</button>
<button type="button" id="decTime" onmouseup="decTime()">Decrease Time</button>
<form action="action_page.php">
<textarea id="textOutput" name="message" rows="10" cols="30"></textarea>
<br>
<input type="submit">
</form>
</body>
</html>
To launch a function when a radio button is clicked, you must use onchange event, not onclick/onmouseup. onchange gracefully wait for the radio button to be effectively clicked/updated before calling the function.
var options = ["power=off","mode=heat","temp=20"];
var temp = 20;
window.onload=function(){document.getElementById("textOutput").value = options;}
function power() {
var pwr = document.getElementById("powerBtn");
var pwrtxt;
if(pwr.innerHTML=="OFF"){
pwrtxt = "power=on";
pwr.innerHTML = "ON";
}
else {
pwrtxt = "power=off";
pwr.innerHTML = "OFF";
}
options[0] = pwrtxt;
document.getElementById("textOutput").value = options;
}
function setMode(){
if(document.getElementById("rheat").checked)
options[1] = "mode=heat";
if(document.getElementById("rcool").checked)
options[1] = "mode=cool";
if(document.getElementById("rdry").checked)
options[1] = "mode=dry";
if(document.getElementById("rauto").checked)
options[1] = "mode=auto";
if(document.getElementById("recono").checked)
options[1] = "mode=econo";
document.getElementById("textOutput").value = options;
}
function updateTemp(){
var tempString = "temp=";
options[2] = tempString.concat("",temp);
document.getElementById("textOutput").value = options;
}
function increaseTemp(){
temp += 1;
if(temp>31) {
temp = 31;
}
updateTemp();
}
function decreaseTemp(){
temp -= 1;
if(temp < 16){
temp = 16;
}
updateTemp();
}
function stopTime(){
}
function startTime(){
}
function incTime(){
}
function decTime(){
}
<!DOCTYPE html>
<html>
<body>
<button type="button" id="powerBtn" onmouseup="power()">OFF</button>
<button type="button" id="increase" onmouseup="increaseTemp()">Up</button>
<button type="button" id="decrease" onmouseup="decreaseTemp()">Down</button>
<br>
<input type="radio" id="rheat" name="mode" onchange="setMode()" value="heat" checked="checked">HEAT<br>
<input type="radio" id="rcool" name="mode" onchange="setMode()" value="cool">COOL<br>
<input type="radio" id="rdry" name="mode" onchange="setMode()" value="dry">DRY<br>
<input type="radio" id="rauto" name="mode" onchange="setMode()" value="auto">AUTO<br>
<input type="radio" id="recono" name="mode" onchange="setMode()" value="econo">ECONOCOOL<br>
<br>
<button type="button" id="stopTmr" onmouseup="stopTime()">Stop Time</button>
<button type="button" id="startTimer" onmouseup="startTime()">Start Timer</button>
<br>
<button type="button" id="incTime" onmouseup="incTime()">Increase Time</button>
<button type="button" id="decTime" onmouseup="decTime()">Decrease Time</button>
<form action="action_page.php">
<textarea id="textOutput" name="message" rows="10" cols="30"></textarea>
<br>
<input type="submit">
</form>
</body>
</html>
Normally I put listeners on those radio buttons and identify them when they are clicked. It seems you prefer the old school way of doing it so I didn't change much in your code but added a paramter in your setMode() function called mode. Basically the mode is already defined when setMode() is called so you don't have to check each radio button anymore. switch() here can assign relative value to options[1] according to mode. Have a go with it and good luck.
var options = ["power=off","mode=heat","temp=20"];
var temp = 20;
function power() {
var pwr = document.getElementById("powerBtn");
var pwrtxt;
if(pwr.innerHTML=="OFF"){
pwrtxt = "power=on";
pwr.innerHTML = "ON";
}
else {
pwrtxt = "power=off";
pwr.innerHTML = "OFF";
}
options[0] = pwrtxt;
document.getElementById("textOutput").value = options;
}
function setMode( mode ){
switch ( mode ) {
case 'rheat':
options[1] = "mode=heat";
break;
case 'rcool':
options[1] = "mode=cool";
break;
case 'rdry':
options[1] = "mode=dry";
break;
case 'rauto':
options[1] = "mode=auto";
break;
case 'recono':
options[1] = "mode=econo";
break;
}
document.getElementById("textOutput").value = options;
}
function updateTemp(){
var tempString = "temp=";
options[2] = tempString.concat("",temp);
document.getElementById("textOutput").value = options;
}
function increaseTemp(){
temp += 1;
if(temp>31) {
temp = 31;
}
updateTemp();
}
function decreaseTemp(){
temp -= 1;
if(temp < 16){
temp = 16;
}
updateTemp();
}
function stopTime(){
}
function startTime(){
}
function incTime(){
}
function decTime(){
}
<button type="button" id="powerBtn" onmouseup="power()">OFF</button>
<button type="button" id="increase" onmouseup="increaseTemp()">Up</button>
<button type="button" id="decrease" onmouseup="decreaseTemp()">Down</button>
<br>
<input type="radio" id="rheat" name="mode" onmouseup="setMode('rheat')" value="heat" checked="checked">HEAT<br>
<input type="radio" id="rcool" name="mode" onmouseup="setMode('rcool')" value="cool">COOL<br>
<input type="radio" id="rdry" name="mode" onmouseup="setMode('rdry')" value="dry">DRY<br>
<input type="radio" id="rauto" name="mode" onmouseup="setMode('rauto')" value="auto">AUTO<br>
<input type="radio" id="recono" name="mode" onmouseup="setMode('recono')" value="econo">ECONOCOOL<br>
<br>
<button type="button" id="stopTmr" onmouseup="stopTime()">Stop Time</button>
<button type="button" id="startTimer" onmouseup="startTime()">Start Timer</button>
<br>
<button type="button" id="incTime" onmouseup="incTime()">Increase Time</button>
<button type="button" id="decTime" onmouseup="decTime()">Decrease Time</button>
<form action="action_page.php">
<textarea id="textOutput" name="message" rows="10" cols="30"></textarea>
<br>
<input type="submit">
</form>

How would I use js cookies to save a value in an input

So I am testing around with cookies and I ran into a problem. I want the value in the input boxes to stay on reload. I just don't know where to start. Here is the code:
<html>
<head>
<script type="text/javascript">
function add1() {
var num = document.getElementById("mynum").value;
if(num == '') num = 0;
document.getElementById("mynum").value = parseInt(num ,10) + 1;
}
function add5() {
var num = document.getElementById("mynum").value;
if(num == '') num = 0;
document.getElementById("mynum").value = parseInt(num ,10) + 5;
}
function add10() {
var num = document.getElementById("mynum").value;
if(num == '') num = 0;
document.getElementById("mynum").value = parseInt(num ,10) + 10;
}
function add25() {
var num = document.getElementById("mynum").value;
if(num == '') num = 0;
document.getElementById("mynum").value = parseInt(num ,10) + 25;
}
function add50() {
var num = document.getElementById("mynum").value;
if(num == '') num = 0;
document.getElementById("mynum").value = parseInt(num ,10) + 50;
}
function add100() {
var num = document.getElementById("mynum").value;
if(num == '') num = 0;
document.getElementById("mynum").value = parseInt(num ,10) + 100;
}
</script>
</head>
<body>
<form method="post">
<input type="text" id='mynum'>
<input type="button" onclick="add1()" value="Add 1">
<input type="button" onclick="add5()" value="Add 5">
<input type="button" onclick="add10()" value="Add 10">
<input type="button" onclick="add25()" value="Add 25">
<input type="button" onclick="add50()" value="Add 50">
<input type="button" onclick="add100()" value="Add 100">
</form>
</body>
</html>
So how would I create a cookie that would keep the value of id: mynum if the page reload?
Seems like there should be an easier way to do that
<html>
<head>
<title>add something</title>
</head>
<body>
<form method="post">
<input type="text" id='mynum'>
<input type="button" class="adder" data-num="1" value="Add 1">
<input type="button" class="adder" data-num="5" value="Add 5">
<input type="button" class="adder" data-num="10" value="Add 10">
<input type="button" class="adder" data-num="25" value="Add 25">
<input type="button" class="adder" data-num="50" value="Add 50">
<input type="button" class="adder" data-num="100" value="Add 100">
</form>
<script type="text/javascript">
var buttons = document.querySelectorAll('.adder'),
initial = localStorage.getItem('mynum') || 0;
document.getElementById("mynum").value = initial;
for (var i=buttons.length; i--;) {
buttons[i].addEventListener('click', add, false);
}
function add() {
var num = document.getElementById("mynum"),
val = parseInt(num.value, 10),
add = parseInt(this.getAttribute('data-num'), 10),
tot = val + add;
num.value = tot;
localStorage.setItem('mynum', tot);
}
</script>
</body>
</html>
FIDDLE
This uses localStorage, if you have to support older browsers there's a shim on MDN that falls back to cookies, and you would have to shim querySelectorAll and addEventListener as well.
Just use document.cookie="username=John Doe";
See here for a tutorial on cookies in js

Categories

Resources