I have an asp.net content page and I need to write a calculator inside(?) it.
<%# Page Title="Calculator" Language="C#" AutoEventWireup="true" CodeBehind="Calculator.aspx.cs" Inherits="WebApplication2.Calculator" MasterPageFile="~/Site.Master" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"></asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<!-- calculator code here -->
</asp:Content>
I have a html page with a simple javascript calculator:
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function addvalue(arg1) {
Calc.Input.value += arg1;
}
</script>
<form action="#" name="Calc">
<table style="width: 160px" border="2">
<tr>
<td colspan="4">
<input id="Text1" type="text" maxlength=16 name="Input" style="width:98%" /></td>
</tr>
<tr>
<td style="width: 40px">
<input id="Button1" type="button" value="1" onclick="addvalue('1')" /></td>
<td style="width: 40px">
<input id="Button2" type="button" value="2" onclick="addvalue('2')" /></td>
<td style="width: 40px">
<input id="Button3" type="button" value="3" onclick="addvalue('3')" /></td>
<td>
<input id="Button7" type="button" value="+" onclick="addvalue(' + ')" /></td>
</tr>
<tr>
<td>
<input id="Button4" type="button" value="4" onclick="addvalue('4')" /></td>
<td>
<input id="Button5" type="button" value="5" onclick="addvalue('5')" /></td>
<td>
<input id="Button6" type="button" value="6" onclick="addvalue('6')" /></td>
<td>
<input id="Button8" type="button" value="-" onclick="addvalue(' - ')" /></td>
</tr>
<tr>
<td>
<input id="Button9" type="button" value="7" onclick="addvalue('7')" /></td>
<td>
<input id="Button10" type="button" value="8" onclick="addvalue('8')" /></td>
<td>
<input id="Button11" type="button" value="9" onclick="addvalue('9')" /></td>
<td>
<input id="Button12" type="button" value="*" onclick="addvalue('*')" /></td>
</tr>
<tr>
<td>
<input id="Button13" type="button" value="C" onclick="Calc.Input.value=null" /></td>
<td>
<input id="Button14" type="button" value="0" onclick="addvalue('0')" /></td>
<td>
<input id="Button15" type="button" value="=" onclick="Calc.Input.value = eval(Calc.Input.value)" /></td>
<td>
<input id="Button16" type="button" value="/" onclick="addvalue(' / ')" /></td>
</tr>
</table>
</form>
</body>
</html>
I need to adapt this code for using with an asp.net content page. How can I do it ?
I know that asp.net is server-side technology and javascript is a client-side. But I don't know how to use one inside another =\
Yes it's possible, only put the JS or Jquery script inside the content looks the code below:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<table style="width: 160px" border="2">
<tr>
<td colspan="4">
<input id="Text1" type="text" maxlength=16 name="Input" style="width:98%" /></td>
</tr>
<tr>
<td style="width: 40px">
<input id="Button1" type="button" value="1" onclick="addvalue('1')" /></td>
<td style="width: 40px">
<input id="Button2" type="button" value="2" onclick="addvalue('2')" /></td>
<td style="width: 40px">
<input id="Button3" type="button" value="3" onclick="addvalue('3')" /></td>
<td>
<input id="Button7" type="button" value="+" onclick="addvalue(' + ')" /></td>
</tr>
<tr>
<td>
<input id="Button4" type="button" value="4" onclick="addvalue('4')" /></td>
<td>
<input id="Button5" type="button" value="5" onclick="addvalue('5')" /></td>
<td>
<input id="Button6" type="button" value="6" onclick="addvalue('6')" /></td>
<td>
<input id="Button8" type="button" value="-" onclick="addvalue(' - ')" /></td>
</tr>
<tr>
<td>
<input id="Button9" type="button" value="7" onclick="addvalue('7')" /></td>
<td>
<input id="Button10" type="button" value="8" onclick="addvalue('8')" /></td>
<td>
<input id="Button11" type="button" value="9" onclick="addvalue('9')" /></td>
<td>
<input id="Button12" type="button" value="*" onclick="addvalue('*')" /></td>
</tr>
<tr>
<td>
<input id="Button13" type="button" value="C" onclick="Calc.Input.value=null" /></td>
<td>
<input id="Button14" type="button" value="0" onclick="addvalue('0')" /></td>
<td>
<input id="Button15" type="button" value="=" onclick="Calc.Input.value = eval(Calc.Input.value)" /></td>
<td>
<input id="Button16" type="button" value="/" onclick="addvalue(' / ')" /></td>
</tr>
</table>
<script type="text/javascript">
function addvalue(arg1) {
Calc.Input.value += arg1;
}
</script>
</asp:Content>
I hope that helps
Related
Intro
Hello! I'm still very new to coding in general and using platforms like Stackoverflow, GitHub, etc so I apologize in advance if I have done something incorrectly within this post as well.
It is also my first post so please let me know of any corrections to make so I know how to make a more coherent posts in the future.
Problem
I have followed a HTML, CSS, & JS calculator tutorial online and have done the same exact step, however, when I ran the code my buttons have came out in different sizes as shown in the image below:
image of the buttons in different sizes
This is a screenshot of the video's code:
Calculator tutorial code
I'm unsure of how to pinpoint my errors.
This is the code that I have up till the point where I encountered this error:
function insert(num) {
document.form.textview.value = document.form.textview.value + num
}
* {
margin: 0;
padding: 0;
}
.button {
width: 50;
height: 50;
font-size: 25;
margin: 2;
cursor: pointer;
}
.textview {
width: 217;
margin: 5;
font-size: 25;
padding: 5;
}
<html>
<head>
</head>
<body>
<div class="main">
<form name="form">
<input class="textview" name="textview">
<table>
<tr>
<td><input type="button" value="C"></td>
<td><input type="button" value="<"></td>
<td><input type="button" value="/"></td>
<td><input type="button" value="x"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7"></td>
<td><input class="button" type="button" value="8"></td>
<td><input class="button" type="button" value="9"></td>
<td><input class="button" type="button" value="-"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4"></td>
<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="+"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="insert(1)"></td>
<td><input type="button" value="2"></td>
<td><input type="button" value="3"></td>
<td><input type="button" value="+"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Is the issue possibly within the style element?
Thank you!
I found typo error in you input tag, just you have to write "class" where you have written "type", see below for better understanding.
<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="+"></td>
Change to :
<td><input class="button" value="5"></td>
<td><input class="button" value="6"></td>
<td><input class="button" value="+"></td>
function insert(num){
document.form.textview.value=document.form.textview.value+num
}
<style>
*{
margin:0px;
padding: 0px;
}
.button{
width:50px;
height: 50px;
font-size: 25px;
margin: 2px;
cursor: pointer;
}
.textview{
width: 217px;
margin: 5px;
font-size: 25px;
padding: 5px;
}
</style>
<body>
<div class="main">
<form name="form">
<input class="textview" name="textview">
<table>
<tr>
<td><input class="button" type="button" value="C"></td>
<td><input class="button" type="button" value="<"></td>
<td><input class="button" type="button" value="/"></td>
<td><input class="button" type="button" value="x"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7"></td>
<td><input class="button" type="button" value="8"></td>
<td><input class="button" type="button" value="9"></td>
<td><input class="button" type="button" value="-"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4"></td>
<td><input class="button" type="button" value="5"></td>
<td><input class="button" type="button" value="6"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
<tr>
<td><input class="button" type="button" value="1" onclick="insert(1)"></td>
<td><input class="button" type="button" value="2"></td>
<td><input class="button" type="button" value="3"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
</table>
</form>
</div>
</body>
Some of your <input> elements do not have a class="button" as well as a type="button".
You need both - the type attribute to set the input type to button (or it will be a text box), and the class attribute for the appropriate CSS styles.
The body should look like this:
<body>
<div class="main">
<form name="form">
<input class="textview" name="textview">
<table>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="<"></td>
<td><input type="button" class="button" value="/"></td>
<td><input type="button" class="button" value="x"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7"></td>
<td><input class="button" type="button" value="8"></td>
<td><input class="button" type="button" value="9"></td>
<td><input class="button" type="button" value="-"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4"></td>
<td><input class="button" type="button" value="5"></td>
<td><input class="button" type="button" value="6"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
<tr>
<td><input class="button" type="button" value="1" onclick="insert(1)"></td>
<td><input class="button" type="button" value="2"></td>
<td><input class="button" type="button" value="3"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
</table>
</form>
</div>
</body>
How to get the numbers displayed in the display textbox when the user clicks the number buttons? I do not know what to put in my numInputF() function, I want to use a for-loop function, but I do not know how.
<script>
var initialMoney = 1000; //Customer's initial money is $1000
var display;
/* Set the "Type amount and select operation to blank." */
function setBlankF(){
document.getElementById("display").value = "";
}
/* Gets the user input when buttons are clicked. */
function numInputF(){
}
This is my body part. I know that I should put something on the onclick button, but I have not figured out how to make my function, which is why it is blank.
<table border="1">
<caption>ATM 360</caption>
<tr>
<td colspan="4">
<input type="text" id="display" value="Type amount and select operation" size="30" onclick="setBlankF()">
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="">
</td>
<td>
<input type="button" value="2" onclick="">
</td>
<td>
<input type="button" value="3" onclick="">
</td>
<td>
<input type="button" value="Withdrawal" id="withdraw" onclick="">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" onclick="">
</td>
<td>
<input type="button" value="5" onclick="">
</td>
<td>
<input type="button" value="6" onclick="">
</td>
<td>
<input type="button" value="Deposit" id="deposit" onclick="">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" onclick="">
</td>
<td>
<input type="button" value="8" onclick="">
</td>
<td>
<input type="button" value="9" onclick="">
</td>
<td>
<input type="button" value="Retype" id="retype" onclick="">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" value="0" onclick="">
</td>
<td>
</td>
<td>
<input type="button" value="End" id="end" onclick="">
</td>
</tr>
</table>
Thank you in advance.
First attach the click event to all the buttons, so get all buttons elements with type=button using .querySelectorAll() then loop through them and pick one by one buttons[i] and attach the click event using .addEventListener this click will lead us to the function numInputF as defined in the passed arguments :
var buttons = document.querySelectorAll('[type="button"]');
for(var i=0;i<buttons.length;i++){
buttons[i].addEventListener("click", numInputF, false);
}
Then in your function you could get the value like :
function numInputF(){
alert(this.value);
}
Hope this helps.
var buttons = document.querySelectorAll('[type="button"]');
for(var i=0;i<buttons.length;i++){
buttons[i].addEventListener("click", numInputF, false);
}
function numInputF(){
alert(this.value);
}
<table border="1">
<caption>ATM 360</caption>
<tr>
<td colspan="4">
<input type="text" id="display" value="Type amount and select operation" size="30" onclick="setBlankF()">
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="">
</td>
<td>
<input type="button" value="2" onclick="">
</td>
<td>
<input type="button" value="3" onclick="">
</td>
<td>
<input type="button" value="Withdrawal" id="withdraw" onclick="">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" onclick="">
</td>
<td>
<input type="button" value="5" onclick="">
</td>
<td>
<input type="button" value="6" onclick="">
</td>
<td>
<input type="button" value="Deposit" id="deposit" onclick="">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" onclick="">
</td>
<td>
<input type="button" value="8" onclick="">
</td>
<td>
<input type="button" value="9" onclick="">
</td>
<td>
<input type="button" value="Retype" id="retype" onclick="">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" value="0" onclick="">
</td>
<td>
</td>
<td>
<input type="button" value="End" id="end" onclick="">
</td>
</tr>
</table>
I am messing a bit with JavaScript and decided to make a calculator. For now all I want it to do is to input what button was pressed into Answer box, but I can't make it to work, I think something is wrong with my functions, but I can't figure out what, please help...
<!DOCTYPE html>
<html>
<body>
<script>
var one = function() {
document.getElementById("input").innerHTML = "1"
}
function two() {
document.getElementById("input").innerHTML = "2"
}
function three() {
document.getElementById("input").innerHTML = "3"
}
function four() {
document.getElementById("input").innerHTML = "4"
}
function five() {
document.getElementById("input").innerHTML = "5"
}
function six() {
document.getElementById("input").innerHTML = "6"
}
function seven() {
document.getElementById("input").innerHTML = "7"
}
function eight() {
document.getElementById('input').innerHTML = "8"
}
function nine() {
document.getElementById('input').innerHTML = "9"
}
function zero() {
document.getElementById('input').innerHTML = "0"
}
function minimum() {
document.getElementById('input').innerHTML = "<"
}
function maximum() {
document.getElementById('input').innerHTML = ">"
}
function add() {
document.getElementById('input').innerHTML = "+"
}
function substract() {
document.getElementById('input').innerHTML = "-"
}
function multiply() {
document.getElementById('input').innerHTML = "*"
}
function divide() {
document.getElementById('input').innerHTML = "/"
}
function calculate() {}
function reset() {}
</script>
<table border="1">
<tr>
<td colspan="4">
<table border="1">
<tr>
<td>
<input type="text" value="Answer" id="input">
</td>
</tr>
</table>
</td>
<tr>
<td>
<input type="button" value="1" onclick="one()">
</td>
<td>
<input type="button" value="2" onclick="two()">
</td>
<td>
<input type="button" value="3" onclick="three()">
</td>
<td>
<input type="button" value="+" onclick="add()">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" onclick="four()">
</td>
<td>
<input type="button" value="5" onclick="five()">
</td>
<td>
<input type="button" value="6" onclick="six()">
</td>
<td>
<input type="button" value="- " onclick="substract()">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" onclick="seven">
</td>
<td>
<input type="button" value="8" onclick="eight">
</td>
<td>
<input type="button" value="9" onclick="nine">
</td>
<td>
<input type="button" value="* " onclick="multiply()">
</td>
</tr>
<tr>
<td>
<input type="button" value="<" onclick="minimum">
</td>
<td>
<input type="button" value="0" onclick="zero">
</td>
<td>
<input type="button" value=">" onclick="maximum">
</td>
<td>
<input type="button" value="/ " onclick="divide()">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value=" Calculate! " onclick="calculate()">
</td>
<td>
<input type="button" value="C" onclick="reset()">
</td>
</tr>
</table>
</body>
</html>
You need to set the value attribute of the input element, not the innerHTML, for example:
document.getElementById("input").value = "1"
If you want to set the value of the clicked button to the answer field, you can simply use this:
DEMO
var a = document.querySelectorAll('input[type=button]');
for (var i = 0;i<a.length;i++) {
a[i].addEventListener('click',addthis);
}
function addthis() {
document.getElementById('input').value = this.value;
}
Please note that an input field has an value you can alter, not innerHTML
And you don't need all the inline javascript in your html, querySelectorAll does the job
<table border="1">
<tr>
<td colspan="4">
<table border="1">
<tr>
<td>
<input type="text" value="Answer" id="input">
</td>
</tr>
</table>
</td>
<tr>
<td>
<input type="button" value="1" >
</td>
<td>
<input type="button" value="2" >
</td>
<td>
<input type="button" value="3" >
</td>
<td>
<input type="button" value="+" >
</td>
</tr>
<tr>
<td>
<input type="button" value="4" >
</td>
<td>
<input type="button" value="5" >
</td>
<td>
<input type="button" value="6" >
</td>
<td>
<input type="button" value="- " >
</td>
</tr>
<tr>
<td>
<input type="button" value="7" >
</td>
<td>
<input type="button" value="8">
</td>
<td>
<input type="button" value="9">
</td>
<td>
<input type="button" value="*">
</td>
</tr>
<tr>
<td>
<input type="button" value="<" >
</td>
<td>
<input type="button" value="0">
</td>
<td>
<input type="button" value=">">
</td>
<td>
<input type="button" value="/">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value=" Calculate! ">
</td>
<td>
<input type="button" value="C" >
</td>
</tr>
</table>
</body>
</html>
As a sidenote, to make your code better maintainable, I'd change the id from your answer input field to something more precise, like "answer" as input might be a little confusing.
try:
var one = function() {
document.getElementById("input").value = "1"
}
HTml
<form action="#">
<table cellpadding="0" cellspacing="0" width="100%" class="formTbl">
<tr>
<td width="20%"><label>ExportDate</label></td>
<td width="30%"><input name="TxtExportDate" type="text" id="TxtExportDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgEExpDate" />
<span id="cvExportDate" style="color:Red;display:none;"></span>
</td>
<td width="20%"><label>UniqueExportId</label></td>
<td width="30%"><input name="TxtUniqueExportId" type="text" id="TxtUniqueExportId" /></td>
</tr>
<tr>
<td><label>Exporter Of Record</label></td>
<td><input name="TxtExporterOfRecord" type="text" id="TxtExporterOfRecord" /></td>
<td><label>Destination</label></td>
<td><input name="TxtDestination" type="text" id="TxtDestination" /></td>
</tr>
<tr>
<td><label>Transport Mode</label></td>
<td><input name="TxtTransportMode" type="text" id="TxtTransportMode" /></td>
<td><label>Carrier</label></td>
<td><input name="TxtCarrier" type="text" id="TxtCarrier" /></td>
</tr>
<tr>
<td><label>AESNo</label></td>
<td><input name="TxtAESNo" type="text" id="TxtAESNo" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvAESNo" style="display:none;"></span></td>
<td><label>AESDate</label></td>
<td><input name="TxtAESDate" type="text" id="TxtAESDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgAESDate" />
<span id="cvAESDate" style="color:Red;display:none;"></span>
</td>
</tr>
<tr>
<td><label>Status</label></td>
<td><input name="txtStatus" type="text" id="txtStatus" /></td>
<td colspan="2"></td>
</tr>
<tr>
<td><label>Reference 1</label></td>
<td><input name="TxtReference1" type="text" id="TxtReference1" /></td>
<td><label>Reference 2</label></td>
<td><input name="TxtReference2" type="text" id="TxtReference2" /></td>
</tr>
<tr>
<td><label>Reference 3</label></td>
<td><input name="TxtReference3" type="text" id="TxtReference3" /></td>
<td><label>Reference 4</label></td>
<td><input name="TxtReference4" type="text" id="TxtReference4" /></td>
</tr>
<tr>
<td><label>Reference 5</label></td>
<td><input name="TxtReference5" type="text" id="TxtReference5" /></td>
<td><label>Reference 6</label></td>
<td><input name="TxtReference6" type="text" id="TxtReference6" /></td>
</tr>
<tr>
<td><label>Reference 7</label></td>
<td><input name="TxtReference7" type="text" id="TxtReference7" /></td>
<td><label>Reference 8</label></td>
<td><input name="TxtReference8" type="text" id="TxtReference8" /></td>
</tr>
<tr>
<td><label>Direct ID</label></td>
<td><input name="TxtDirectId" type="text" id="TxtDirectId" /></td>
<td><label>Produced Date</label></td>
<td><input name="TxtProducedDate" type="text" id="TxtProducedDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgProduceDate" />
<span id="cvProducedDate" style="color:Red;display:none;"></span>
</td>
</tr>
<tr>
<td><label>Goods Issued Date</label></td>
<td><input name="TxtGoodsIssuedDate" type="text" id="TxtGoodsIssuedDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgGoodIssueDate" />
<span id="cvGoodsIssuedDate" style="color:Red;display:none;"></span>
</td>
<td><label>Shipping Date</label></td>
<td><input name="TxtShippingDate" type="text" id="TxtShippingDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgShippingDate" />
<span id="cvShippingDate" style="color:Red;display:none;"></span>
</td>
</tr>
<tr>
<td><label>Part No</label></td>
<td><input name="TxtPartNo" type="text" id="TxtPartNo" /></td>
<td><label>Alternate Part</label></td>
<td><input name="TxtAlternatePart" type="text" id="TxtAlternatePart" /></td>
</tr>
<tr>
<td><label>Unit Of Measuremnt</label></td>
<td><input name="TxtUnitOfMeasuremnt" type="text" id="TxtUnitOfMeasuremnt" /></td>
<td><label>Export Qty</label></td>
<td><input name="TxtExportQty" type="text" id="TxtExportQty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvExportQty" style="display:none;"></span></td>
</tr>
<tr>
<td><label>Part Description</label></td>
<td><input name="TxtDescription" type="text" id="TxtDescription" /></td>
<td><label>Claim Code</label></td>
<td><input name="TxtClaimCode" type="text" id="TxtClaimCode" /></td>
</tr>
<tr>
<td><label>Avail Qty</label></td>
<td><input name="TxtAvailQty" type="text" id="TxtAvailQty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvAvailQty" style="display:none;"></span></td>
<td><label>Cont Qty</label></td>
<td><input name="TxtContQty" type="text" id="TxtContQty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvContQty" style="display:none;"></span></td>
</tr>
<tr>
<td><label>ScheduledB</label></td>
<td><input name="TxtScheduledB" type="text" maxlength="10" id="TxtScheduledB" /></td>
<td><label>HIT</label></td>
<td><input name="TxtHIT" type="text" id="TxtHIT" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvHIT" style="display:none;"></span></td>
</tr>
<tr>
<td><label>FTA Duty</label></td>
<td><input name="TxtFTADuty" type="text" id="TxtFTADuty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvFTADuty" style="display:none;"></span></td>
<td><label>FTA Rate</label></td>
<td><input name="TxtFTARate" type="text" id="TxtFTARate" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvFTARate" style="display:none;"></span></td>
</tr>
<tr>
<td><label>US Duty</label></td>
<td><input name="TxtUSDuty" type="text" id="TxtUSDuty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvUSDuty" style="display:none;"></span></td>
<td><label>US Rate</label></td>
<td><input name="TxtUSRate" type="text" id="TxtUSRate" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvUSRate" style="display:none;"></span></td>
</tr>
<tr>
<td>
<label>
Share Partner Code</label>
</td>
<td>
<input name="TxtSharePartnerCode" type="text" id="TxtSharePartnerCode" />
</td>
<td><label> Contract Number </label> </td>
<td>
<input name="txtContractNumber" type="text" maxlength="15" id="txtContractNumber" class="TextBox" autocomplete="Off" />
</td>
</tr>
<tr>
<td></td>
<td colspan="3">
<input type="submit" name="BtnAdd" value="Save" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("BtnAdd", "", true, "AddExport", "", false, false))" id="BtnAdd" class="blueBtn" />
<input type="submit" name="BtnCancel" value="Cancel" id="BtnCancel" class="blueBtn" />
</td>
</tr>
</table>
<input type="submit" value="submit"/>
</form>
Javascript
$("input").bind("keydown", function(event) {
if (event.which === 13) {
event.stopPropagation();
event.preventDefault();
$(this).nextAll("input").eq(0).focus();
}
});
I have update this fiddle
http://jsfiddle.net/andrewwhitaker/GRtQY/
with this
fiddle
http://jsfiddle.net/mparvez1986/L8Ax7/
but updated fiddle is not working, please help
That's because .nextAll() only selects the next siblings and in your first fiddle inputs are siblings which is not case in the second fiddle. The better option in your case is using the .index() method:
var $inputs = $("input").on("keydown", function(event) {
if (event.which === 13) {
event.stopPropagation();
event.preventDefault();
// `i` is the index of the current element
// in the cached jQuery collection
var i = $inputs.index(this);
$inputs.eq(i+1).focus();
}
});
http://jsfiddle.net/6S7Kc/
Below is the JavaScript that I used to getElementById but this is not working:
<script type="text/javascript">
function invoke(but)
{
if(but==5)
{
alert(document.firstChild);
}
else if(but==6)
{
window.location.href="index1.jsp";
}
}
function UnBloc1()
{
document.getElementById("temp2").style.display="block";
document.getElementById("temp4").style.display="block";
}
</script>
and the JSP applicable is a below:
<%
try{
int i=0;
int temp=0, temp1=0,temp2=0, temp3=0, temp4=0;
for(i=0;i<14;i++)
{
temp=temp+1;
temp1=temp1+1;
temp2=temp2+1;
temp3=temp3+1;
temp4=temp4+1;
i++;
%>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="<%=i%>" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc<%=i%>" name="abc<%=i%>" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp1<%=i%>" id="temp1<%=i%>" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp3<%=i%>" id="temp3<%=i%>" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp4<%=i%>" id="temp4<%=i%>" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<% }
}
catch(Exception e)
{
out.println(e);
}
%>
The source code generated is as below. Here I want to know how to get the dynamic button values in getElmentById for button for UnBloc() method in JavaScript.
<html>
<head><script type="text/javascript">
function invoke(but)
{
if(but==5)
{
alert("hi");
}
else if(but==6)
{
window.location.href="index1.jsp";
}
}
function UnBloc1()
{
document.getElementById("temp2").style.display="block";
document.getElementById("temp4").style.display="block";
}
</script> </head>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="1" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc1" name="abc1" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp11" id="temp11" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp31" id="temp31" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp41" id="temp41" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="3" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc3" name="abc3" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp13" id="temp13" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp33" id="temp33" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp43" id="temp43" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="5" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc5" name="abc5" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp15" id="temp15" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp35" id="temp35" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp45" id="temp45" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="7" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc7" name="abc7" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp17" id="temp17" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp37" id="temp37" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp47" id="temp47" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="9" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc9" name="abc9" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp19" id="temp19" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp39" id="temp39" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp49" id="temp49" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="11" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc11" name="abc11" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp111" id="temp111" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp311" id="temp311" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp411" id="temp411" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="13" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc13" name="abc13" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp113" id="temp113" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp313" id="temp313" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp413" id="temp413" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
</table></body></html>