In the below sample, I am trying to have the navigation within the div. Used a JS function to get the current element and check and set the focus. But it sets the focus to next element always. Can somebody check?
function loadOverlay(event) {
var oly = document.getElementById('overlay');
oly.style.display = "block";
document.getElementById('userName').focus();
}
// restore page to normal
function restore() {
// document.body.removeChild(document.getElementById("overlay"));
//document.getElementById('overlay').focus();
}
// restore page to normal
function sayHi() {
alert("Hi");
}
function navigate(event, maxtab) {
//alert(event);
if (window.event) {
caller = window.event.srcElement; //Get the event caller in IE.
key = window.event.keyCode; //Get the keycode in IE.
} else {
caller = event.target; //Get the event caller in Firefox.
key = event.which; //Get the keycode in Firefox.
}
var currtab = document.activeElement.tabIndex;
// alert(key);
if (key == 9) {
if (currtab == 6) {
document.getElementById("userName").focus();
}
}
}
#outer {
width: 100%;
height: 100%;
}
.overlay {
background-color: grey;
opacity: .7;
filter: alpha(opacity=70);
position: fixed;
top: 100px;
left: 100px;
width: 500px;
height: 300px;
z-index: 10;
border: 1px solid black;
display: none;
}
<div id="outer">
<p>Check overlay</p>
<input type=button onclick="loadOverlay(event)" value="Open overlay">
</div>
<div id="overlay" class="overlay" onkeydown="navigate(event, 5)">
<h1>Enter your Name and Pasword </h1><br>
<table border=1>
<tr>
<td>Enter Your Name :</td>
<td>
<input tabindex="2" type="text" id="userName" value=""></td>
</tr>
<tr>
<td>Enter Your PassWord :</td>
<td><input tabindex="3" type="password" id="userPassWord" value=""></td>
</tr>
<tr>
<td>Confirm Your PassWord :</td>
<td><input tabindex="4" type="password" id="userRePassWord" value=""></td>
</tr>
<tr>
<td align=center><input tabindex="5" type="submit" id="formsub" name="Submit" value="Submit"></td>
<td align=center><input tabindex="6" type="reset" id="formref" name="reset" value="Refresh"></td>
</tr>
</table>
</div>
Related
I want to place asterisk in the right side of the each text box individually when I am submitting the empty form/field. The code is working but asterisk is displaying in the end of the form.
This is my code:
[<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
input { text-align:center; border:2px solid #CCC; }
#wrap { width:400px; height:200px; margin:20px; padding:10px; }
#une { margin-top:10px; }
#reg {margin-top:10px; }
.a13B { color:#F00; }
.cntr { text-align:center; }
</style>
</head>
<body>
<div id="wrap">
<form id="regform" name="registerationform" method="POST">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="300">
<tr>
<td>First Name: </td>
<td class="cntr">
<input type="text" name="fnametxt" size="20"></td>
</tr>
<tr>
<td>Second Name: </td>
<td class="cntr">
<input type="text" name="snametxt" size="20"> </td>
</tr>
<tr>
<td>User Name:</td>
<td class="cntr">
<input type="text" name="unametxt" size="20"> </td>
</tr>
<tr>
<td>Email Address: </td>
<td class="cntr">
<input type="text" name="emailtxt" size="20"> </td>
</tr>
<tr>
<td>Password : </td>
<td class="cntr"><input type="password" name="pwdtxt" size="20"> </td>
</tr>
<tr>
<td>Confirm : </td>
<td class="cntr"><input type="password" name="cpwdtxt" size="20"> </td>
</tr>
</table>
<input id="reg" name="reg" type="button" onclick="regvalidate(this.form)" value="Register Now">
</form>
<div id="une" class="a13B">
</div>
</div>
<!-- end wrap -->
<script type="text/javascript">
var uneObj=document.getElementById("une"); // object ref to msg line
var currentBrdObj;
//
function regvalidate(formObj)
{ uneObj.innerHTML=""; // clear msg line before resubmitting
// gather object ref to input boxes
var allInputs=document.getElementById("regform").getElementsByTagName("input");
// check if value of box is ""
for(var i=0;i<allInputs.length;i++)
{ if(allInputs\[i\].name !="reg") // ignore submit button
{ if(allInputs\[i\].value=="")
{ uneObj.innerHTML=msg\[i\];
if(currentBrdObj){currentBrdObj.style.border="2px solid #CCC"; }
allInputs\[i\].style.border="2px solid #F00";
currentBrdObj=allInputs\[i\];
allInputs\[i\].onclick=function(){ this.style.border="2px solid #CCC"; }
return;
} } }
// check if password and confirm are the same
if((formObj.pwdtxt.value) != (formObj.cpwdtxt.value))
{ uneObj.innerHTML = msg\[msg.length-1\]; // last msg in array
formObj.pwdtxt.value = ""; formObj.pwdtxt.style.border="";
formObj.cpwdtxt.value = ""; formObj.cpwdtxt.style.border="";
return;
}
// all ok so submit form
uneObj.innerHTML = "All ok so submitting form";
formObj.submit();
}
// -----
var msg =\["*","*",
"*","*",
"*","*"\];
msg\[msg.length\]="Passwords must be equal.<br>Please type a password";
//
</script>
</body>
</html>][1]
#PawanKumar
Here is your code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#submitBtn').on('click', function(e) {
debugger;
e.preventDefault();
var fields = document.getElementsByTagName('input');
for (var i = 0; i < fields.length; i++) {
if (fields[i].hasAttribute('required')) {
if (fields[i].value == "") {
fields[i].classList.add('redBorder');
$(fields[i]).after('*');
} else {
fields[i].classList.remove('redBorder');
}
}
}
});
});
</script>
<style>
.redBorder {
border: 2px solid red;
border-radius: 2px;
}
</style>
</head>
<form novalidate>
<input type="text" placeholder="first name" required/><br/><br/>
<input type="text" placeholder="last name" /><br/><br/>
<button id="submitBtn" value="Submit">Submit</button>
</form>
</html>
Use span element to display asterisk at the end of text box. Try this :
<input type="text" id="name"/> <span style="color:red"> * </span>
Hope this solves your requirement.
Why bother with all that mess?
<input type="text" name="fnametxt" required />*
<input type="email" name="emailtxt" required />*
<input type="submit" value="Register" />
JavaScript required: none at all
With the help of jquery after() method, you can achieve this.
$(fields[i]).after("<span class='redColor'>*</span>");
I have also added code to show red border for required input field.
Note: If you use <form> tag, then HTML5 will automatically does the validation and your script will not execute, so to prevent that use novalidate attribute in the form tag or just remove the form tag.
$(document).ready(function() {
$('#submitBtn').on('click', function(e) {
e.preventDefault();
var fields = document.getElementsByTagName('input');
for (var i = 0; i < fields.length; i++) {
if (fields[i].hasAttribute('required')) {
if (fields[i].value == "") {
fields[i].classList.add('redBorder');
$(fields[i]).after("<span class='redColor'>*</span>");
} else {
fields[i].classList.remove('redBorder');
}
}
}
});
});
.redBorder {
border: 2px solid red;
border-radius: 2px;
}
.redColor{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form novalidate>
<input type="text" placeholder="first name" required/><br/><br/>
<input type="text" placeholder="last name" /><br/><br/>
<button id="submitBtn" value="Submit">Submit</button>
</form>
Trying to trigger the submit functionality from JQuery. what am I doing wrong? In theory, this should work. I've tried about 4 different ways though.
I have tried
$('input#submit').trigger("click");
$( form:first ).submit();
$( form:first ).trigger("submit");
$('form#databaseActionForm').submit();
NOTHNG HAS WORKED (YET)?!
CODE:
<html lang="en">
<head>
<title>Database Management</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<style>
table td { border: 1px solid black; }
table td:first-child { text-align: left; }
</style>
<script>
<!--
$(document).ready(function() {
$('#erase').click(function() {
if (confirm("Are you sure that you want to ERASE ALL DATA from the database?"))
{
$('#buttonTypePressed').val("erase");
$('input#submit').trigger("click"); <!-- HERE -->
}
});
$('#update').click(function() {
var appID = $('#updateAppID').val();
var field = $('#fieldName').val();
var value = $('#newValue').val();
if (appID == null || appID == "") {
alert("You must enter the ID number of the entry you wish to modify.");
$('#updateAppID').focus();
}
else if (field == null || field == "") {
alert("You must choose which field you wish to modify.");
$('#fieldName').focus();
}
else if (value == null || value == "") {
alert("You must choose the new value you wish to appear in the database.");
$('#newValue').focus();
}
else {
$('#buttonTypePressed').val("update");
$('input#submit').trigger("click"); <!-- HERE -->
}
});
$('#delete').click(function() {
var appID = $('#deleteAppID').val();
if (appID == null || appID == "") {
alert("You must enter the ID number of the entry you wish to delete.");
$('#deleteAppID').focus();
}
else {
$('#buttonTypePressed').val("delete");
$('input#submit').trigger("click"); <!-- HERE -->
}
});
});
-->
</script>
</head>
<body>
<div id="container">
<from id="databaseActionForm" name="databaseActionForm" method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
<table border=0 style="margin: 50px auto; text-align: right;">
<tr style="text-align: center; font-weight: bold; font-size: 1.5em; text-decoration: underline;">
<th>Action</th>
<th>Additional Info</th>
<th>Button</th>
</tr>
<tr name="Clear">
<td>Erase Database</td>
<td style="text-align: center;">ARE YOU SURE?</td>
<td><input type="button" id="erase" name="erase" value="ERASE ALL?" /></td>
</tr>
<tr name="Update">
<td>Update Value</td>
<td>
Entry ID: <input type="text" id="updateAppID" name="updateAppID" placeholder="App entryID" /><br />
Field Name: <input type="text" id="fieldName" name="fieldName" placeholder="Field to change" /><br />
New Value: <input type="text" id="newValue" name="newValue" placeholder="New value" /><br />
</td>
<td><input type="button" id="update" name="update" value="Update Value" /></td>
</tr>
<tr name="Delete">
<td>Delete Payment</td>
<td>
Entry ID: <input type="text" id="deleteAppID" name="deleteAppID" placeholder="App entryID" />
</td>
<td><input type="button" id="delete" name="delete" value="Delete Entry" /></td>
</tr>
</table>
<input type="hidden" id="buttonTypePressed" name="buttonTypePressed" />
<input type="submit" id="submit" name="submit" value="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1"/>
</form>
</div>
</body>
There are 2 issues here, 1 is a typo in the element name form, you have it as from.
Another is the name/id of the submit button, it should not be submit as it will override the default submit property(the function) of the form element
<input type="submit" id="bsubmit" name="bsubmit" value="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" />
Then just use the below snippet to submit the form
$('#databaseActionForm').submit();
Demo: Fiddle
I think the problem is you misspelled "form" as "from". Check the syntax highlighting. After that, any of these will work:
$('form#databaseActionForm').submit();
$('#databaseActionForm').submit(); // referencing the form's ID
document.databaseActionForm.submit(); // referencing the form's NAME
I have a table which is editable. I want to change the div width when the td content changes. I think my jQuery code is not working. How can I solve this problem?
var form = document.getElementById('form');
number = document.getElementById('number');
form.onchange = function() {
var variable = number.value;
var unit = "px";
var z = variable + unit;
$("#check").css("width", z);
};
#check {
background-color: red;
height: 15px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<form id="form">
<input id="number" type="number" min="1" name="number">
</form>
<div id="check"></div>
</td>
</tr>
</table>
You can use jquery with keyup and change
var form = document.getElementById('form');
number = document.getElementById('number');
$("#number").on("keyup change",function() {
var variable = number.value;
var unit = "px";
var z = variable + unit;
$("#check").css("width", z);
});
#check {
background-color: red;
height: 15px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<form id="form">
<input id="number" type="number" min="1" name="number">
</form>
<div id="check"></div>
</td>
</tr>
</table>
I have to write a calculator in HTML. I really can't find what is going wrong and it does not show the results. I can't find something wrong can you help? I'm running it in Chrome.
JavaScript File and and the HTML:
showresult(choise){
var n1=parsefloat(document.getElementById('num1').value);
var n2=parsefloat(document.getElementById('num2').value);
var r;
var c=choise;
switch(c)
{
case '1':
r=n1+n2;
break;
case '2':
r=n1-n2;
break;
case '3':
r=n1*n2;
break;
case '4':
r=n1/n2;
break;
case '5':
r=n2*100/n1;
break;
default:
break;
}
document.getElementById('result').innerHTML=r;
}
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script src="calculator.js" type="text/javascript"></script>
</head>
<body>
<h1>My calculator</h1>
<table border="1" cellpadding="5" cellspacing="5" width="600">
<tr align="center">
<td>First number</td>
<td>Second Number</td>
<td>Result</td>
</tr>
<tr align="center">
<td><input name="number1" type="text" size=10 id='num1'/></td>
<td><input name="number2" type="text" size=10 id='num2'/></td>
<td> <input type="text" id='result' readonly ></td>
</tr>
<tr>
<td colspan="3">
<button onclick="showresult('1')">+</button>
<button onclick="showresult('2')">-</button>
<button onclick="showresult('3')">*</button>
<button onclick="showresult('4')">/</button>
<button onclick="showresult('5')">%</button>
</td>
</tr>
</table>
</body>
</html>
Things to fix:
1) Assign to value, not innerHTML, when referring to an input element. (They have no content, hence no innerHTML.
2) Start a function declaration with the keyword function.
3) It’s parseFloat, not parsefloat. JavaScript is case-sensitive.
Minimally fixed code:
function showresult(choise){
var n1=parseFloat(document.getElementById('num1').value);
var n2=parseFloat(document.getElementById('num2').value);
var r;
var c=choise;
switch(c)
{
case '1':
r=n1+n2;
break;
case '2':
r=n1-n2;
break;
case '3':
r=n1*n2;
break;
case '4':
r=n1/n2;
break;
case '5':
r=n2*100/n1;
break;
default:
break;
}
document.getElementById('result').value=r;
}
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script src="calculator.js" type="text/javascript"></script>
</head>
<body>
<h1>My calculator</h1>
<table border="1" cellpadding="5" cellspacing="5" width="600">
<tr align="center">
<td>First number</td>
<td>Second Number</td>
<td>Result</td>
</tr>
<tr align="center">
<td><input name="number1" type="text" size=10 id='num1'/></td>
<td><input name="number2" type="text" size=10 id='num2'/></td>
<td> <input type="text" id='result' readonly ></td>
</tr>
<tr>
<td colspan="3">
<button onclick="showresult('1')">+</button>
<button onclick="showresult('2')">-</button>
<button onclick="showresult('3')">*</button>
<button onclick="showresult('4')">/</button>
<button onclick="showresult('5')">%</button>
</td>
</tr>
</table>
</body>
</html>
You are setting the innerHTML property of an input, which doesn't work
because inputs have value property, if you want to show text/data in them.
you should change this line:
document.getElementById('result').innerHTML=r;
to:
document.getElementById('result').value = r;
on creating a calculator in simple javascript, also check this tutorial out that i wrote, it may help you:
Create a calulator in javascript - Tutorial by 10code.dev
var cnum = document.getElementsByClassName('c-num')[0];
var cope = document.getElementsByClassName('c-operator')[0];
var intom = document.getElementById('intop');
var inbottom = document.getElementById('inbottom');
var newinbottom;
var newinbottom2;
var sign;
for(i=0;i<10;i++){
cnum.innerHTML +='<span class="numb" value="'+i+'" id="numid'+i+'" onclick="puton('+i+')">'+i+'</span>';
}
document.getElementById('numid0').style.order = "1";
function puton(numb){
inbottom.value += numb
}
function ans(answer){
//console.log(sign)
if(inbottom.value ==''){
alert('type input');
}else if(sign == "plus"){
newinbottom2 = inbottom.value;
intom.value = inbottom.value;
inbottom.value = parseInt(newinbottom) + parseInt(newinbottom2);
}else if(sign == "minus"){
newinbottom2 = inbottom.value;
intom.value = inbottom.value;
inbottom.value = newinbottom - newinbottom2;
}else if(sign == "divi"){
newinbottom2 = inbottom.value;
intom.value = inbottom.value;
inbottom.value = newinbottom / newinbottom2;
}else if(sign == "mul"){
newinbottom2 = inbottom.value;
intom.value = inbottom.value;
inbottom.value = newinbottom * newinbottom2;
}
sign ='';
}
function opr(opra){
if(sign != '' && sign != undefined){
ans();
}
else if(opra == "clr"){
intom.value =''
inbottom.value ='';
newinbottom='';
newinbottom='';
sign ='';
}
else if(opra == "plus"){
newinbottom = inbottom.value;
intom.value = inbottom.value;
inbottom.value = '';
sign = "plus";
}else if(opra == "minus"){
newinbottom = inbottom.value;
intom.value = inbottom.value;
inbottom.value = '';
sign = "minus";
}else if(opra == "divi"){
newinbottom = inbottom.value;
intom.value = inbottom.value;
inbottom.value = '';
sign = "divi";
}else if(opra == "mul"){
newinbottom = inbottom.value;
intom.value = inbottom.value;
inbottom.value = '';
sign = "mul";
}
}
.main{
width:100vw;
height: 100vh;
display: flex;
justify-content: center;
}
.c-body {
width: 400px;
height: 255px;
background: #ccc;
border: 1px solid;
}
.c-num{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.c-operator{
flex-shrink: 1;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.c-row{
display: flex;
flex-flow: row;
}
.c-operator [id^='numid']{
width: 90px;
flex-direction: initial;
}
[id^='numid'] {
display: flex;
flex-shrink: 1;
background: #fff;
padding: 4px;
margin: 4px;
width: 80px;
justify-content: center;
cursor: pointer;
flex-direction: inherit;
}
.c-minputs .inbox{
display: block;
width: 100%;
}
[id^='numid']:hover{
background: #f5f5f5;
}
<div class="main">
<div class="c-body">
<div class="c-minputs">
<input id="intop" type="number" class="topin inbox" disabled>
<input id="inbottom" type="number" class="bottomin inbox" placeholder="Type Here">
</div>
<div class="c-row">
<div class="c-num">
</div>
<div class="c-operator">
<span class="numb" id="numidplus" onclick="opr('plus')">+</span>
<span class="numb" id="numidminus" onclick="opr('minus')">-</span>
<span class="numb" id="numiddiv" onclick="opr('divi')">/</span>
<span class="numb" id="numidmul" onclick="opr('mul')">*</span>
<span class="numb" id="numidans" onclick="ans('answer')">=</span>
<span class="numb" id="numidclr" onclick="opr('clr')">c</span>
</div>
</div>
</div>
</div>
Make sure you declare the function correctly.
function showresult(choise) {
/* ... */
}
Also, remember that Javascript is case sensitive therefore the right way to parse a float is
parseFloat()
Lastly, as pointed out by gillesc, use the attribute value on the input element.
document.getElementById('result').value=r;
you should replace "innerHTML" to "value" in your code.
If you want to access the text within a non-input HTML element, then you are going to have to use the innerHTML property instead of value
Now code becomes:
document.getElementById('result').value=r;
Here we used the value property that all input elements have to use to grab the value the user enters.
You can use this in your code
function calc(form) {
var D = "0";
var A = document.getElementById("num1").value;
var B = document.getElementById("op").value;
var C = document.getElementById("num2").value;
switch(B){
case'+':
D= parseInt(A)+parseInt(C); break;
case'-':
D= parseInt(A)-parseInt(C); break;
case'*':
D=parseInt(A)*parseInt(C); break;
case'/':
D=parseInt(A)/parseInt(C); break;
}
}
<script>
var num1;
var op;
function pressBtn(value){
var prev = document.forms["calc"]["display"].value;
if (!(prev == "" && value==0)){
var newval = prev+value;
document.forms["calc"]["display"].value = newval;
}
}
function pressOP(operator){
op = operator;
var display = document.forms["calc"]["display"].value;
num1 = parseInt(display);
document.forms["calc"]["display"].value = "";
}
function pressEq(){
var display = document.forms["calc"]["display"].value;
var num2 = parseInt(display);
switch(op){
case "P":
var ans=num1+num2;
break;
case "M":
var ans=num1-num2;
break;
}
document.forms["calc"]["display"].value = ans;
}
</script>
<style>
input[type=button]{
width: 100px;
height: 100px;
font-size: 36px;
margin: 5px;
}
input[type=text]{
width: 300px;
height: 75px;
font-size: 48px;
margin: 5px;
text-align: right;
}
</style>
<body style="background: #ccc;">
<div style="width: 500px; margin: auto; background: #fff; text-align: center">
<form name="calc">
<input type="text" name="display" readonly ><br>
<input type="button" name="btn7" value="7" onClick="pressBtn(7)">
<input type="button" name="btn8" value="8" onClick="pressBtn(8)">
<input type="button" name="btn9" value="9" onClick="pressBtn(9)"><br>
<input type="button" name="btn4" value="4" onClick="pressBtn(4)">
<input type="button" name="btn5" value="5" onClick="pressBtn(5)">
<input type="button" name="btn6" value="6" onClick="pressBtn(6)"><br>
<input type="button" name="btn1" value="1" onClick="pressBtn(1)">
<input type="button" name="btn2" value="2" onClick="pressBtn(2)">
<input type="button" name="btn3" value="3" onClick="pressBtn(3)"><br>
<input type="button" name="btn0" value="0" onClick="pressBtn(0)">
<input type="button" name="btnPlus" value="+" onClick="pressOP('P')" >
<input type="button" name="btnPlus" value="-" onClick="pressOP('M')" ><br>
<input type="button" name="btnEq" value="=" onClick="pressEq();" >
</form>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stackoverflow</title>
<style>
body{
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
.button {
box-shadow: 0px 10px 14px -7px #276873;
background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
background-color: #599bb3;
border-radius: 4px;
border: 1px solid #29668f;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 25px;
font-weight: bold;
padding: 21px 6px;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
height: 50px;
width: 80px;
padding: 0px;
}
.button:hover {
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
background-color:#408c99;
}
form>input{
height: 40px;
width: 329px;
border-radius: 4px;
border: none;
margin-left: 500px;
font-size: 30px;
}
table{
margin-left: 500px;
}
</style>
</head>
<body>
<div id="main">
<form name="form">
<input name="textview">
</form>
<table>
<tr>
<td><input type="button" class="button" value="Clear" onClick="c()"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7" onClick="insert(7)"></td>
<td><input type="button" class="button" value="8" onClick="insert(8)"></td>
<td><input type="button" class="button" value="9" onClick="insert(9)"></td>
<td><input type="button" class="button" value="/" onClick="insert('/')"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4" onClick="insert(4)"></td>
<td><input type="button" class="button" value="5" onClick="insert(5)"></td>
<td><input type="button" class="button" value="6" onClick="insert(6)"></td>
<td><input type="button" class="button" value="-" onClick="insert('-')"></td>
</tr>
<tr>
<td><input type="button" class="button" value="1" onClick="insert(1)"></td>
<td><input type="button" class="button" value="2" onClick="insert(2)"></td>
<td><input type="button" class="button" value="3" onClick="insert(3)"></td>
<td><input type="button" class="button" value="+" onClick="insert('+')"></td>
</tr>
<tr>
<td><input type="button" class="button" value="0" onClick="insert(0)"></td>
<td><input type="button" class="button" value="." onClick="insert('.')"></td>
<td><input type="button" class="button" value="=" onClick="equal('=')"></td>
<td><input type="button" class="button" value="*" onClick="insert('*')"></td>
</tr>
</table>
</div>
<script>
function insert(num){
document.form.textview.value = document.form.textview.value+num;
}
function equal(){
let exp = document.form.textview.value;
if(exp){
document.form.textview.value = eval(exp)
}
else{
console.log('Something Wrong')
}
}
function c(){
document.form.textview.value = null;
}
</script>
</body>
</html>
I've been fighting with this for a couple of days now...need some guidance please.
I have pared down a much bigger form to a "sample" size to demonstrate what I am after.
The area in question is blocked off in a very recognizable area in the calcFees function.
I also tried to get fancy and have the vars self post to the form so they could be seen, but that does not work.
UPDATE: Here is a bit more info as to what I am running into.
//At this point the var regularfee is = 26.5
// (confirmed by console.log(regularfee);)
// I want to assign it to the hidden field with the id="regularfee"
// I have tried both of the following lines:
document.getElementById('regularfee').value=regularfee.value;
// console.log(document.getElementById('regularfee.value')); shows "null"
document.getElementById('regularfee').value=regularfee;
// console.log(document.getElementById('regularfee')); shows "[object HTMLDivElement]"
What am I doing wrong?
END OF UPDATE *****************************
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="multiForm" action="post.php" method="POST" id="app" name="app">
<div id="page1" class="page" style="visibility:visible;">
Name: <input type="text" size="40" name="name1" >
<br><br>
<table border="1" cellpadding="5" width="50%">
<tbody>
<tr>
<td align="center" colspan="3"><strong>Membership Classification</strong></td>
</tr>
<tr><td width="1000">
<input name="paymethod" type="radio" class="pay" id="paypal" value="paypal" />I would like to use PayPal
<input name="paymethod" type="radio" class="pay" id="check" value="check" />I would like to pay by check
</td>
<td style="width:150px" align="right">Fee
</td>
<td style="width:150px">
</td></tr>
<tr>
<td><input name="memberclass" type="radio" class="membership" id="regular" value="regular"/> Regular Membership</td>
<td align="right"><div id=regularfee></td>
<td><div align="right" id=regselectedfee></td>
</tr>
<tr><td colspan="2" align="right">Total </td>
<td><div align="right" id=total>
</td></tr></tbody>
</table>
<input type="hidden" name="regularfee" id="regularfee" value="">
<input type="hidden" name="regselectedfee" id="regselectedfee" value="">
<input type="hidden" name="total" id="total" value="">
</form>
<br>
<input type="button" id="C1" value="Continue" onClick="showLayer('page2')">
</td></tr>
</table>
</div>
<div id="page2" class="page">
<b>Page 2
<br><br>
<input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="submit" name="submit" value="Click to see Vars" />
</div>
</form>
</body>
</html>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script language="JavaScript">
var paypalselected
var checkselected
var regularfee
var memberfee1
var total
$(function () {
function clearForm()
{
paypalselected = "0";
checkselected = "0";
regularfee = 0.0;
memberfee1 = 0.0;
total = 0.0;
$("#regselectedfee").text(memberfee1.toFixed(2));
$("#total").text(total.toFixed(2));
// clear all radio buttons
$("#regular").prop("checked", false );
}
function calcFees()
{
total = (memberfee1);
$("#total").text(total.toFixed(2));
// **********************************************************************************
// Here is where I want to plug in the 3 JS vars to the hidden fields
// regularfee, regselectedfee, total
// Here is what I've tried:
// vars are not getting plugged in
// If possible, I would like the vars to be plugged in dynamically
// just as the form is updateddynamically when user selects buttons
document.getElementById('regularfee').value=regularfee;
document.getElementById('regselectedfee').value=regselectedfee;
document.getElementById('total').value=total;
// **********************************************************************************
}
function selectPayment()
{
$(".pay").change(function () {
clearForm();
if ($("#paypal").prop("checked")) {
regularfee = 26.50;
$("#regularfee").text(regularfee.toFixed(2));
paypalselected = "1";
checkselected = "0";
}
if ($("#check").prop("checked")) {
regularfee = 25.0;
$("#regularfee").text(regularfee.toFixed(2));
checkselected = "1";
paypalselected = "0";
}
});
}
clearForm();
selectPayment();
//start of membership button selection
$(".membership").change(function () {
if (paypalselected == "1"){
if ($("#regular").prop("checked")) {
memberfee1 = 26.5;
$("#regselectedfee").text(memberfee1.toFixed(2));
calcFees();
}
} //end of paypalselected test
if (checkselected == "1"){
if ($("#regular").prop("checked")) {
memberfee1 = 25.0;
$("#regselectedfee").text(memberfee1.toFixed(2));
calcFees();
}
} //end of checkselected test
}); //end of $(".membership").change(function () {
});
//end of main function
var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
window.scrollTo(0,0);
}
function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
</script>
<style>
body{
font: 10pt sans-serif;
}
.page{
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
p.small
{
line-height: 5px;
}
p.smalltext12
{
font-size:12px
}
</style>
You have 2 elements #total. Only the first is given a value:
document.getElementById('total').value = total;
Same for the others.
IDs must be unique to be useful.