I want to create a simple calculator in jQuery - javascript

Basically, I am trying to create a simple calculator in jQuery as I created first in javascript but have some confusion in jQuery functions.
First here is my HTML code.
<body>
<h1>Calculator in jQuery</h1>
<div class="calculator">
<form name="myform">
<tr>
<td>
<input type="screen" id="screen" name="screen"><br>
</td>
</tr>
<tr>
<td>
<input type="button" name="7" value="7">
<input type="button" name="8" value="8">
<input type="button" name="9" value="9">
<input type="button" name="/" value="/">
<br>
<input type="button" name="4" value="4">
<input type="button" name="5" value="5">
<input type="button" name="6" value="6">
<input type="button" name="*" value="*">
<br>
<input type="button" name="1" value="1">
<input type="button" name="2" value="2">
<input type="button" name="3" value="3">
<input type="button" name="-" value="-">
<br>
<input type="button" name="C" value="C">
<input type="button" name="CE" value="CE">
<input type="button" name="0" value="0">
<input type="button" name="+" value="+">
<br>
<input type="button" name="=" value="=">
</form>
</body>
In jquery tags, I have the basic issues like I created 3 functions but how to link them and how to get output from that functions.
Here are my jQuery functions:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function update(value){
$("#screen").html(.myform .screen .value) +=value;
}
function result(value){
$("#")
}
function form_reset(value){
$("#")
}
});
</script>


You are trying the same code as javascript you have to know the basic working of jQuery. And here is the code for the calculator in jQuery.
Style tags
<style>
body{
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
h1{
text-align: center;
}
.main{
margin-left: 470px;
background-color: #1f1f21;
width: 30%;
}
#display{
width: 93%;
padding: 5px;
font-size: 55px;
color: black;
background-color: #fff;
text-align: right;
border: 1px solid black;
outline: none;
}
.clear{
background-color: red;
color: #fff;
}
input{
background-color: #333;
color: #fff;
margin-top: 5px;
font-size: 25px;
width: 95px;
height: 95px;
border-radius: 40px;
border-width: 0;
}
.finalresult{
background-color: #001010;
}
</style>
Now moving towards the jquery tags
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".clc").click(function(){
$("#display").val($("#display").val() +$(this).val());
});
$(".clear").click(function(){
$("#display").val('');
});
$(".result").click(function(){
$("#display").val(eval($("#display").val()));
});
});
</script>
And here is the basic HTML code for that
<h1>Simple Calculator in jQuery</h1><br><br>
<div class="main">
<!--form tags-->
<input id="display" type="text" placeholder=""><br>
<input class="clc" type="button" value="7">
<input class="clc" type="button" value="8">
<input class="clc" type="button" value="9">
<input class="clc" type="button" value="*">
<br>
<input class="clc" type="button" value="4">
<input class="clc" type="button" value="5">
<input class="clc" type="button" value="6">
<input class="clc" type="button" value="/">
<br>
<input class="clc" type="button" value="1">
<input class="clc" type="button" value="2">
<input class="clc" type="button" value="3">
<input class="clc" type="button" value="-">
<br>
<input class="clear" type="button" value="C">
<input class="clc" type="button" value="0">
<input class="clc" type="button" value="+">
<input class="result" type="button" value="=">
</div>


You can bind to the button's click event with $.on(event, handler) and get the value of the button with $.val().
You can then use isNaN() to check whether or not the clicked button corresponds to a number or a non-number.
*Note that $.val() is primarily used for <input>, <select>, and <textarea> elements. For other elements you would typically use $.html() or $.attr().
$(function(){
$("input[type=button]").on("click", function(){
let val = $(this).val();
if(isNaN(val))
{
//Handle operators
console.log("You entered an operator!", val);
}
else
{
//Handle numbers
console.log("You entered a number!", val);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h1>Calculator in jQuery</h1>
<div class="calculator">
<form name="myform">
<tr>
<td>
<input type="screen" id="screen" name="screen"><br>
</td>
</tr>
<tr>
<td>
<input type="button" name="7" value="7">
<input type="button" name="8" value="8">
<input type="button" name="9" value="9">
<input type="button" name="/" value="/">
<br>
<input type="button" name="4" value="4">
<input type="button" name="5" value="5">
<input type="button" name="6" value="6">
<input type="button" name="*" value="*">
<br>
<input type="button" name="1" value="1">
<input type="button" name="2" value="2">
<input type="button" name="3" value="3">
<input type="button" name="-" value="-">
<br>
<input type="button" name="C" value="C">
<input type="button" name="CE" value="CE">
<input type="button" name="0" value="0">
<input type="button" name="+" value="+">
<br>
<input type="button" name="=" value="=">
</form>
</body>

Related

How to perform the same function in several checkboxes?

I have the following:
HTML:
<input type="checkbox" name="1" value="" id="1" onclick="enableNextButton('5')">
<input type="checkbox" name="2" value="" id="2" onclick="enableNextButton('5')">
<input type="checkbox" name="3" value="" id="3" onclick="enableNextButton('5')">
<button type="button" id="next-btn-5" disabled>Submit</button>
Javascript:
function enableNextButton(quizID) {
if($("input[type=checkbox]").prop('checked') == true){
$('#next-btn-'+quizID).prop('disabled', false);
}else{
$('#next-btn-'+quizID).prop('disabled', true);
}
}
The problem is that it is only working for the first checkbox, for others it does not work, it does not fulfill the function.

Since you are using jQuery it is simpler to create a jQuery event listener than use an inline onclick and use a data attribute for the nextId value
$(':checkbox[data-next]').change(function(){
$('#next-btn-' + $(this).data('next')).prop('disabled', !this.checked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>5:<input type="checkbox" name="1" value="" id="1" data-next="5"/></label>
<label>6:<input type="checkbox" name="2" value="" id="2" data-next="6"/></label>
<label>7:<input type="checkbox" name="3" value="" id="3" data-next="7"/></label>
<br/><br/>
<button type="button" id="next-btn-5" disabled>Button 5</button>
<button type="button" id="next-btn-6" disabled>Button 6</button>
<button type="button" id="next-btn-7" disabled>Button 7</button>

I would use the data-* attribute to store the button selector (ID in your case):
$("[data-enable]").on("input", function() {
const selector = this.dataset.enable
const $group = $(`[data-enable="${selector}"]`);
let ok = false;
if (/checkbox|radio/.test(this.type)) ok = $group.filter(":checked").length > 0;
if (/textarea/.test(this.type)) ok = $(this).val().trim().length > 0;
$(selector).attr("disabled", !ok);
});
<input type="checkbox" name="5-1" value="1" data-enable="#next-btn-5">
<input type="checkbox" name="5-2" value="2" data-enable="#next-btn-5">
<input type="checkbox" name="5-3" value="3" data-enable="#next-btn-5">
<button type="button" id="next-btn-5" disabled>Submit 5</button>
<br>
<input type="radio" name="30" value="1" data-enable="#next-btn-30">
<input type="radio" name="30" value="2" data-enable="#next-btn-30">
<input type="radio" name="30" value="3" data-enable="#next-btn-30">
<button type="button" id="next-btn-30" disabled>Submit 30</button>
<br>
<textarea name="foo" data-enable="#next-btn-31"></textarea>
<button type="button" id="next-btn-31" disabled>Submit 31</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Calculator operators and functions not working

This is my code for the calculator:
function clear(val) {
document.getElementById("Input").value = val;
}
function show(val) {
document.getElementById("Input").value += val;
}
<input type="text" id="Input" style="width: 101px">
<br>
<br>
<input type="button" value="C" id="btnC" onclick="" style="width: 105px" onclick="clear()">
<br>
<br>
<input type="button" value="(" id="btn(" style="width: 24px">
<input type="button" value=")" id="btn)" style="width: 24px">
<input type="button" value="←" id="btn←" style="width: 21px">
<br>
<br>
<input type="button" value="7" id="btn7" onclick="show('7')">
<input type="button" value="8" id="btn8" onclick="show('8')">
<input type="button" value="9" id="btn9" onclick="show('9')">
<input type="button" value="×" id="btn×" style="width: 24px">
<br>
<br>
<input type="button" value="4" id="btn4" onclick="show('4')">
<input type="button" value="5" id="btn5" onclick="show('5')">
<input type="button" value="6" id="btn6" onclick="show('6')">
<input type="button" value="÷" id="btn÷" style="width: 23px" onclick="show('÷')">
<br>
<br>
<input type="button" value="+" id="btn+" onclick="show('+')">
<input type="button" value="1" id="btn1" onclick="show('1')">
<input type="button" value="2" id="btn2" onclick="show('2')">
<input type="button" value="3" id="btn3" onclick="show('3')">
<input type="button" value="-" id="btn-" style="width: 24px" onclick="show('-')">
<br>
<br>
<input type="button" value="0" id="btn0" onclick="show('0')">
<input type="button" value="." id="btn." onclick="show('.')">
<input type="button" value="+/−" id="btn+/−" style="width: 24px" onclick="show('-')">
<input type="button" value="=" id="btn=" style="width: 24px" onclick="">
<br>
<br>
As you might have noticed, none of the operators work at the moment. I am working on the functions but i do not know the code for the operators or functions. Any suggestions? Even some seed code would be useful. Thanks!

You can use eval() to evaluate the value of the Calculator's input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="Input" style="width: 101px">
<br>
<br>
<input type="button" onClick="clearCalc()" value="C" id="btnC" style="width: 105px">
<br>
<br>
<input type="button" value="(" id="btn(" style="width: 24px">
<input type="button" value=")" id="btn)" style="width: 24px">
<input type="button" value="←" id="btn←" style="width: 21px" onClick="del()">
<br>
<br>
<input type="button" value="7" id="btn7" onclick="show('7')">
<input type="button" value="8" id="btn8" onclick="show('8')">
<input type="button" value="9" id="btn9" onclick="show('9')">
<input type="button" value="×" id="btn×" style="width: 24px" onclick="show('*')">
<br>
<br>
<input type="button" value="4" id="btn4" onclick="show('4')">
<input type="button" value="5" id="btn5" onclick="show('5')">
<input type="button" value="6" id="btn6" onclick="show('6')">
<input type="button" value="÷" id="btn÷" style="width: 23px" onclick="show('÷')">
<br>
<br>
<input type="button" value="+" id="btn+" onclick="show('+')">
<input type="button" value="1" id="btn1" onclick="show('1')">
<input type="button" value="2" id="btn2" onclick="show('2')">
<input type="button" value="3" id="btn3" onclick="show('3')">
<input type="button" value="-" id="btn-" style="width: 24px" onclick="show('-')">
<br>
<br>
<input type="button" value="0" id="btn0" onclick="show('0')">
<input type="button" value="." id="btn." onclick="show('.')">
<input type="button" value="+/−" id="btn+/−" style="width: 24px" onclick="show('-')">
<input type="button" value="=" id="btn=" style="width: 24px" onclick="evaluateCalc()">
<br>
<br>
<script>
function clearCalc() {
document.getElementById("Input").value = "";
}
function show(val) {
document.getElementById("Input").value += val;
}
function evaluateCalc(){
try{
var exp = document.getElementById("Input").value; document.getElementById("Input").value = eval(exp);
} catch(err){
//invalid mathematical input
}
}
function del(){
var input = document.getElementById("Input").value;
document.getElementById("Input").value = input.substring(0, input.length-1);
}
</script>

onclick on button,i want the button to be coloured as well as store a value

here,i have 3 fields-temp,hum,number.In Temp field,i have created four buttons.The functionality i want is that,when i click on 1st button then 1st button should be coloured and store a value='1'.
And similarly when i clicked on 2nd button then i want 1st,2nd buttons should coloured and store a value='2'.
when i clicked on 3rd button then i want 1st,2nd,3rd buttons should coloured and store a value='3'.
when i clicked on 4th button then i want all buttons should coloured and store a value='4'.
Same i want for hum n number field.how can i do???.Any help will be useful!!!!!
.button {
background-color: white;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
<div align='left'>Temp</div>
<input type="button" class="button" onclick="this.style.backgroundColor = 'red';" value="1">
<input type="button" class="button" onclick="this.style.backgroundColor = 'yellow';" value="2">
<input type="button" class="button" onclick="this.style.backgroundColor = 'green';" value="3">
<input type="button" class="button" onclick="this.style.backgroundColor = 'orange';" value="4">
<br><br>
<div align='left'>Hum</div>
<input type="button" class="button" onclick="this.style.backgroundColor = 'red';" value="1">
<input type="button" class="button" onclick="this.style.backgroundColor = 'yellow';" value="2">
<input type="button" class="button" onclick="this.style.backgroundColor = 'green';" value="3">
<input type="button" class="button" onclick="this.style.backgroundColor = 'orange';" value="4">
<br><br>
<div align='left'>number</div>
<input type="button" class="button" onclick="this.style.backgroundColor = 'red';" value="1">
<input type="button" class="button" onclick="this.style.backgroundColor = 'yellow';" value="2">
<input type="button" class="button" onclick="this.style.backgroundColor = 'green';" value="3">
<input type="button" class="button" onclick="this.style.backgroundColor = 'orange';" value="4">
<br><br>
<input type='submit' value='submit'>

Use jquery to change each button background color
$("#Temp1").click(function() {
$("#Temp4").css("background-color", "");
$("#Temp3").css("background-color", "");
$("#Temp2").css("background-color", "");
$("#Temp1").css("background-color", "red");
$("#temp").text(1);
});
$("#Temp2").click(function() {
$("#Temp4").css("background-color", "");
$("#Temp3").css("background-color", "");
$("#Temp2").css("background-color", "yellow");
$("#Temp1").css("background-color", "red");
$("#temp").text(2);
});
$("#Temp3").click(function() {
$("#Temp4").css("background-color", "");
$("#Temp3").css("background-color", "green");
$("#Temp2").css("background-color", "yellow");
$("#Temp1").css("background-color", "red");
$("#temp").text(3);
});
$("#Temp4").click(function() {
$("#Temp4").css("background-color", "orange");
$("#Temp3").css("background-color", "green");
$("#Temp2").css("background-color", "yellow");
$("#Temp1").css("background-color", "red");
$("#temp").text(4);
});
.button {
background-color: white;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align='left'>Temp: <span id="temp"></span></div>
<input type="button" class="button" id="Temp1">
<input type="button" class="button" id="Temp2">
<input type="button" class="button" id="Temp3">
<input type="button" class="button" id="Temp4">
<br><br>
<input type='submit' value='submit'>

I have done to only temp part, you can do it other as same
I have done some changes in html, I have put id for input tags and removed onClick() function and added in jQuery file.
<div align='left'>Temp</div>
<input type="button" class="button" value="1" id="one">
<input type="button" class="button" value="2" id="two">
<input type="button" class="button" value="3" id="three">
<input type="button" class="button" value="4" id="four">
<br><br>
</div>
jQuery
$(document).ready(function(){
$("#one").click(function(){
$('#one').css('background-color','red');
alert('one');
$("#one").val()=1;
$("#one").attr('value', '1');
})
$("#two").click(function(){
$('#two').css('background-color','yellow');
$('#one').css('background-color','red');
$("#one").attr('value', '2');
$("#two").attr('value', '2');
})
$("#three").click(function(){
$('#two').css('background-color','yellow');
$('#one').css('background-color','red');
$('#three').css('background-color','green');
$("#one").attr('value', '3');
$("#two").attr('value', '3');
$("#three").attr('value', '3');
})
$("#four").click(function(){
$('#two').css('background-color','yellow');
$('#one').css('background-color','red');
$('#three').css('background-color','green');
$('#four').css('background-color','grey');
$("#one").attr('value', '4');
$("#two").attr('value', '4');
$("#three").attr('value', '4');
$("#four").attr('value', '4');
})
});

I want the value of my button to appear in a textbox upon clicking the button

I am creating an onscreen keyboard, and want a function which will allow when any of the buttons are pressed, for their values to appear in a text box to the side of the keyboard. The code I have so far is:-
<script type="text/javascript">
function onclick(){
document.getElementById("output").value
=document.getElementById("Q").value;
}
</script>
And the HTML code below:-
<div class ="Row">
<div class="Box2">
<form id="keyboard" name="keyboard">
<div>
<input type="button" onclick='onclick' id="Q" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
</div>
</form>
<input type='text' id='output' />
</div>
</div>
</div>

You have it tagged as jQuery, so here is a more elegant jQuery solution: Throw that code away and use a single delegated jQuery event handler. Start with something like this:
$('[name=keyboard]').on('click', 'input[type=button]', function(){
var value = $(this).attr('value');
$('#output').val($('#output').val() + value);
});
JSFiddle: https://jsfiddle.net/TrueBlueAussie/kaau601u/
Obviously you need to handle the SPACE and ENTER as special cases, but you gave no clues what you are doing next, so leaving that to the reader to finish :)
Notes:
You either need to place this code after the elements it references or put it in a DOM ready handler.
Like this:
$(function(){
$('[name=keyboard]').on('click', 'input[type=button]', function(){
var value = $(this).attr('value');
$('#output').val($('#output').val() + value);
});
});
Or you can use a document attached handler, which is always present:
Like this:
$(document).on('click', 'input[type=button]', function(){
var value = $(this).attr('value');
$('#output').val($('#output').val() + value);
});

//Please try this working example
$('#Q').click(function(){
$('#output').val($(this).val());
console.log($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Row">
<div class="Box2">
<form name=keyboard name="keyboard">
<div>
<input type="button" id="Q" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
</div>
</form>
<input type='text' id='output' />
</div>
</div>

I have made a slight change in the output field type with working SPACE and ENTER
jQuery('form[name="keyboard"] input[type="button"]').click(function(){
var inpVal = jQuery(this).val();
if( inpVal == "SPACE" ){
inpVal = ' ';
}else if( inpVal == "ENTER" ){
inpVal = '\n';
}
var val = jQuery('#output').val() + inpVal;
jQuery('#output').val(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class ="Row">
<div class="Box2">
<form name=keyboard name="keyboard">
<div>
<input type="button" onclick='onclick' id="Q" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE" >
<input type="button" value="ENTER">
</div>
</form>
<textarea id="output" cols="40" rows="5"></textarea>
</div>
</div>
</div>

This might help
//this this the script that makes it happen...
$('form[name=keyboard]>div>input[type=button]').click(function(){
$('#output').val($(this).val());
console.log($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Row">
<div class="Box2">
<form name="keyboard">
<div>
<input type="button" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
</div>
</form>
<input title="keyboard" type='text' id='output' />
</div>
</div>

Using just javaScript and no need for jQuery.
This example including the use of the SPACE and ENTER keys. As a bonus I added a BACKSPACE key.
Note your output text field was changed to text area to allow for the use of the enter key.
Create a single event listener for the form. This can be done using document query selector.
Capture the click event with the query selector.
Note on the <body> tag we add the onload event handler so when the document is served up the event listener is assigned to the <form> node.
Any click inside the <form> will be tested
HTML and javaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
<script type="text/javascript">
var g = {};
function assignListener()
{
/*event listener for keyboard*/
g.keyboard = document.querySelector("#keyboard");
g.keyboard.addEventListener("click", addToTextBox,false);
}
function addToTextBox(e)
{
/*
with query selector the event (e) is passed along
to the function. You can examine the event and get
all kinds of useful stuff from it, like type of event, where it came from, attributes like id, class list etc.
*/
if (e.target.type == 'button')
{
switch (e.target.value)
{
case "ENTER":
document.getElementById('output').value += '\n';
break;
case "SPACE":
document.getElementById('output').value += ' ';
break;
case "BACKSPACE":
document.getElementById('output').value = document.getElementById('output').value.substr(0,document.getElementById('output').value.length-1);
break;
default:
document.getElementById('output').value += e.target.value;
}
}
}
</script>
</head>
<body onload="assignListener();">
<div class ="Row">
<div class="Box2">
<form id=keyboard>
<div>
<input type="button" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
<input type="button" value="BACKSPACE">
</div>
</form>
<!-- <input type='text' id='output' /> -->
<textarea id="output" rows="5" cols="75"></textarea>
</div>
</div>
</body>
</html>

How to Pass toggled data on submit?

i have the following form
<html>
<head>
<style type="text/css">
.on {
border:1px outset;
color:#369;
background:#efefef;
}
.off {
border:1px outset;
color:#369;
background:#f9d543;
}
</style>
<script language="javascript">
function togglestyle(el){
if(el.className == "on") {
el.className="off";
} else {
el.className="on";
}
}
</script>
</head>
<body>
<form method="POST" action="#" >
<input type="button" id="btn" value="1" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="2" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="3" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="4" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="5" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="6" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
Here i want to use toggle action, i dont want to use checkbox here, I want to pass the toggled value from this form. Is there any way to do this?
in the same page i already have some checkbox with with check action enabled, here i want to pass max 3 toggled values, i have tried using radio box but that will work only for one, not with 3. how to do this.

Categories

Resources