This is a script for selecting a method for pay. It works in IE but when I run it in FF it stops with this error:
Error: document.getElementById("tdeposit").childNodes[0].childNodes[0] is undefined.
You can paste this code to a html file and see the problem:
I have removed some website addresses because of privacy issues , the image links changed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
#tdeposit {
width:550px;
margin:10px auto;
font-family:Arial;
font-size:13px;
font-weight:bold;
letter-spacing:1px;
color:#444;
text-align:center;
}
</style>
</head>
<body>
<script>
function methodis(method){
if(method=='wm'){
document.getElementById('tdeposit').childNodes[0].childNodes[0].childNodes[1].style.visibility='visible';
document.getElementById('tdeposit').childNodes[0].childNodes[0].childNodes[2].style.visibility='visible';
document.getElementById('tdeposit').childNodes[0].childNodes[0].childNodes[3].style.visibility='visible';
document.getElementById('tdeposit').childNodes[0].childNodes[0].childNodes[4].style.visibility='visible';
document.getElementById('tdeposit').childNodes[0].childNodes[1].childNodes[1].style.visibility='hidden';
document.getElementById('tdeposit').childNodes[0].childNodes[1].childNodes[2].style.visibility='hidden';
document.getElementById('tdeposit').childNodes[0].childNodes[1].childNodes[3].style.visibility='hidden';
document.getElementById('tdeposit').childNodes[0].childNodes[1].childNodes[4].style.visibility='hidden';
document.deposit.method[0].checked=true;
}
if(method=='lr'){
document.getElementById('tdeposit').childNodes[0].childNodes[0].childNodes[1].style.visibility='hidden';
document.getElementById('tdeposit').childNodes[0].childNodes[0].childNodes[2].style.visibility='hidden';
document.getElementById('tdeposit').childNodes[0].childNodes[0].childNodes[3].style.visibility='hidden';
document.getElementById('tdeposit').childNodes[0].childNodes[0].childNodes[4].style.visibility='hidden';
document.getElementById('tdeposit').childNodes[0].childNodes[1].childNodes[1].style.visibility='visible';
document.getElementById('tdeposit').childNodes[0].childNodes[1].childNodes[2].style.visibility='visible';
document.getElementById('tdeposit').childNodes[0].childNodes[1].childNodes[3].style.visibility='visible';
document.getElementById('tdeposit').childNodes[0].childNodes[1].childNodes[4].style.visibility='visible';
document.deposit.method[1].checked=true;
}
return 0;
}
function calculate(ob,per){
if(ob.value.length<8){
document.getElementById(ob.name).innerHTML = '$ '+(per*ob.value).toFixed(2);
}else{
document.getElementById(ob.name).innerHTML = '$ 0';
}
}
</script>
<form name='deposit' action='deposit.php'>
<table id='tdeposit' >
<tbody>
<tr>
<td><input type='radio' name='method' value='wm' style='width:20px; height:50px' />
<img src='http://www.xxxxxxxxx.com/images/webmoney.png' onclick='methodis("wm");' /></td>
<td style='width:110px; visibility: hidden;'> $
<input style='margin:5px; height:20px; width:50px; text-align:center' type='text' name='wmht' onkeyup='calculate(this,0.98);' />
WM</td>
<td style='width:25px; visibility: hidden;'><img src='http://www.xxxxxxxxx.com/images/convert.gif' /></td>
<td style='width:100px; visibility: hidden;' ><span id='wmht' style='color:#060'>$ 0.0</span> HT</td>
<td style='width:100px; visibility: hidden;'><input type='submit' value=' Deposit ' />
</tr>
<tr style='border-top:solid 1px #999'>
<td><input type='radio' name='method' value='lr' style='width:20px; height:50px' />
<img src='http://www.xxxxxxxxx.com/images/libertyreserve.png' onclick='methodis("lr");'/></td>
<td style='visibility: hidden;'> $
<input style='margin:5px; height:20px; width:50px; text-align:center' type='text' name='lrht' onkeyup='calculate(this,0.95);' />
LR</td>
<td style='visibility: hidden;'><img src='http://www.xxxxxxxxx.com/images/convert.gif' /></td>
<td style='visibility: hidden;'><span id='lrht' style='color:#060'>$ 0.0 </span> HT</td>
<td style='visibility: hidden;'><input type='submit' value=' Deposit ' />
</tr>
</tbody>
</table>
</form>
</body>
</html>
document.getElementById('tdeposit').childNodes[0] references the TextNode for whitespace following the <table> tag. Perhaps IE is disregarding it, but not other browsers. Use the children getter instead of childNodes.
Related
I need to clear the data in a HTML td onfocus, similar to how it works in HTML input, but in an editable table that uses JQuery tabledit. Reason being that it is a CRUD table and it populates the table with data from a Db. If I want to edit one of the td, I don't want to have to delete the existing data, but rather when I click on the td, the value is set to "" and I can then just type the new data in.
<td><?php echo $row['payment_company']; ?></td>
I have tried as below, but it doesn't set the data value to empty
<td onfocus="this.value=''"><?php echo $row['payment_company']; ?></td>
So, this is what I am attempting to do the equivalent of:-
<input type='text' id='name' value = 'Hello' onfocus = 'this.value = ""' />
Update:
Because it's not working in my code here the generated HTML from the browser dev tools:
<td onclick="this.textContent='';" class="tabledit-view-mode">
<span class="tabledit-span">onclick textContent</span>
<input
class="tabledit-input form-control input-sm"
type="text"
name="payment_method"
value="onclick textContent"
style="display: none;"
disabled=""
>
</td>
A td has no value - you could use innerHTML or textContent instead. Furthermore the focus event fires if you give the element a tabindex. Alternatively you could use a click event.
Working example:
<table>
<td onfocus="this.innerHTML='';" tabindex="0">onfocus innerHTML / </td>
<td onfocus="this.textContent='';" tabindex="0">onfocus textContent</td>
<td onclick="this.innerHTML='';">onclick innerHTML / </td>
<td onclick="this.textContent='';">onclick textContent / </td>
</table>
To use jQuery-Tabledit you need to select the generated child input and empty its value. You could do this inline:
<td onfocus="this.querySelector('input').value = '';" tabindex="0">inline</td>
or with a function call:
<td onfocus="emptyCell(this);" tabindex="0">function</td>
function emptyCell(scope) {
$(scope).find('input').val('');
}
Working example:
$('#test-table').Tabledit({
editButton: false,
hideIdentifier: true,
columns: {
identifier: [0, 'id'],
editable: [[1, 'onfocus1'], [2, 'onfocus2'], [3, 'onclick1'], [4, 'onclick2']]
}
});
function emptyCell(scope) {
$(scope).find('input').val('');
}
.tabledit-remove-button {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/jquery.tabledit.js"></script>
<table id="test-table">
<thead>
<tr>
<th>#</th>
<th>onfocus1</th>
<th>onfocus2</th>
<th>onclick1</th>
<th>onclick2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td onfocus="this.querySelector('input').value = '';" tabindex="0">inline</td>
<td onfocus="emptyCell(this);" tabindex="0">function</td>
<td onclick="this.querySelector('input').value = '';">inline</td>
<td onclick="emptyCell(this);">function</td>
</tr>
</tbody>
</table>
You can do this. It should help
In your html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<tr>
<td onclick="erase()">we</td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
In your script.js
function erase() {
event.target.innerHTML = ""
}
I have no idea why it keeps showing me this error. I searched a few dozen similar questions, but I probably don't have the knowledge to reproduce it in my code, or the problem is right in front of me and I simply can't see it. The HTML:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="author" content="Rodrigo Andrade de Oliveira">
<style>
#imgUpld {
height: 120px;
width: 90px;
}
body {
font-family:Arial, Helvetica, sans-serif; font-size:16px;
}
th {
background:#999999; text-align:right; vertical-align:top;
}
input {
width:181px;
}
button {
width: 181px;
}
</style>
</head>
<body>
<table width="500" border="0" cellpadding="5" cellspacing="5">
<tr>
<th>Nome:</th>
<td><input name="txtNome" type="text"></td>
</tr>
<tr>
<th>Telefone:</th>
<td><input name="txtTel" type="text"></td>
</tr>
<tr>
<th>Endereço:</th>
<td><input name="txtEndereco" type="text"></td>
</tr>
<tr>
<th>Função:</th>
<td><input name="txtFuncao" type="text"></td>
</tr>
<tr>
<th>Posto:</th>
<td><input name="txtPosto" type="text"></td>
</tr>
<tr>
<th>Foto:</th>
<td><input name="foto" type="file" onchange="funcFoto(this)"></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;"><button id="btnProximo" onclick="gerarCracha()">Próximo</button></td>
</tr>
</table>
<img id="imgUpld">
<div id="nome"></div>
<div id="telefone"></div>
<div id="endereço"></div>
<div id="função"></div>
<div id="posto"></div>
<script type="text/javascript" src="cracha.js"> </script>
</body>
</html>
And the JS:
var outImage ='imgUpld';
function funcFoto(obj)
{
if (FileReader)
{
var reader = new FileReader();
reader.readAsDataURL(obj.files[0]);
reader.onload = function (e) {
var image=new Image();
image.src=e.target.result;
image.onload = function () {
document.getElementById(outImage).src=image.src;
};
}
}
else
{
// Not supported
}
}
function gerarCracha(){
document.getElementById('nome').innerHTML = document.getElementById('txtNome').value;
document.getElementById('telefone').innerHTML = document.getElementById('txtTel').value;
document.getElementById('endereço').innerHTML = document.getElementById('txtEndereco').value;
document.getElementById('função').innerHTML = document.getElementById('txtFuncao').value;
document.getElementById('posto').innerHTML = document.getElementById('txtPosto').value;
}
The problem shows up in these lines:
document.getElementById('nome').innerHTML = document.getElementById('txtNome').value;
document.getElementById('telefone').innerHTML = document.getElementById('txtTel').value;
document.getElementById('endereço').innerHTML = document.getElementById('txtEndereco').value;
document.getElementById('função').innerHTML = document.getElementById('txtFuncao').value;
document.getElementById('posto').innerHTML = document.getElementById('txtPosto').value;
If I change document.getElementById('txtNome').value; to a string, the innerHTML changes just fine. Even if I manually set values to txtNome, txtTel, txtEndereco, txtFuncao, txtPosto, it still wont work.
The image preloading works fine (not my code).
What I intend to do (if I can make this work) e apply some css to the divs and generate a work badge after.
I am trying to use an input box to check if the input begins with a letter A-M, and secondly if the number of characters is odd or even, then unhide a div if these conditions are met. I am getting one error:
Uncaught TypeError: Cannot read property 'value' of null
at org.html:89
Code below.
Thanks.
I am trying to change the display style with my if statement at the end of the functions.
However, because of the null type error nothing happens.
If I can get the first one to work, I intend to duplicate the method for the other tables.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ITP-03</title>
<meta name="description" content="A calculator">
<style>
.title{
border: 10px;
margin-bottom: 10px;
text-align:center;
width: 210px;
color:black;
border: solid black 1px;
font-family: sans-serif;
}
input[type="button"]
{
border: 10px;
background-color:#46eb34;
color: black;
border-color:#46eb34 ;
width:100%;
}
input[type="text"]
{
border: 10px;
text-align: right;
background-color:white;
border-color: black ;
width:100%
}
input[type="username"]
{
border: 10px;
margin-bottom: 10px;
text-align: left;
color: black;
border: solid #46eb34 1px;
background-color:white;
border-color: black ;
width:20%
}
</style>
<script>
//function for displaying values
function dis(val)
{
document.getElementById("calc").value+=val;
}
//function for evaluation
function solve()
{
let x = document.getElementById("calc").value;
let y = eval(x);
document.getElementById("calc").value = y;
}
//function for clearing the display
function clr()
{
document.getElementById("calc").value = "";
}
function isEven()
{
var value = document.getElementById("username").value.length;
if (value%2 == 0) {
document.getElementById("check2").innerHTML = "even";
return true;
}
if (value%2 !=0) {
document.getElementById("check2").innerHTML = "odd";
return false;
}
}
function beforeN(value) {
var firstletter = document.getElementById("username").value.substring(0,1);
var str = "abcdefghijklm.";
if (str.includes(firstletter)){
document.getElementById("check1").innerHTML = "a-m";
return true;
}
else {
document.getElementById("check1").innerHTML = "n-z";
return false;
}
}
if(beforeN(document.getElementById("username").value) && (isEven(document.getElementById("username").value))){
document.getElementById("amodd").style.display= "block";
}
</script>
</head>
<body>
<p id="check1">a</p>
<p id="check2">a</p>
<p class = title>Enter your iu username</p>
<input type="username" id="username" name="iu username"/>
<br>
<button onclick=beforeN(document.getElementById("username").value) type ="button">Submit</button>
<div id ="amodd" style=display:none>
<div class = title >ITP-03 Calculator A-M ODD</div>
<table border="1">
<tr>
<td><input type="button" value="c" onclick="clr()"/> </td>
<td colspan="3"><input type="text" id="calc"/></td>
</tr>
<tr>
<td><input type="button" value="+" onclick="dis('+')"/> </td>
<td><input type="button" value="1" onclick="dis('1')"/> </td>
<td><input type="button" value="3" onclick="dis('3')"/> </td>
</tr>
<tr>
<td><input type="button" value="/" onclick="dis('/)"/> </td>
<td><input type="button" value="5" onclick="dis('5')"/> </td>
<td><input type="button" value="7" onclick="dis('7')"/> </td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')"/> </td>
<td><input type="button" value="9" onclick="dis('9')"/> </td>
<td><input type="button" value="=" onclick="solve()"/> </td>
</tr>
</table>
</div>
</body>
Few things to note here.
You are missing the quotes for the onclick attribute value. Others have already pointed that out.
The error that you were seeing is because your if condition resides outside a function. So, it will be executed on page load in the order in which you have written it. If you have it before the body, it will be executed before the DOM loads. In such cases, you should put it within the body at the end.
Also, the if condition will only be executed when your page loads. Since your button has an onclick attribute, it will execute only that function that you invoke. That will not help you update the page(hide and unhide divs) every time the button is clicked. I would suggest you put the if-condition within a function and invoke the function on the button click.
Also note that I have changed your if condition to remove all the parameters you were passing, since you were not using it. You were fetching the values again in your function.
Also, since you want both beforeN and isEven functions to be executed every time the button is clicked, I have changed it to execute the functions and store the result in a variable. Otherwise, it will only execute the isEven method if beforeN evaluates to true. Also included an else condition to hide the div when the conditions are not met.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ITP-03</title>
<meta name="description" content="A calculator">
<style>
.title {
border: 10px;
margin-bottom: 10px;
text-align: center;
width: 210px;
color: black;
border: solid black 1px;
font-family: sans-serif;
}
input[type="button"] {
border: 10px;
background-color: #46eb34;
color: black;
border-color: #46eb34;
width: 100%;
}
input[type="text"] {
border: 10px;
text-align: right;
background-color: white;
border-color: black;
width: 100%
}
input[type="username"] {
border: 10px;
margin-bottom: 10px;
text-align: left;
color: black;
border: solid #46eb34 1px;
background-color: white;
border-color: black;
width: 20%
}
</style>
</head>
<body>
<p id="check1">a</p>
<p id="check2">a</p>
<p class=title>Enter your iu username</p>
<input type="username" id="username" name="iu username" />
<br>
<button onclick="exFun()" type="button">Submit</button>
<div id="amodd" style=display:none>
<div class=title>ITP-03 Calculator A-M ODD</div>
<table border="1">
<tr>
<td><input type="button" value="c" onclick="clr()" /> </td>
<td colspan="3"><input type="text" id="calc" /></td>
</tr>
<tr>
<td><input type="button" value="+" onclick="dis('+')" /> </td>
<td><input type="button" value="1" onclick="dis('1')" /> </td>
<td><input type="button" value="3" onclick="dis('3')" /> </td>
</tr>
<tr>
<td><input type="button" value="/" onclick="dis('/)" /> </td>
<td><input type="button" value="5" onclick="dis('5')" /> </td>
<td><input type="button" value="7" onclick="dis('7')" /> </td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')" /> </td>
<td><input type="button" value="9" onclick="dis('9')" /> </td>
<td><input type="button" value="=" onclick="solve()" /> </td>
</tr>
</table>
</div>
<script>
//function for displaying values
function dis(val) {
document.getElementById("calc").value += val;
}
//function for evaluation
function solve() {
let x = document.getElementById("calc").value;
let y = eval(x);
document.getElementById("calc").value = y;
}
//function for clearing the display
function clr() {
document.getElementById("calc").value = "";
}
function isEven() {
var value = document.getElementById("username").value.length;
if (value % 2 == 0) {
document.getElementById("check2").innerHTML = "even";
return true;
}
if (value % 2 != 0) {
document.getElementById("check2").innerHTML = "odd";
return false;
}
}
function beforeN(value) {
var firstletter = document.getElementById("username").value.substring(0, 1);
var str = "abcdefghijklm.";
if (str.includes(firstletter)) {
document.getElementById("check1").innerHTML = "a-m";
return true;
}
else {
document.getElementById("check1").innerHTML = "n-z";
return false;
}
}
function exFun() {
var beforeNResult = beforeN();
var isEvenResult = isEven();
if (beforeNResult && isEvenResult) {
document.getElementById("amodd").style.display = "block";
}else{
document.getElementById("amodd").style.display = "none";
}
}
</script>
</body>
you should put script after element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ITP-03</title>
<meta name="description" content="A calculator">
<style>
.title{
border: 10px;
margin-bottom: 10px;
text-align:center;
width: 210px;
color:black;
border: solid black 1px;
font-family: sans-serif;
}
input[type="button"]
{
border: 10px;
background-color:#46eb34;
color: black;
border-color:#46eb34 ;
width:100%;
}
input[type="text"]
{
border: 10px;
text-align: right;
background-color:white;
border-color: black ;
width:100%
}
input[type="username"]
{
border: 10px;
margin-bottom: 10px;
text-align: left;
color: black;
border: solid #46eb34 1px;
background-color:white;
border-color: black ;
width:20%
}
</style>
</head>
<body>
<p id="check1">a</p>
<p id="check2">a</p>
<p class = title>Enter your iu username</p>
<input type="username" id="username" name="iu username"/>
<br>
<button onclick='beforeN(document.getElementById("username").value)' type ="button">Submit</button>
<div id ="amodd" style=display:none>
<div class = title >ITP-03 Calculator A-M ODD</div>
<table border="1">
<tr>
<td><input type="button" value="c" onclick="clr()"/> </td>
<td colspan="3"><input type="text" id="calc"/></td>
</tr>
<tr>
<td><input type="button" value="+" onclick="dis('+')"/> </td>
<td><input type="button" value="1" onclick="dis('1')"/> </td>
<td><input type="button" value="3" onclick="dis('3')"/> </td>
</tr>
<tr>
<td><input type="button" value="/" onclick="dis('/')"> </td>
<td><input type="button" value="5" onclick="dis('5')"/> </td>
<td><input type="button" value="7" onclick="dis('7')"/> </td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')"/> </td>
<td><input type="button" value="9" onclick="dis('9')"/> </td>
<td><input type="button" value="=" onclick="solve()"/> </td>
</tr>
</table>
</div>
<script>
//function for displaying values
function dis(val)
{
document.getElementById("calc").value+=val;
}
//function for evaluation
function solve()
{
let x = document.getElementById("calc").value;
let y = eval(x);
document.getElementById("calc").value = y;
}
//function for clearing the display
function clr()
{
document.getElementById("calc").value = "";
}
function isEven()
{
var value = document.getElementById("username").value.length;
if (value%2 == 0) {
document.getElementById("check2").innerHTML = "even";
return true;
}
if (value%2 !=0) {
document.getElementById("check2").innerHTML = "odd";
return false;
}
}
function beforeN(value) {
var firstletter = document.getElementById("username").value.substring(0,1);
var str = "abcdefghijklm.";
if (str.includes(firstletter)){
document.getElementById("check1").innerHTML = "a-m";
return true;
}
else {
document.getElementById("check1").innerHTML = "n-z";
return false;
}
}
if(beforeN(document.getElementById("username").value) && (isEven(document.getElementById("username").value))){
document.getElementById("amodd").style.display= "block";
}
</script>
</body>
and in this line
<button onclick='beforeN(document.getElementById("username").value)' type ="button">Submit</button>
you missed '
I have index.jsp ,from which I am calling transaction.jsp.There is table on transaction.jsp,which i dont want to show on load of transaction.jsp,so i called a javascript method hideData() to hide the table.Now when i click on button showData on transaction.jsp,it will fetch data from database and data will be displayed in a table,which I want to display using javascript showData(),but problem is that,when i click on button,first showData() gets called and then hideData gets called as page is getting loaded again,so i am not able to diaply table on click of button.Then I tried using variable as below,but variable a is not retaining its value when it goes to hideData() after executing showData().My javascript is :
ORIGINAL POST :
<script type="text/javascript">
var a;
function hideData(){
alert("a is"+a);
alert("Inside HideData");
if(a == " ")
{
alert("Inside If");
document.getElementById('dataTable').style.display=" ";
a= " ";
}else{
alert("Inside else");
document.getElementById('dataTable').style.display="none";
a = "none";
}
}
function showData(){
document.getElementById('dataTable').style.display=" ";
a= " ";
}
</script>
Can anyone suggest,how i can achieve this.
Thanks in advance.
EDITED :
index.jsp :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello</title>
</head>
<body>
<s:form>
<h2>MI Reports Data</h2>
Transaction Data<br>
</s:form>
</body>
</html
>
transactionData.jsp :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function showData(){
document.getElementById('dataTable').style.display=" ";
}
</script>
<style type="text/css">
thead.special {
background:url('images/mcf-header-nav.jpg') no-repeat;
border: 1px solid #B0B0B0;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 3px 12px;
margin-right: 3px 12px;
text-align: left;
}
div.statusbar {
background:url('images/mcf-header-nav.jpg') no-repeat;
color: #fff;
width:100%
font-size: 16px;
font-weight: bold;
padding: 3px 20px;
text-align: left;
}
</style>
<title>Transaction Data</title>
<s:head theme="ajax" debug="true"/>
</head>
<body bgcolor="white">
<s:form validate="true">
<div class='statusbar'>Transactions Info</div>
<table border="true" id="dataTable" style="display:none">
<thead class="special">
<tr>
<td >
DateTime
</td>
<td>
channel
</td>
<td>
Transaction Type
</td>
<td>
Bic
</td>
<td>
Volume
</td>
</tr>
</thead>
<s:iterator value="listTransBean">
<tbody>
<tr>
<td>
<s:property value="dateTime"/><br/>
</td>
<td>
<s:property value="channel"/><br/>
</td>
<td>
<s:property value="transactionType"/><br/>
</td>
<td>
<s:property value="bic"/><br/>
</td>
<td>
<s:property value="volume"/><br/>
</td>
</tr>
</tbody>
</s:iterator>
</table>
<table>
<tr>
<td>
<s:submit id="submitButton" value="Show Chart" align="center" action="displayChartAction"/>
</td>
<td>
<s:submit value="Fetch Data" align="center" action="displayDataAction" onclick="showData();"/>
</td>
</tr>
</table>
</s:form>
</body>
</html>
To show data you have set display style to block..
document.getElementById('dataTable').style.display="block";
<input type="button" onclick="registerFunc()" Value="Register"></button>
<div id="demo" style="display: none">
<h2 class="mainmenu">Testing DB Connection</h2>
<table>
<tr>
<th>ID</th>
<th>Email</th>
<th>Password</th>
#foreach(var row in db.Query(userQuery))
{
<tr>
<td>#row.id</td>
<td>#row.email</td>
<td>#row.pswd</td>
</tr>
}
</table>
</div>
<p>The time is #DateTime.Now</p>
</form>
</div>
<script>
function registerFunc() {document.getElementById('demo').style.display="block";
};
</script>
function registerFunc() {document.getElementById('demo').style.display="block";
div id="demo" style="display: none"
Hi you can try out like this below. Hope this may help you out with this to get out from the challenge you may have obviously.
document.getElementById("name1").style.display= "none";
document.getElementById("name2 ").style.display = "block";
As I have mentioned in the above first thing see the id names I meant over there like name1, name2. Here name 1 will be the data which you not to show when you open a form or anything as per your requirement.name2 is the data you need to show up when you open the form etc..
First thing is you need use inline style use like this : style="display:none"; which one you need not to display by default. later use the condition in javascript wherever you need to override the condition applied using inline CSS property.
For an example:
HTML and CSS:
<table>
<tr>
<td class="text-center colspan-2 "><button onclick="saveEmp()" type="button" class="btn btn-primary btn-lg save" value="Save" id="save1">Save</button></td>
<td class="text-center colspan-2">
<button onclick="update()" type="button" class="btn btn-info btn-lg save" value="Update" id = "update1" style="display:none;" >Update</button></td>
</tr>
</table>
Javascript:
first condition:
document.getElementById("save1").style.display = "block";
document.getElementById("update1").style.display = "none";
second condition I making the second data to display and making the first data not to display:
document.getElementById("save1").style.display = "none";
document.getElementById("update1").style.display = "block";
function save() {
document.getElementById("save1").style.display = "block";
document.getElementById("update1").style.display = "none";
}
function update() {
document.getElementById("save1").style.display = "none";
document.getElementById("update1").style.display = "block";
}
And the HTML:
<table>
<tr>
<td class="text-center colspan-2 "><button onclick="saveEmp()" type="button" class="btn btn-primary btn-lg save" value="Save" id="save1">Save</button></td>
<td class="text-center colspan-2">
<button onclick="update()" type="button" class="btn btn-info btn-lg save" value="Update" id = "update1" style="display:none;" >Update</button></td>
</tr>
</table>
I have a dynamic html table , where user fills in certain details. The problem is , last two input columns data length may be large at times. Can someone suggest me the best way to show the last two input boxes so that user , after filling the detail , would be able to look at the contents that he has entered with ease. With the current setup , he wont be able to look at the entire input box data at one glance.
HTML :
<table id="master_table" border="0">
<tr>
<th>COL1</th>
<th>COL2</th>
<th>COL3</th>
<th>COL4</th>
<td> </td>
</tr>
<tr>
<td>
<input type="text" name="col1" class="col1"/>
</td>
<td>
<input type="text" name="col2" class="col2"/>
</td>
<td>
<input type="text" name="col3" class="col3"/>
</td>
<td>
<input type="text" name="col4" class="col4"/>
</td>
<td>
<input type="button" name="addRow" class="add" value='Add'/>
</td>
<td>
<input type="button" name="removeRow" class="removeRow" value='Delete'/>
</td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" name="submit_data" class="submit" value="Submit" onclick="myFunction()"/>
</td>
</tr>
</table>
Fiddle demo :
FIDDLE PAGE
Update :
Thanks to #dr Manish Joshi
I am able to achieve the desired result HERE.
But it works fine in jsfiddle , but when i tried run in browser it throws me javascript error.
uncaught typeerror cannot read property 'addeventlistener' of null
Use table-layout property. table-layout:fixed will adjust cells to take up equal space of the table.
Write:
#master_table{
width:100%;
table-layout:fixed;
}
Updated fiddle here.
You can Try
<td>
<input type="text" name="col1" class="col1" length="20"/>
</td>
<td>
<input type="text" name="col2" class="col2" length="20"/>
</td>
<td>
<input type="text" name="col3" class="col3" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"/>
</td>
<td>
<input type="text" name="col4" class="col4" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"/>
</td>
<td>
jsfiddle - http://jsfiddle.net/Vu8HC/6/
Edited :
as per codepen.io/vsync/pen/czgrf , your code will look like for textarea as follows
<html>
<head>
<style>
body{ background:#c0c0c0; color:#8c001a; }
/*( 'box-sizing' will not work with this code )*/
textarea{
/* box-sizing: padding-box; */
overflow:hidden;
/* demo only: */
padding:10px;
width:250px;
font-size:14px;
margin:50px auto;
display:block;
border-radius:10px;
border:1px solid #8c001a;
}
</style>
</head>
<body>
<textarea rows='1' placeholder='Auto-Expanding Textarea'></textarea>
<script>
var textarea = document.querySelector('textarea');
textarea.addEventListener('keydown', autosize);
function autosize(){
var el = this;
setTimeout(function(){
el.style.cssText = 'height:auto; padding:0';
// for box-sizing other than "content-box" use:
// el.style.cssText = '-moz-box-sizing:content-box';
el.style.cssText = 'height:' + el.scrollHeight + 'px';
},0);
}
</script>
</body>
</html>
You can see working example in browser on this link : http://ayurvedvishva.com/e_nima/jstest