Hello Frndz i m in complete mess...
i have to a table with Add/Remove rows features...
it should look like this -
textbox1 | textbox2 | Add Buttonafter clicking the add button Row will append and Disable the textbox with values...!!!
It looks like this after clickin Add Button..
textbox1 disabled | textbox1 disabled | Edit/Delete button
textbox2 | textbox2 | Add ButtonAny Help will be appriciated..!!
cool, so where is the code?
yeah i m also asking for the code only..!! :D
please Check my thread which will give you idea that how to show edit and delete Button for all records. and Last code of the thread show the dtat in textfields and u can update each recodrd,
if helpful then mark thread as Solved.
Here is a link
http://www.daniweb.com/forums/thread199644.html
Ayesha..
It is useful thread...but i want it in javascript....!!! i m making a small accounting web application.. i want it to enter multiple transactions...!!!
Here you are the code:
<HTML><HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<TITLE>add/ed/del row</TITLE>
<script>
function add(oRow)
{ oRow.parentNode.replaceChild(oRow.cloneNode(true ),oRow.parentNode.insertRow(oRow.rowIndex+1));
var inpN = oRow.nextSibling.getElementsByTagName('input');
var inpR = oRow.getElementsByTagName('input');
for(var i=0;i<inpR.length;i++)
{ if(inpN[i].disabled)inpN[i].disabled=false;
if(inpR[i].type=='text')inpR[i].disabled=true;
if(inpR[i].value=='add')inpR[i].value='ed';
};
}
function ed(oRow)
{ var inpR = oRow.getElementsByTagName('input');
for(var i=0;i<inpR.length;i++)
{ inpR[i].disabled=false;
}
}
</script>
</HEAD>
<BODY><form method="post" action="./finalPage.php">
<table><tbody><tr><td><input type="text" name="row[txt1][]"></td><td><input type="text" name="row[txt2][]"></td><td><input type="button" value="add" onClick="(this.value=='add')?add(this.parentNode.parentNode):ed(this.parentNode.parentNode)"></td><td><input type="button" value="del" onClick="this.parentNode.parentNode.parentNode.deleteRow(this.parentNode.parentNode.rowIndex)" disabled="true"></td></tr></tbody></table>
</form><br>
</BODY>
</HTML>But! What will you do with the data after the formula is fulfilled? Is the data to be processed at the same page using another JavaScript? or there have to be a button for sending the data to a process page?
You asked for the change the button "add" into the "edit". What will you do after you'll be finished with the row editing? Could not be the "ed" button change into the "lock" button while editing the row?
Think it over, before you start to code and asking the help!
As I am takinkg off the Internet, I drop down here the revised code:
<HTML><HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<TITLE>add/ed/del row</TITLE>
<script>
function add(oRow)
{ oRow.parentNode.replaceChild(oRow.cloneNode(true ),oRow.parentNode.insertRow(oRow.rowIndex+1));
// var inpN = oRow.nextSibling.getElementsByTagName('input');
var inpR = oRow.getElementsByTagName('input');
for(var i=0;i<inpR.length;i++)
{ if(inpR[i].disabled)inpR[i].disabled=false;
if(inpR[i].type=='text')inpR[i].disabled=true;
if(inpR[i].value=='add')inpR[i].value='ed';
};
}
function ed(oBut)
{ var inpR = oBut.parentNode.parentNode.getElementsByTagName('input');
for(var i=0;i<inpR.length;i++)
{ if(oBut.value=='ed' && inpR[i].type=='text')inpR[i].disabled=false;
if(oBut.value=='lock' && inpR[i].type=='text')inpR[i].disabled=true;
} if(oBut.value=='ed'){oBut.value='lock'}else{oBut.value='ed'}
}
function send(oForm)
{ var inpF = oForm.getElementsByTagName('input');
for(var i=0;i<inpF.length;i++)
{ inpF[i].disabled=false;
} oForm.submit();
}
</script>
</HEAD>
<BODY><form method="post" action="./fuj.php">
<table><tbody><tr><td><input type="text" name="row[txt1][]"></td><td><input type="text" name="row[txt2][]"></td><td><input type="button" value="add" onClick="(this.value=='add')?add( this.parentNode.parentNode ):ed(this) "></td><td><input type="button" value="del" onClick="this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex )" disabled="true"></td></tr></tbody></table>
<br><input type="button" value="send" onClick="send(this.form)">
</form><br>
<?php print_r($_POST["row"])?>
</BODY>
</HTML>Save the page as the fuj.php and it shows you what you had input before send (if you have PHP module enabled on your server, of course).
See you after some hours :-)
As I am takinkg off the Internet, I drop down here the revised code:
<HTML><HEAD> <META http-equiv="content-type" content="text/html; charset=UTF-8"> <TITLE>add/ed/del row</TITLE> <script> function add(oRow) { oRow.parentNode.replaceChild(oRow.cloneNode(true ),oRow.parentNode.insertRow(oRow.rowIndex+1)); // var inpN = oRow.nextSibling.getElementsByTagName('input'); var inpR = oRow.getElementsByTagName('input'); for(var i=0;i<inpR.length;i++) { if(inpR[i].disabled)inpR[i].disabled=false; if(inpR[i].type=='text')inpR[i].disabled=true; if(inpR[i].value=='add')inpR[i].value='ed'; }; } function ed(oBut) { var inpR = oBut.parentNode.parentNode.getElementsByTagName('input'); for(var i=0;i<inpR.length;i++) { if(oBut.value=='ed' && inpR[i].type=='text')inpR[i].disabled=false; if(oBut.value=='lock' && inpR[i].type=='text')inpR[i].disabled=true; } if(oBut.value=='ed'){oBut.value='lock'}else{oBut.value='ed'} } function send(oForm) { var inpF = oForm.getElementsByTagName('input'); for(var i=0;i<inpF.length;i++) { inpF[i].disabled=false; } oForm.submit(); } </script> </HEAD> <BODY><form method="post" action="./fuj.php"> <table><tbody><tr><td><input type="text" name="row[txt1][]"></td><td><input type="text" name="row[txt2][]"></td><td><input type="button" value="add" onClick="(this.value=='add')?add( this.parentNode.parentNode ):ed(this) "></td><td><input type="button" value="del" onClick="this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex )" disabled="true"></td></tr></tbody></table> <br><input type="button" value="send" onClick="send(this.form)"> </form><br> <?php print_r($_POST["row"])?> </BODY> </HTML>Save the page as the fuj.php and it shows you what you had input before send (if you have PHP module enabled on your server, of course).
See you after some hours :-)
Bravo Maan... exactly wht i looking for... but still there are few validation tht i want in it.... Can u guide me little bit...!!!
i will be thankful to u...!!!
Validation are like this-
1) At least one row and only one row should be Fillled before adding a new row..!!!Value must be integers..!!
2)At the bottom of table there are two textboxes which total the amount of textboxes in Table..!!
3)When Edit button is pressed then add button should be hide...until the row is updated...!!!
4) After update and delete total amount should be update..
Hi, it could be very useful, if you first wrote a simple HTML skeleton of the page even free of the scripts and features, but with the fully unique named items and/or with id. Than it could be much more simple to explain, what is the goal of the programming the features.
Here you are the page, and try to use it not for simple copy/pasting but for learning.
As I do not use MSIE I definitely cannot find out why Exploder does not show it.
Hi, it could be very useful, if you first wrote a simple HTML skeleton of the page even free of the scripts and features, but with the fully unique named items and/or with id. Than it could be much more simple to explain, what is the goal of the programming the features.
Here you are the page, and try to use it not for simple copy/pasting but for learning.
As I do not use MSIE I definitely cannot find out why Exploder does not show it.
tht was almost the perfect function....!!!! Thank u so much..!!
but sir i said only one text box from a row should be filled not both the fields...!!!
and there is one more field in which i m using dropdown and data coming from database...!!
another flaws i found tht when i edit a row..add button got disable and new lock button came in place of edit....but instead of edit if i delete the row... Add button still remain disable...!!!! i hpoe u got my point
but still its a gr8 function.....!!!!!
This javascript function i used for my work but it has lot of flaws..!!
function addRowToTable()
{
// alert(document.getElementById('tblSample').getElementsByTagName('tr').length);
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's noheader row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var iteration1 = parseInt(lastRow+1);
alert(iteration1);
//Validate for empty check
// var iteration = parseFloat(iteration-1);
for(var i=3;i<=iteration1;i++)
{
if($('debit'+i)!=null)
{
if($('debit'+i).value.trim() == '' && $('credit'+i).value.trim() != '')
{
$('debit'+i).readOnly = true;
$('credit'+i).readOnly = true;
$('dledger'+i).disabled = true;
}
else if($('credit'+i).value.trim() == '' && $('debit'+i).value.trim() != '')
{
$('credit'+i).readOnly = true;
$('debit'+i).readOnly = true;
$('dledger'+i).disabled = true;
}
}
}
var debitTotal = 0;
var creditTotal = 0;
if($('debit'+iteration).value.trim() == '' && $('credit'+iteration).value.trim() == '')
{
alert('Please enter debit/credit value');
return false;
}
if($('debit'+iteration).value != '' && $('credit'+iteration).value != '')
{
alert('Please enter only debit/credit value');
return false;
}
for(var i=3;i<=iteration1;i++)
{
if($('debit'+i).value != ''){
debitTotal = parseFloat(debitTotal) + parseFloat($('debit'+i).value);
}
if($('credit'+i).value != ''){
creditTotal = parseFloat(creditTotal) + parseFloat($('credit'+i).value);
}
}
$('tdebit').value = debitTotal;
$('tcredit').value = creditTotal;
document.getElementById('counter').value=iteration-3;
var row = tbl.insertRow(lastRow);
row.id = 'tr_'+iteration1;
// left cell
// cellRightSel.appendChild(sel);
// right cell
var cellRightSel = row.insertCell(0);
var sel = document.createElement('select');
sel.id ='dledger' + iteration1;
sel.name ='dledger' + iteration1;
cellRightSel.align = 'center';
sel.style.width = 125;
//sel.size = 100;
<?
$userid = $_SESSION['userid'];
$sql="SELECT * from 0_ledger where group_id not in(1,7) and user_id = $userid";
$result=mysql_query($sql)or die('Query error:'.''.mysql_errno());
$counter=0;
while($row=mysql_fetch_array($result))
{?>
sel.options[<?= $counter; ?>] = new Option('<?= $row['ledgerName']?>', '<?=$row['ledger_id']?>');
<? $counter = $counter + 1;
}?>
cellRightSel.appendChild(sel);
var cellRight = row.insertCell(1);
cellRight.align = 'center';
var el = document.createElement('input');
el.type = 'text';
el.name = 'debit' + iteration1;
el.id = 'debit' + iteration1;
el.size = 20;
el.maxLength = 8;
cellRight.appendChild(el);
/* var cellRightSel = row.insertCell(2);
var sel = document.createElement('select');
sel.name = 'selRow' + iteration;
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
cellRightSel.appendChild(sel); */
var cellRight2 = row.insertCell(2);
cellRight2.align='center';
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'credit' + iteration1;
el2.id = 'credit' + iteration1;
el2.size = 20;
el2.maxLength = 8;
cellRight2.appendChild(el2);
var cellLeft = row.insertCell(3);
cellLeft.align = 'center';
cellLeft.id = 'td'+iteration1;
var chbk1 = document.createElement('span');
chbk1.id = 'change'+iteration1;
var chbk = document.createElement('input');
chbk.type = 'button';
chbk.name = 'additem'+iteration1;
chbk.id = 'additem'+iteration1;
chbk.className = 'ajaxsubmit';
chbk.value = 'Add Item';
//chbk.disabled = true;
//.onClick = function(){addRowToTable();};
chbk.onclick = function(){addRowToTable1();change();};
//chbk.setAttribute('onClick','addRowToTable1();change()');
cellLeft.appendChild(chbk1);
cellLeft.appendChild(chbk);
}Hi again,
I do not want to argue what is an error and what does not. I tried to show some of my programing experiences.
You may see that a short function check() does the work of input validation very efficiently because it does not give a chance the user to write down a wrong character. It could be, of course, used also 'off line', but when it is called on each key up, you can write the other part of code more simply because you can relay on the input.
I did not understand the request for filled/empty input, but as you cleared it now the IF condition (line 53) have to be cosmetically corrected to emulate the XOR operator. (done).
It is very popular to give any DOM element the id attribute and then look for it by very complicated computed way. In most cases if the user click on some element, you can refer directly to the that/enclosing/neighbor/enclosed element by use of this object reference this this.parentNode this.nextSibling ....
Also you can get a collection of elements of the same TAG. Hence if you want to work with all <INPUT type="text">s on a single row, where the user clicked the button, simply collect those inputs:
AllInputsAtTheRow = this.parentNode.parentNode.getElementsByTagName('input')and while walking through the collection, deal only with those which has the correct name, type, value or sequence number.
About the editing behavior – if one wants to edit a line, the text boxes must be enabled, hence, after the editing is finished, disable must take an effect. Thats why the button [ed] changes into the button [lock] and, in the same way the of ideas, only one row at the same moment can be edited, so other rows are disabled and the add/ed button, too. I forgot the possibility to delete the row at the moment of editing, but it was a minor repair :-) (done).
It is a good exercise to build the page completely by dynamic methodes createElement() appendNode() etc. But It must be pointed out, that browsers differs (not a bit) in interpreting such structure, but in the rendering the HTML they work more closely. So it was shown on the example. The 'prototype' row was completely written in HTML. They are some DOM elements which can be created more efficiently by dynamic code, but the table is not that case. Also you must take in account what I wrote elsewhere, that the registred function (glued to element by events onSomething) are not cloned if the registration is not made by HTML. There is some hack how to do that in FireFox but in MSIE I did not find a cheat.
I am not able to solve your task, because nobody pay me for the analyse, design, coding, debugging and user training. It is your deal. But I try to show some trick rather than guidelines how to do it efficiently :-)
If you allow me an advice: Do not let manipulate yoursef by the user in choosing the resources, algorithm, computational procedures, data structure, and other parts of the process insides. Do your own analyses and never argue if it is good or not to accept the financial model which can count only the positive numbers but differs between credit and debet. It is partially the Roman counting relict, because the Roman numbers were positive only, no zero, and addition and subtraction was not commutative operation! Remember: mathematic and computational science had made great progress from that time :-)
Sir.. u r real Champ..!! :)
i dnt knw why u think tht i want to argue...?? i nvr thnk of it.. :O
thanx for the advice... i will surely work on it...!!!
kindly help me in ur code..
When i add a row for the frst time..and then delete it.. this disable the second row...!!!!
i m unable to enter float value in it...!!! and decimal must be enter once...!!!!!!
jst need little help... thnx..!! :)
Shortly:
<input type="button" value="del" onClick="ed(this.parentNode.previousSibling.firstChild); this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex ); sumus();" disabled="true">
need to be replaced so:
<input type="button" value="del" onClick="ed(this); this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex ); sumus();" disabled="true">
Such mistakes are product of adding features after the finish :-)
The programmer's rules says:
Are you using decimal comma (',') or point ('.')? Correct the RegExp in the condition (e.g.: /[^\d\.]/) in the check() function, but after that the test will be much more week, because it allows type in the decimal point more time. But I hope it is possible to write the RegExp so clearly to fulfill the goal.
Oh sorry, I used the wrong form and the code was not formated. Hence once again:
<input type="button" value="del" onClick="ed(this.parentNode.previousSibling.firstChild); this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex ); sumus();" disabled="true">reaplace by this:
<input type="button" value="del" onClick="ed(this); this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex ); sumus();" disabled="true">A note: if submitting the form, all disabled items will not be send, hence a short function is written to enable all <INPUT>s before submit().
I think over the float input and found you can rewrite the check() function so:
function check(strt)
{ return (parseFloat(strt)!=1*strt && strt!='')?check(strt.slice(0,(strt.length-1))):strt }Hm, here you can see the difference between the parseFloat conversion and automatic one :-)
I think over the float input and found you can rewrite the check() function so:
function check(strt) { return (parseFloat(strt)!=1*strt && strt!='')?check(strt.slice(0,(strt.length-1))):strt }Hm, here you can see the difference between the parseFloat conversion and automatic one :-)
Thank you Sir, thanks a lot..!!! :)
yes u r right sir... we cant send values of textbox on submit..until it is Disabled.. So instead of disabled.. can i use ReadOnly attribute.. that will decrease your coding to some extent..!! :)
your Delete as well as check function is working fine...!!!!
Now i m able to enter float value and decimal once at a time..!!but still i m not able to enter value which starts with decimal.. like(.11)
another thing i m going to use select tag.. does getELementByTagName('input') will accept 'select tag' as input tag..!!
i think no..!! m i right..??
As data of select box comes from database..!! where should i change to make it disable..!!!After Add..!!!
Values of textbox will pass only when when bothside total are same....!!!
So instead of OnKeyUp.. i want to to use Onclick...!!!
Value will add-up on clicking of Add button... because.. i case if you want to edit a field.. then by just writing the value you can make the total same...but i want tht every value should be locked..!! and update the total only when it got locked...!!
I m attaching of small view of my page.. i hope this will give you an Idea what i m want to make..!! :)
Thanks sir.. for such a great help..!! :)
There are some methodes I use frequently:
oElColl= object.getElement[B]s[/B]ByTagName('[I]tagName[/I]');
oElColl=document.getElement[B]s[/B]ByName([I]elementName[/I]);
oneElmt=document.getElementById([I]elementId[/I]);Be careful to distinguish between them
- first two give you collection of element even if only one or none was choosen,
- the third gives one only,
-- hence to work with one of a chooesen element can be done as
oneElmt.value .. .. oneElmt.appendChild(...)but
oElColl[[I]index[/I]].value .. .. oElColl[[I]index[/I]].appendChild(...)- the first can be aplied to any (sub)element
- the two others choose the element(s) from the whole document only
-- it must be taken in account at the beggining of the design: Id must be unique in the document, names (and tags, ofcourse) may repeat, if you make a good distribution into various forms or tables (rows).
Of course,
oElColl = oForm.getElementsByTagName('select');gives collection of all <SELECT> elements in specified form.
The check() function may be thinked once over, but not sure when I reach the computer today again :-)
Yes yes, very nice graphic layout. I always concentrate to the functionality, may be I got less graphic talent :-) But I can recognize the art. (I know about the CSS only that it exists, may be you can give me some lesson :-) )
1) I rewrote the check() function so:
function check(strt){ return (/^\d*\.?\d*/.exec(strt)==strt)?strt:check(strt.slice(0,(strt.length-1))) }finally, it gives what you expectted
2) <SELECT> has somewhat other behavior of the <INPUT>. With the oElm.cloneNode(true) where <SELECT> is a subElement of oElm the <INPUT> preserve its value but <SELECT> get its default selected value. In your case it does not matter, but one have to know what to do.
3) I try to prepare to you an example code with a nice trick how to fill the <SELECT> element with <OPTION>s, But sorry, I must find it on my disk :-).
Yes yes, very nice graphic layout. I always concentrate to the functionality, may be I got less graphic talent :-) But I can recognize the art. (I know about the CSS only that it exists, may be you can give me some lesson :-) )
1) I rewrote the check() function so:
function check(strt){ return (/^\d*\.?\d*/.exec(strt)==strt)?strt:check(strt.slice(0,(strt.length-1))) }finally, it gives what you expectted
2) <SELECT> has somewhat other behavior of the <INPUT>. With the oElm.cloneNode(true) where <SELECT> is a subElement of oElm the <INPUT> preserve its value but <SELECT> get its default selected value. In your case it does not matter, but one have to know what to do.
3) I try to prepare to you an example code with a nice trick how to fill the <SELECT> element with <OPTION>s, But sorry, I must find it on my disk :-).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr"><head>
<title>Journal Entry</title><meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<link href="default.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="time.js"></script>
<script type="text/javascript" src="currentdate.js"></script>
<script language="JavaScript" src="calendar_us.js"></script>
<link rel="stylesheet" href="calendar.css">
<script type="text/javascript">
var i,d=document;
function add(oRow)
{ oRow.parentNode.replaceChild(oRow.cloneNode(true ),oRow.parentNode.insertRow(oRow.rowIndex+1));
var inpS = oRow.getElementsByTagName('select');
var inpR = oRow.getElementsByTagName('input');
var inpN = oRow.nextSibling.getElementsByTagName('input');
for(i=0;i<inpR.length;i++)
{
if(typeof(inpS[i]) != 'undefined') inpS[i].disabled = true;
if(inpR[i].disabled)inpR[i].disabled=false;
if(inpR[i].type=='text'){inpR[i].disabled=true;inpN[i].value=''};
if(inpR[i].value=='add'){inpR[i].value='ed';inpN[i].disabled=true};
}
}
function ed(oBut)
{ var trow = oBut.parentNode.parentNode
var inpR = trow.getElementsByTagName('input');
var addrow = trow.parentNode.childNodes[trow.parentNode.lastChild.rowIndex-1]
var addeds = d.getElementsByName('added');
for(i=0;i<inpR.length;i++)
{ if(oBut.value=='ed' && inpR[i].type=='text')inpR[i].disabled=false;
if(oBut.value=='lock' && inpR[i].type=='text')inpR[i].disabled=true;
}
if(oBut.value=='ed')
{ oBut.value='lock'
for(i=0;i<addeds.length;i++)
{ addeds[i].disabled=true;
} oBut.disabled=false;
addrow.childNodes[0].firstChild.disabled=true;
addrow.childNodes[1].firstChild.disabled=true;
} else // oBut.value is not 'lock'
{ oBut.value='ed'
for(i=0;i<addeds.length;i++)
{ addeds[i].disabled=false;
} emptyStr(addeds[i-1].parentNode.parentNode)
addrow.childNodes[0].firstChild.disabled=false;
addrow.childNodes[1].firstChild.disabled=false;
}
}
function send(oForm)
{ var inpF = oForm.getElementsByTagName('input');
for(i=0;i<inpF.length;i++)
{ inpF[i].disabled=false;
} //oForm.submit();
}
function check(strt){ return (/^\d*\.?\d*/.exec(strt)==strt)?strt:check(strt.slice(0,(strt.length-1))) }
function emptyStr(oRow)
{ var oInpS=oRow.getElementsByTagName('input');var sum1=0,sum2=0;
oInpS[0].value=check(oInpS[0].value);oInpS[1].value=check(oInpS[1].value);
if( oInpS[0].value && !(oInpS[1].value) || oInpS[1].value && !(oInpS[0].value)) oInpS[2].disabled=false;
else oInpS[2].disabled=true;
//sumus();
}
function sumus()
{ var sum1=0,sum2=0;
var Col1InpS = d.getElementsByName('row[txt1][]');
var Col2InpS = d.getElementsByName('row[txt2][]');
for(i=0;i<Col1InpS.length;i++)
{ sum1+=1*Col1InpS[i].value;sum2+=1*Col2InpS[i].value;
} d.getElementById('s1').innerHTML=sum1;d.getElementById('s2').innerHTML=sum2;
}
function check1()
{
if(getElementById('s1').innerHTML != getElementById('s2').innerHTML)
{
alert(getElementById('s1').innerHTML);
alert('total should be matched before proceed');
return false();
}
}
</script>
</HEAD>
<script type="text/javascript" src="tigra_hints.js"></script>
<style>
.hintsClass {
font-family: tahoma, verdana, arial;
font-size: 12px;
background-color: #f3ffff;
color: #000000;
border: 1px solid #808080;
padding: 5px;
}
.hintSource {
color: green;
text-decoration: underline;
cursor: pointer;
}
</style>
<?
$userid = $_SESSION['userid'];
$sql="SELECT * from 0_ledger where group_id not in(1,7) and user_id = $userid";
$result=mysql_query($sql)or die('Query error:'.''.mysql_errno());
?>
</head>
<body onload="startTime(); currentdate();">
<?php include_once('header.php');
include_once('menu3.php');?>
<script language="JavaScript">
// configuration variable for the hint object, these setting will be shared among all hints created by this object
var HINTS_CFG = {
'wise' : true, // don't go off screen, don't overlap the object in the document
'margin' : 10, // minimum allowed distance between the hint and the window edge (negative values accepted)
'gap' : 0, // minimum allowed distance between the hint and the origin (negative values accepted)
'align' : 'tcbc', // align of the hint and the origin (by first letters origin's top|middle|bottom left|center|right to hint's top|middle|bottom left|center|right)
'css' : 'hintsClass', // a style class name for all hints, applied to DIV element (see style section in the header of the document)
'show_delay' : 50, // a delay between initiating event (mouseover for example) and hint appearing
'hide_delay' : 50, // a delay between closing event (mouseout for example) and hint disappearing
'follow' : false, // hint follows the mouse as it moves
'z-index' : 100, // a z-index for all hint layers
'IEfix' : false, // fix IE problem with windowed controls visible through hints (activate if select boxes are visible through the hints)
'IEtrans' : ['blendTrans(DURATION=.3)', 'blendTrans(DURATION=.3)'], // [show transition, hide transition] - nice transition effects, only work in IE5+
'opacity' : 100 // opacity of the hint in %%
};
// text/HTML of the hints
var HINTS_ITEMS = [
'Date Should not be of Future',
'If Last Actual Budget is Null then <br> it means no entry is passed in last month',
'tooltip for item3<br>This one is multi line',
'tooltip for item4',
'another sample tooltip with the <a href="http://www.softcomplex.com">link</a>'
];
var myHint = new THints(HINTS_ITEMS, HINTS_CFG);
</script>
<div class="clear">
</div>
<div id="menu2">
<ul>
<li><a href="entry.php" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px">Journal Entry</a></li>
<li><a href="payment.php" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px">Payments</a></li>
<li><a href="deposit.php" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px">Receipts</a></li>
<li><a href="showgl.php" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px">View Journal Entries </a></li>
<li><a href="contra.php" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px">Contra Entry</a></li>
</ul>
</div>
<div class="clear"></div>
<center>
<table border="0" width="100%">
<tr>
<td width="20%"><font face="Courier New, Courier, mono" size="+1"><b>Journal Entry</b></font></td>
<td align="center" width="50%"><b> Welcome <?= $_SESSION['username'];?></b></td>
<td align="right"><div id="txt1"></div></td>
</tr>
<tr>
<td class="titletext" style=""> </td>
<td align="right" class="titletext" colspan="2">Time:<span id="txt"></span></td>
</tr>
</table>
</center>
</center>
<div class="clear"></div>
<br><?include_once('msgbox.php'); ?>
<form method="post" name='testform' action="" onsubmit="return validate();">
<center>
<table style="border-collapse: collapse;" width="50%" bgcolor="#f9f9f9" border="0" bordercolor="#cccccc" cellpadding="3" cellspacing="0">
<input type="hidden" name='type' id='type' value="Journal">
<tr>
<td width="50%" align="right"><b>Date:</b></td>
<td><input type="text" value="<?=$_POST['testinput']; ?>" name="testinput" readonly="readonly" onmouseover="myHint.show(0, this)" onmouseout="myHint.hide()" />
<script language="JavaScript">
new tcal ({
// form name
'formname': 'testform',
// input name
'controlname': 'testinput'
});
</script>
</a>
</td>
</tr>
</table></center>
<br><center>
<table style="border-collapse: collapse;" id="tblSample" width="95%" bgcolor="#f9f9f9" border="1" bordercolor="#cccccc" cellpadding="3" cellspacing="0" id="testtable">
<tr>
<td colspan="4"><center><span class="headingtext">Transactions</span></center></td>
</tr>
<tr>
<td class="tableheader">Account Description</td>
<td class="tableheader">Debit</td>
<td class="tableheader">Credit</td>
<td class="tableheader"> </td>
</tr>
<tr class="evenrow" id='tr3'>
<td align="center">
<select id="row[txt0][]" name="row[txt0][]" style="width:130px" onchange="return myPopup2();">
<? while($row=mysql_fetch_array($result)) { ?>
<option value="<?=$row['ledger_id']?>"><?=$row['ledgerName'];?></option>
<?}?>
<option value="2">Add New Ledger</option>
</select>
</td>
<td><input type="text" name="row[txt1][]" onKeyUp="this.value=check(this.value); emptyStr(this.parentNode.parentNode)" onBlur="emptyStr(this.parentNode.parentNode)" ></td>
<td><input type="text" name="row[txt2][]" onKeyUp="this.value=check(this.value); emptyStr(this.parentNode.parentNode)" onBlur="emptyStr(this.parentNode.parentNode)"></td>
<td><input type="button" name="added" value="add" onClick="(this.value=='add')?add( this.parentNode.parentNode ):ed(this);sumus(); " disabled="true">
<input type="button" value="del" onClick="ed(this); this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex ); sumus();" disabled="true"></td>
</tr>
<tr>
<th>Total</th>
<td id="s1"></td>
<td id="s2"></td>
<td></td></tr></tbody></table>
</center>
</div><br><table align="center"><tbody><tr><td><b>Narration:</b></td>
<td>
<textarea cols="40" rows="3" name="narration" id='narration'><?=$_POST['narration']?></textarea></td>
</tr> <input type="hidden" name="counter" id="counter">
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
<br><center><input onclick='return check1();' class="ajaxsubmit" name="Process" id="Process" value="Process Journal Entry" title="Process journal entry only if debits equal to credits" type="submit">
</center>
</form>
</div><br><div id="footer">
<? include_once('footer.html'); ?>
</body>
</html>This is my almost done code... i made few changes in it...but what problem i m facing now that it does not work on Firefox..!! :( my bad luck..!! its showing weird behavior in firefox... like add button does nt disable for first time... when i click on it changes to edit button..!!
:(
i m attaching a screenshot of firefox view...!!!
Thanks Sir for your Support
As I promised, I pulled out a piece of code and added it into the exaple, to show you a nice trick, how to create an option list very easy and clearly. As I added the <SELECT> column, it cause me to change somewhat the other routine, but I hope you can find and understand.
To show the powerful dynamic <OPTION> fill I adopted the function knockOut() for to trim the option list at each <SELECT> cleared of the used items. May be it is coded in 'lama' style, because in hurry :-) But for the understanding the javascript 1.2 it is sufficient. I hope.
I put here my version of code with a short PHP 'loader'. Your coding is very clear, good formated and commented. It gives you good chances to return back to your code and easy to repair it if necessary. Points for you! I see, I can easy introduce myself into the CSS from your code, too. Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<TITLE>add/ed/del row</TITLE><?php ?> <?php /*comments*/?>
<?php
if($row=$_POST['row'])
{ foreach($row as $k => $v)
{ foreach($v as $kk => $vv)
{ $wor[$kk][$k]=$vv;
};
};
} else $wor="";
$arrBrand=array(1=>"Electricity"
,2=>"Water"
,3=>"Gas"
,4=>"Appartement Rent"
,5=>"School Fee");
/** $arrayBrand can be get from a database
$res=mysql_query("SELECT distinct brand FROM table");
$i=0;while($cols = mysql_fetch_row($dbResult))
{$line[$i]="'$i':['$i++','".$cols[0]."']";
}
//*/
foreach($arrBrand as $kk => $vv){ $line[]="'$kk':['$kk','$vv']";}
$optOut="\n{".implode("\n,",$line)."}";
////oSel.length = 0;
?>
<script>
var i,d=document;
/*********************************************************************/
var oOpts = <?php print $optOut ?>; // move the set of Options into a JS object!
function add_option(what,where) // to define and add one Option
{ var nop = d.createElement('option');
nop.innerHTML = what[1]; // nop.text does not accept MSIE
nop.value = what[0];
nop.title = nop.alt = what[0]; // showes the option value as 'bubble'
where.appendChild(nop);
}
function fill_sell(oSel,oSet,oExept) // to clear and fill back the Option set
{ if(oExept==undefined)oExept={}; // except used ones
var myVal='';if(oSel.length>1){ myVal=oSel.value; oSel.length = 1; }
for(var l in oSet)
{ if( (l==myVal) || !(l in oExept) ) add_option(oSet[l],oSel);
} oSel.value=myVal;
}
function knockOut(formChild) // to trim the each <select> option list
{ var selOpt=collect(formChild.form);
var selAll = formChild.form.getElementsByTagName('select');
var selNew = selAll[selAll.length-1];
if(formChild.nodeName=='SELECT') selNew = formChild;
for(i=0;i<selAll.length;i++) fill_sell(selAll[i], oOpts, collect(selAll[i].form));
}
function collect(frm) // to create an object from all used values
{ var selVar = {};
var selAll = frm.getElementsByTagName('select');
for(var k=0;k < selAll.length ;k++)
{ if(selAll[k].length>1 && (selAll[k].value in oOpts)) selVar[selAll[k].value]=selAll[k].selectedIndex;
} return selVar;
}
/**********************************************************************/
function add(oRow)
{ oRow.parentNode.replaceChild(oRow.cloneNode(true ),oRow.parentNode.insertRow(oRow.rowIndex+1));
var inpR = oRow.getElementsByTagName('input');
var inpN = oRow.nextSibling.getElementsByTagName('input');
var selR = oRow.getElementsByTagName('select')[0];
selR.disabled=true;
var selN = oRow.nextSibling.getElementsByTagName('select')[0];
selN.length = 1;
for(i=0;i<inpR.length;i++)
{ if(inpR[i].disabled)inpR[i].disabled=false;
if(inpR[i].type=='text'){inpR[i].disabled=true;inpN[i].value=''};
if(inpR[i].value=='add'){inpR[i].value='ed';inpN[i].disabled=true};
} sumus();knockOut(selN);
}
function ed(oBut)
{ var nextSel = oBut.parentNode.parentNode.nextSibling.firstChild.firstChild;
var trow = oBut.parentNode.parentNode;
var inpR = trow.getElementsByTagName('input');
var selR = trow.getElementsByTagName('select')[0];
var addrow = trow.parentNode.childNodes[trow.parentNode.lastChild.rowIndex-1]
var addeds = d.getElementsByName('added');
for(i=0;i<inpR.length;i++)
{ if(oBut.value=='ed' && inpR[i].type=='text'){inpR[i].disabled=false;selR.disabled=false;}
if(oBut.value=='lock' && inpR[i].type=='text'){inpR[i].disabled=true; selR.disabled=true;}
}
if(oBut.value=='ed')
{ oBut.value='lock'
for(i=0;i<addeds.length;i++)
{ addeds[i].disabled=true;
} oBut.disabled=false;
addrow.childNodes[0].firstChild.disabled=true;
addrow.childNodes[1].firstChild.disabled=true;
addrow.childNodes[2].firstChild.disabled=true;
} else // oBut.value is not 'lock'
{ oBut.value='ed'
for(i=0;i<addeds.length;i++)
{ addeds[i].disabled=false;
} emptyStr(addeds[i-1].parentNode.parentNode)
addrow.childNodes[0].firstChild.disabled=false;
addrow.childNodes[1].firstChild.disabled=false;
addrow.childNodes[2].firstChild.disabled=false;
} knockOut(nextSel);
//alert(nextSel);
}
function send(oForm)
{ var inpF = oForm.getElementsByTagName('input');
for(i=0;i<inpF.length;i++)
{ inpF[i].disabled=false;
} oForm.submit();
} function check(strt){ return (/^\d*\.?\d*/.exec(strt)==strt)?strt:check(strt.slice(0,(strt.length-1))) }
function emptyStr(oRow)
{ var oInpS =oRow.getElementsByTagName('input');var sum1=0,sum2=0;
oInpS[0].value=check(oInpS[0].value); oInpS[1].value=check(oInpS[1].value);
if( oInpS[0].value && !(oInpS[1].value) || oInpS[1].value && !(oInpS[0].value))
oInpS[2].disabled=false;
else oInpS[2].disabled=true;
sumus();
}
function sumus()
{ var sum1=0,sum2=0;
var Col1InpS = d.getElementsByName('row[credit][]');
var Col2InpS = d.getElementsByName('row[debet][]');
for(i=0;i<Col1InpS.length;i++)
{ sum1+=1*Col1InpS[i].value;sum2+=1*Col2InpS[i].value;
} d.getElementById('s1').innerHTML=sum1;d.getElementById('s2').innerHTML=sum2;
}
</script>
</HEAD>
<BODY><form method="post" action="./fuj.php">
<table><tbody><tr><td><select name="row[brand][]" onChange="knockOut(this)"><option value="" disabled="true">Choose one</option></td><td><input type="text" name="row[credit][]" onKeyUp=" emptyStr(this.parentNode.parentNode)" onBlur="emptyStr(this.parentNode.parentNode)" ></td><td><input type="text" name="row[debet][]" onKeyUp="this.value=check(this.value); emptyStr(this.parentNode.parentNode)" onBlur="emptyStr(this.parentNode.parentNode)"></td><td><input type="button" name="added" value="add" onClick="(this.value=='add')?add( this.parentNode.parentNode ):ed(this) " disabled="true"></td><td><input type="button" value="del" onClick="var nextSel = this.parentNode.parentNode.nextSibling.firstChild.firstChild; ed(this); this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex ); sumus(); knockOut(nextSel);" disabled="true"></td></tr><tr><td></td><td id="s1"></td><td id="s2"></td><td></td><td></td></tr></tbody></table>
<br><input type="button" value="send" onClick="send(this.form)">
<script>fill_sell(d.getElementsByTagName('select')[0],oOpts)</script>
</form><br>
<?php print_r($_POST["row"]);print_r($wor);?>
</BODY>
</HTML>As I promised, I pulled out a piece of code and added it into the exaple, to show you a nice trick, how to create an option list very easy and clearly. As I added the <SELECT> column, it cause me to change somewhat the other routine, but I hope you can find and understand.
To show the powerful dynamic <OPTION> fill I adopted the function knockOut() for to trim the option list at each <SELECT> cleared of the used items. May be it is coded in 'lama' style, because in hurry :-) But for the understanding the javascript 1.2 it is sufficient. I hope.
I put here my version of code with a short PHP 'loader'. Your coding is very clear, good formated and commented. It gives you good chances to return back to your code and easy to repair it if necessary. Points for you! I see, I can easy introduce myself into the CSS from your code, too. Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML><HEAD> <META http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <TITLE>add/ed/del row</TITLE><?php ?> <?php /*comments*/?> <?php if($row=$_POST['row']) { foreach($row as $k => $v) { foreach($v as $kk => $vv) { $wor[$kk][$k]=$vv; }; }; } else $wor=""; $arrBrand=array(1=>"Electricity" ,2=>"Water" ,3=>"Gas" ,4=>"Appartement Rent" ,5=>"School Fee"); /** $arrayBrand can be get from a database $res=mysql_query("SELECT distinct brand FROM table"); $i=0;while($cols = mysql_fetch_row($dbResult)) {$line[$i]="'$i':['$i++','".$cols[0]."']"; } //*/ foreach($arrBrand as $kk => $vv){ $line[]="'$kk':['$kk','$vv']";} $optOut="\n{".implode("\n,",$line)."}"; ////oSel.length = 0; ?> <script> var i,d=document; /*********************************************************************/ var oOpts = <?php print $optOut ?>; // move the set of Options into a JS object! function add_option(what,where) // to define and add one Option { var nop = d.createElement('option'); nop.innerHTML = what[1]; // nop.text does not accept MSIE nop.value = what[0]; nop.title = nop.alt = what[0]; // showes the option value as 'bubble' where.appendChild(nop); } function fill_sell(oSel,oSet,oExept) // to clear and fill back the Option set { if(oExept==undefined)oExept={}; // except used ones var myVal='';if(oSel.length>1){ myVal=oSel.value; oSel.length = 1; } for(var l in oSet) { if( (l==myVal) || !(l in oExept) ) add_option(oSet[l],oSel); } oSel.value=myVal; } function knockOut(formChild) // to trim the each <select> option list { var selOpt=collect(formChild.form); var selAll = formChild.form.getElementsByTagName('select'); var selNew = selAll[selAll.length-1]; if(formChild.nodeName=='SELECT') selNew = formChild; for(i=0;i<selAll.length;i++) fill_sell(selAll[i], oOpts, collect(selAll[i].form)); } function collect(frm) // to create an object from all used values { var selVar = {}; var selAll = frm.getElementsByTagName('select'); for(var k=0;k < selAll.length ;k++) { if(selAll[k].length>1 && (selAll[k].value in oOpts)) selVar[selAll[k].value]=selAll[k].selectedIndex; } return selVar; } /**********************************************************************/ function add(oRow) { oRow.parentNode.replaceChild(oRow.cloneNode(true ),oRow.parentNode.insertRow(oRow.rowIndex+1)); var inpR = oRow.getElementsByTagName('input'); var inpN = oRow.nextSibling.getElementsByTagName('input'); var selR = oRow.getElementsByTagName('select')[0]; selR.disabled=true; var selN = oRow.nextSibling.getElementsByTagName('select')[0]; selN.length = 1; for(i=0;i<inpR.length;i++) { if(inpR[i].disabled)inpR[i].disabled=false; if(inpR[i].type=='text'){inpR[i].disabled=true;inpN[i].value=''}; if(inpR[i].value=='add'){inpR[i].value='ed';inpN[i].disabled=true}; } sumus();knockOut(selN); } function ed(oBut) { var nextSel = oBut.parentNode.parentNode.nextSibling.firstChild.firstChild; var trow = oBut.parentNode.parentNode; var inpR = trow.getElementsByTagName('input'); var selR = trow.getElementsByTagName('select')[0]; var addrow = trow.parentNode.childNodes[trow.parentNode.lastChild.rowIndex-1] var addeds = d.getElementsByName('added'); for(i=0;i<inpR.length;i++) { if(oBut.value=='ed' && inpR[i].type=='text'){inpR[i].disabled=false;selR.disabled=false;} if(oBut.value=='lock' && inpR[i].type=='text'){inpR[i].disabled=true; selR.disabled=true;} } if(oBut.value=='ed') { oBut.value='lock' for(i=0;i<addeds.length;i++) { addeds[i].disabled=true; } oBut.disabled=false; addrow.childNodes[0].firstChild.disabled=true; addrow.childNodes[1].firstChild.disabled=true; addrow.childNodes[2].firstChild.disabled=true; } else // oBut.value is not 'lock' { oBut.value='ed' for(i=0;i<addeds.length;i++) { addeds[i].disabled=false; } emptyStr(addeds[i-1].parentNode.parentNode) addrow.childNodes[0].firstChild.disabled=false; addrow.childNodes[1].firstChild.disabled=false; addrow.childNodes[2].firstChild.disabled=false; } knockOut(nextSel); //alert(nextSel); } function send(oForm) { var inpF = oForm.getElementsByTagName('input'); for(i=0;i<inpF.length;i++) { inpF[i].disabled=false; } oForm.submit(); } function check(strt){ return (/^\d*\.?\d*/.exec(strt)==strt)?strt:check(strt.slice(0,(strt.length-1))) } function emptyStr(oRow) { var oInpS =oRow.getElementsByTagName('input');var sum1=0,sum2=0; oInpS[0].value=check(oInpS[0].value); oInpS[1].value=check(oInpS[1].value); if( oInpS[0].value && !(oInpS[1].value) || oInpS[1].value && !(oInpS[0].value)) oInpS[2].disabled=false; else oInpS[2].disabled=true; sumus(); } function sumus() { var sum1=0,sum2=0; var Col1InpS = d.getElementsByName('row[credit][]'); var Col2InpS = d.getElementsByName('row[debet][]'); for(i=0;i<Col1InpS.length;i++) { sum1+=1*Col1InpS[i].value;sum2+=1*Col2InpS[i].value; } d.getElementById('s1').innerHTML=sum1;d.getElementById('s2').innerHTML=sum2; } </script> </HEAD> <BODY><form method="post" action="./fuj.php"> <table><tbody><tr><td><select name="row[brand][]" onChange="knockOut(this)"><option value="" disabled="true">Choose one</option></td><td><input type="text" name="row[credit][]" onKeyUp=" emptyStr(this.parentNode.parentNode)" onBlur="emptyStr(this.parentNode.parentNode)" ></td><td><input type="text" name="row[debet][]" onKeyUp="this.value=check(this.value); emptyStr(this.parentNode.parentNode)" onBlur="emptyStr(this.parentNode.parentNode)"></td><td><input type="button" name="added" value="add" onClick="(this.value=='add')?add( this.parentNode.parentNode ):ed(this) " disabled="true"></td><td><input type="button" value="del" onClick="var nextSel = this.parentNode.parentNode.nextSibling.firstChild.firstChild; ed(this); this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex ); sumus(); knockOut(nextSel);" disabled="true"></td></tr><tr><td></td><td id="s1"></td><td id="s2"></td><td></td><td></td></tr></tbody></table> <br><input type="button" value="send" onClick="send(this.form)"> <script>fill_sell(d.getElementsByTagName('select')[0],oOpts)</script> </form><br> <?php print_r($_POST["row"]);print_r($wor);?> </BODY> </HTML>
Thanks again Sir...!!! Superb Work..!!!
but have to notice.. the brand u select once does not come for second time..!! i means once u select 'Water'option...it does not
come in second Row..!! :(
javascript is very confusing
<?
include_once('session.php');
include_once('datainsert.php');
include_once('config2.php');
?>
<?php
if($row=$_POST['row'])
{ foreach($row as $k => $v)
{ foreach($v as $kk => $vv)
{ $wor[$kk][$k]=$vv;
};
};
} else $wor="";
/* $userid = $_SESSION['userid'];
$sql="SELECT * from 0_ledger where group_id not in(1,7) and user_id = $userid";
$result=mysql_query($sql)or die('Query error:'.''.mysql_errno());
$arrBrand = array();
while($row=mysql_fetch_array($result)) {
$arrBrand[$row['ledger_id']] = $row['ledgerName'];
} */Sir this is my php code in comment with query...
how can i implement there..in in place of array.....??
Thanks Sir..!! :)
and one more thing.. when i send data... the BRAND array shows blank..!! i dont knw why..??
I am bac again :-)
-- the brand u select once does not come for second time......
yes, this is the feature maden by the knockOut() function, if not wanted, rewrite the function as this: function knockOut(formChild) {} and in the add(oRow) function you must delete the instruction: selN.length = 1; -- the empty brand[] array ... as I told, all the 'inputs' must be enabled what I forgot, where I used the attribute disabled, you may have the readonly. In my code add the enabling loop for <SELECT> elements in the send() function:
function send(oForm)
{ var inpF = oForm.getElementsByTagName('input');
for(i=0;i<inpF.length;i++){ inpF[i].disabled=false; }
var inpF = oForm.getElementsByTagName('select');
for(i=0;i<inpF.length;i++){ inpF[i].disabled=false; }
oForm.submit();
}-- the $arrBrand filling code looks correct, I hope, that the keys are unique :-)
With the javascript you can also enable the [add] button on the extended condition that the 'brand' must be selected, too.
I am bac again :-)
-- the brand u select once does not come for second time......
yes, this is the feature maden by the knockOut() function, if not wanted, rewrite the function as this:function knockOut(formChild) {}and in the add(oRow) function you must delete the instruction:selN.length = 1;-- the empty brand[] array ... as I told, all the 'inputs' must be enabled what I forgot, where I used the attribute disabled, you may have the readonly. In my code add the enabling loop for <SELECT> elements in the send() function:function send(oForm) { var inpF = oForm.getElementsByTagName('input'); for(i=0;i<inpF.length;i++){ inpF[i].disabled=false; } var inpF = oForm.getElementsByTagName('select'); for(i=0;i<inpF.length;i++){ inpF[i].disabled=false; } oForm.submit(); }-- the $arrBrand filling code looks correct, I hope, that the keys are unique :-)
With the javascript you can also enable the [add] button on the extended condition that the 'brand' must be selected, too.
<?
include_once('session.php');
include_once('datainsert.php');
include_once('config2.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr"><head>
<title>Journal Entry</title><meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<link href="default.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="time.js"></script>
<script type="text/javascript" src="currentdate.js"></script>
<script language="JavaScript" src="calendar_us.js"></script>
<link rel="stylesheet" href="calendar.css">
<?php
if($row=$_POST['row'])
{ foreach($row as $k => $v)
{ foreach($v as $kk => $vv)
{ $wor[$kk][$k]=$vv;
};
};
} else $wor="";
$userid = $_SESSION['userid'];
$sql="SELECT * from 0_ledger where group_id not in(1,7) and user_id = $userid";
$result=mysql_query($sql)or die('Query error:'.''.mysql_errno());
$arrBrand = array();
while($row=mysql_fetch_array($result)) {
$arrBrand[$row['ledger_id']] = $row['ledgerName'];
}
/*$arrBrand=array(1=>"Electricity"
,2=>"Water"
,3=>"Gas"
,4=>"Appartement Rent"
,5=>"School Fee"); */
/** $arrayBrand can be get from a database
$res=mysql_query("SELECT * from 0_ledger where group_id not in(1,7) and user_id = $userid");
$i=0;while($cols = mysql_fetch_row($dbResult))
{$line[$i]="'$i':['$i++','".$cols[0]."']";
}
//*/
foreach($arrBrand as $kk => $vv){ $line[]="'$kk':['$kk','$vv']";}
$optOut="\n{".implode("\n,",$line)."}";
/*echo '<pre>';print_r($arrBrand);
print_r($line);
print_r($optOut); */
////oSel.length = 0;
?>
<script>
var i,d=document;
/*********************************************************************/
var oOpts = <?php print $optOut ?>; // move the set of Options into a JS object!
function add_option(what,where) // to define and add one Option
{ var nop = d.createElement('option');
nop.innerHTML = what[1]; // nop.text does not accept MSIE
nop.value = what[0];
nop.title = nop.alt = what[0]; // showes the option value as 'bubble'
where.appendChild(nop);
}
function fill_sell(oSel,oSet,oExept) // to clear and fill back the Option set
{ if(oExept==undefined)oExept={}; // except used ones
var myVal='';if(oSel.length>1){ myVal=oSel.value; oSel.length = 1; }
for(var l in oSet)
{ if( (l==myVal) || !(l in oExept) ) add_option(oSet[l],oSel);
} oSel.value=myVal;
}
function knockOut(formChild) // to trim the each <select> option list
{ /*var selOpt=collect(formChild.form);
var selAll = formChild.form.getElementsByTagName('select');
var selNew = selAll[selAll.length-1];
if(formChild.nodeName=='SELECT') selNew = formChild;
for(i=0;i<selAll.length;i++) fill_sell(selAll[i], oOpts, collect(selAll[i].form)); */
}
function collect(frm) // to create an object from all used values
{ var selVar = {};
var selAll = frm.getElementsByTagName('select');
for(var k=0;k < selAll.length ;k++)
{ if(selAll[k].length>1 && (selAll[k].value in oOpts)) selVar[selAll[k].value]=selAll[k].selectedIndex;
} return selVar;
}
/**********************************************************************/
function add(oRow)
{ oRow.parentNode.replaceChild(oRow.cloneNode(true ),oRow.parentNode.insertRow(oRow.rowIndex+1));
var inpR = oRow.getElementsByTagName('input');
var inpN = oRow.nextSibling.getElementsByTagName('input');
var selR = oRow.getElementsByTagName('select')[0];
selR.disabled=true;
var selN = oRow.nextSibling.getElementsByTagName('select')[0];
// selN.length = 1;
for(i=0;i<inpR.length;i++)
{ if(inpR[i].disabled)inpR[i].disabled=false;
if(inpR[i].type=='text'){inpR[i].disabled=true;inpN[i].value=''};
if(inpR[i].value=='add'){inpR[i].value='ed';inpN[i].disabled=true};
} sumus();knockOut(selN);
}
function ed(oBut)
{ var nextSel = oBut.parentNode.parentNode.nextSibling.firstChild.firstChild;
var trow = oBut.parentNode.parentNode;
var inpR = trow.getElementsByTagName('input');
var selR = trow.getElementsByTagName('select')[0];
var addrow = trow.parentNode.childNodes[trow.parentNode.lastChild.rowIndex-1]
var addeds = d.getElementsByName('added');
for(i=0;i<inpR.length;i++)
{ if(oBut.value=='ed' && inpR[i].type=='text'){inpR[i].disabled=false;selR.disabled=false;}
if(oBut.value=='lock' && inpR[i].type=='text'){inpR[i].disabled=true; selR.disabled=true;}
}
if(oBut.value=='ed')
{ oBut.value='lock'
for(i=0;i<addeds.length;i++)
{ addeds[i].disabled=true;
} oBut.disabled=false;
addrow.childNodes[0].firstChild.disabled=true;
addrow.childNodes[1].firstChild.disabled=true;
addrow.childNodes[2].firstChild.disabled=true;
} else // oBut.value is not 'lock'
{ oBut.value='ed'
for(i=0;i<addeds.length;i++)
{ addeds[i].disabled=false;
} emptyStr(addeds[i-1].parentNode.parentNode)
addrow.childNodes[0].firstChild.disabled=false;
addrow.childNodes[1].firstChild.disabled=false;
addrow.childNodes[2].firstChild.disabled=false;
} knockOut(nextSel);
//alert(nextSel);
}
function send(oForm)
{ var inpF = oForm.getElementsByTagName('input');
for(i=0;i<inpF.length;i++)
{ inpF[i].disabled=false;
} oForm.submit();
} function check(strt){ return (/^\d*\.?\d*/.exec(strt)==strt)?strt:check(strt.slice(0,(strt.length-1))) }
function emptyStr(oRow)
{ var oInpS =oRow.getElementsByTagName('input');var sum1=0,sum2=0;
oInpS[0].value=check(oInpS[0].value); oInpS[1].value=check(oInpS[1].value);
if( oInpS[0].value && !(oInpS[1].value) || oInpS[1].value && !(oInpS[0].value))
oInpS[2].disabled=false;
else oInpS[2].disabled=true;
sumus();
}
function sumus()
{ var sum1=0,sum2=0;
var Col1InpS = d.getElementsByName('row[credit][]');
var Col2InpS = d.getElementsByName('row[debet][]');
for(i=0;i<Col1InpS.length;i++)
{ sum1+=1*Col1InpS[i].value;sum2+=1*Col2InpS[i].value;
} d.getElementById('s1').innerHTML=sum1;d.getElementById('s2').innerHTML=sum2;
}
</script>
</HEAD>
<table align="center" style="border-collapse: collapse;" id="tblSample" width="95%" bgcolor="#f9f9f9" border="1" bordercolor="#cccccc" cellpadding="3" cellspacing="0" id="testtable">
<tr><td align="center"><select name="row[brand][]" onChange="knockOut(this)"><option value="" disabled="true">Choose one
</option></td>
<td align="center"><input type="text" name="row[credit][]" onKeyUp=" emptyStr(this.parentNode.parentNode)" onBlur="emptyStr(this.parentNode.parentNode)" ></td>
<td align="center"><input type="text" name="row[debet][]" onKeyUp="this.value=check(this.value); emptyStr(this.parentNode.parentNode)" onBlur="emptyStr(this.parentNode.parentNode)"></td>
<td align="center"><input type="button" name="added" value="add" onClick="(this.value=='add')?add( this.parentNode.parentNode ):ed(this) " disabled="true"><input type="button" value="del" onClick="var nextSel = this.parentNode.parentNode.nextSibling.firstChild.firstChild; ed(this); this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex ); sumus(); knockOut(nextSel);" disabled="true"></td></tr>
<tr>
<td>Total</td>
<td id="s1"></td>
<td id="s2"></td>
<td></td>
</tr></tbody></table>
<br><input type="button" value="send" onClick="send(this.form)">
<script>fill_sell(d.getElementsByTagName('select')[0],oOpts)</script>
</form><br>
<?php echo '<pre>';print_r($_POST["row"]);print_r($wor);?>
</BODY>
</HTML>Sir i dont knw what is happening... again the code creating problem in Firefox...!!!! :( :(
But i will not loose the hope..!! :)
I am bac again :-)
-- the brand u select once does not come for second time......
yes, this is the feature maden by the knockOut() function, if not wanted, rewrite the function as this:function knockOut(formChild) {}and in the add(oRow) function you must delete the instruction:selN.length = 1;-- the empty brand[] array ... as I told, all the 'inputs' must be enabled what I forgot, where I used the attribute disabled, you may have the readonly. In my code add the enabling loop for <SELECT> elements in the send() function:function send(oForm) { var inpF = oForm.getElementsByTagName('input'); for(i=0;i<inpF.length;i++){ inpF[i].disabled=false; } var inpF = oForm.getElementsByTagName('select'); for(i=0;i<inpF.length;i++){ inpF[i].disabled=false; } oForm.submit(); }-- the $arrBrand filling code looks correct, I hope, that the keys are unique :-)
With the javascript you can also enable the [add] button on the extended condition that the 'brand' must be selected, too.
<?
include_once('session.php');
include_once('datainsert.php');
include_once('config2.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr"><head>
<title>Journal Entry</title><meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<link href="default.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="time.js"></script>
<script type="text/javascript" src="currentdate.js"></script>
<script language="JavaScript" src="calendar_us.js"></script>
<link rel="stylesheet" href="calendar.css">
<?php
if($row=$_POST['row'])
{ foreach($row as $k => $v)
{ foreach($v as $kk => $vv)
{ $wor[$kk][$k]=$vv;
};
};
} else $wor="";
$userid = $_SESSION['userid'];
$sql="SELECT * from 0_ledger where group_id not in(1,7) and user_id = $userid";
$result=mysql_query($sql)or die('Query error:'.''.mysql_errno());
$arrBrand = array();
while($row=mysql_fetch_array($result)) {
$arrBrand[$row['ledger_id']] = $row['ledgerName'];
}
/*$arrBrand=array(1=>"Electricity"
,2=>"Water"
,3=>"Gas"
,4=>"Appartement Rent"
,5=>"School Fee"); */
/** $arrayBrand can be get from a database
$res=mysql_query("SELECT * from 0_ledger where group_id not in(1,7) and user_id = $userid");
$i=0;while($cols = mysql_fetch_row($dbResult))
{$line[$i]="'$i':['$i++','".$cols[0]."']";
}
//*/
foreach($arrBrand as $kk => $vv){ $line[]="'$kk':['$kk','$vv']";}
$optOut="\n{".implode("\n,",$line)."}";
/*echo '<pre>';print_r($arrBrand);
print_r($line);
print_r($optOut); */
////oSel.length = 0;
?>
<script>
var i,d=document;
/*********************************************************************/
var oOpts = <?php print $optOut ?>; // move the set of Options into a JS object!
function add_option(what,where) // to define and add one Option
{ var nop = d.createElement('option');
nop.innerHTML = what[1]; // nop.text does not accept MSIE
nop.value = what[0];
nop.title = nop.alt = what[0]; // showes the option value as 'bubble'
where.appendChild(nop);
}
function fill_sell(oSel,oSet,oExept) // to clear and fill back the Option set
{ if(oExept==undefined)oExept={}; // except used ones
var myVal='';if(oSel.length>1){ myVal=oSel.value; oSel.length = 1; }
for(var l in oSet)
{ if( (l==myVal) || !(l in oExept) ) add_option(oSet[l],oSel);
} oSel.value=myVal;
}
function knockOut(formChild) // to trim the each <select> option list
{ /*var selOpt=collect(formChild.form);
var selAll = formChild.form.getElementsByTagName('select');
var selNew = selAll[selAll.length-1];
if(formChild.nodeName=='SELECT') selNew = formChild;
for(i=0;i<selAll.length;i++) fill_sell(selAll[i], oOpts, collect(selAll[i].form)); */
}
function collect(frm) // to create an object from all used values
{ var selVar = {};
var selAll = frm.getElementsByTagName('select');
for(var k=0;k < selAll.length ;k++)
{ if(selAll[k].length>1 && (selAll[k].value in oOpts)) selVar[selAll[k].value]=selAll[k].selectedIndex;
} return selVar;
}
/**********************************************************************/
function add(oRow)
{ oRow.parentNode.replaceChild(oRow.cloneNode(true ),oRow.parentNode.insertRow(oRow.rowIndex+1));
var inpR = oRow.getElementsByTagName('input');
var inpN = oRow.nextSibling.getElementsByTagName('input');
var selR = oRow.getElementsByTagName('select')[0];
selR.disabled=true;
var selN = oRow.nextSibling.getElementsByTagName('select')[0];
// selN.length = 1;
for(i=0;i<inpR.length;i++)
{ if(inpR[i].disabled)inpR[i].disabled=false;
if(inpR[i].type=='text'){inpR[i].disabled=true;inpN[i].value=''};
if(inpR[i].value=='add'){inpR[i].value='ed';inpN[i].disabled=true};
} sumus();knockOut(selN);
}
function ed(oBut)
{ var nextSel = oBut.parentNode.parentNode.nextSibling.firstChild.firstChild;
var trow = oBut.parentNode.parentNode;
var inpR = trow.getElementsByTagName('input');
var selR = trow.getElementsByTagName('select')[0];
var addrow = trow.parentNode.childNodes[trow.parentNode.lastChild.rowIndex-1]
var addeds = d.getElementsByName('added');
for(i=0;i<inpR.length;i++)
{ if(oBut.value=='ed' && inpR[i].type=='text'){inpR[i].disabled=false;selR.disabled=false;}
if(oBut.value=='lock' && inpR[i].type=='text'){inpR[i].disabled=true; selR.disabled=true;}
}
if(oBut.value=='ed')
{ oBut.value='lock'
for(i=0;i<addeds.length;i++)
{ addeds[i].disabled=true;
} oBut.disabled=false;
addrow.childNodes[0].firstChild.disabled=true;
addrow.childNodes[1].firstChild.disabled=true;
addrow.childNodes[2].firstChild.disabled=true;
} else // oBut.value is not 'lock'
{ oBut.value='ed'
for(i=0;i<addeds.length;i++)
{ addeds[i].disabled=false;
} emptyStr(addeds[i-1].parentNode.parentNode)
addrow.childNodes[0].firstChild.disabled=false;
addrow.childNodes[1].firstChild.disabled=false;
addrow.childNodes[2].firstChild.disabled=false;
} knockOut(nextSel);
//alert(nextSel);
}
function send(oForm)
{ var inpF = oForm.getElementsByTagName('input');
for(i=0;i<inpF.length;i++)
{ inpF[i].disabled=false;
} oForm.submit();
} function check(strt){ return (/^\d*\.?\d*/.exec(strt)==strt)?strt:check(strt.slice(0,(strt.length-1))) }
function emptyStr(oRow)
{ var oInpS =oRow.getElementsByTagName('input');var sum1=0,sum2=0;
oInpS[0].value=check(oInpS[0].value); oInpS[1].value=check(oInpS[1].value);
if( oInpS[0].value && !(oInpS[1].value) || oInpS[1].value && !(oInpS[0].value))
oInpS[2].disabled=false;
else oInpS[2].disabled=true;
sumus();
}
function sumus()
{ var sum1=0,sum2=0;
var Col1InpS = d.getElementsByName('row[credit][]');
var Col2InpS = d.getElementsByName('row[debet][]');
for(i=0;i<Col1InpS.length;i++)
{ sum1+=1*Col1InpS[i].value;sum2+=1*Col2InpS[i].value;
} d.getElementById('s1').innerHTML=sum1;d.getElementById('s2').innerHTML=sum2;
}
</script>
</HEAD>
<table align="center" style="border-collapse: collapse;" id="tblSample" width="95%" bgcolor="#f9f9f9" border="1" bordercolor="#cccccc" cellpadding="3" cellspacing="0" id="testtable">
<tr><td align="center"><select name="row[brand][]" onChange="knockOut(this)"><option value="" disabled="true">Choose one
</option></td>
<td align="center"><input type="text" name="row[credit][]" onKeyUp=" emptyStr(this.parentNode.parentNode)" onBlur="emptyStr(this.parentNode.parentNode)" ></td>
<td align="center"><input type="text" name="row[debet][]" onKeyUp="this.value=check(this.value); emptyStr(this.parentNode.parentNode)" onBlur="emptyStr(this.parentNode.parentNode)"></td>
<td align="center"><input type="button" name="added" value="add" onClick="(this.value=='add')?add( this.parentNode.parentNode ):ed(this) " disabled="true"><input type="button" value="del" onClick="var nextSel = this.parentNode.parentNode.nextSibling.firstChild.firstChild; ed(this); this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex ); sumus(); knockOut(nextSel);" disabled="true"></td></tr>
<tr>
<td>Total</td>
<td id="s1"></td>
<td id="s2"></td>
<td></td>
</tr></tbody></table>
<br><input type="button" value="send" onClick="send(this.form)">
<script>fill_sell(d.getElementsByTagName('select')[0],oOpts)</script>
</form><br>
<?php echo '<pre>';print_r($_POST["row"]);print_r($wor);?>
</BODY>
</HTML>Sir i dont knw what is happening... again the code creating problem in Firefox...!!!! :( :(
But i will not loose the hope..!! :)
Hi,
I hope your code needs a minor repair only:
- somehow disappeared the <BODY> & <FORM ..> headings <BODY><form method="post" action="[I]./ThePage.php[/I]"> where ./ThePage.php should be overwritten with correct destination page name;
- the send() function was not extended:
function send(oForm)
{ var inpF = oForm.getElementsByTagName('input');
for(i=0;i<inpF.length;i++) { inpF[i].disabled=false; }
var inpF = oForm.getElementsByTagName('select');
for(i=0;i<inpF.length;i++) { inpF[i].disabled=false; }
oForm.submit();
}- a cosmetic cleaning could be:
var selN = oRow.nextSibling.getElementsByTagName('select')[0];
selN.selectedIndex=0;in add(oRow)
- the <TABLE> ... </TABLE> definitely MUST be unformated in the code -> written as one single row, because, each [formating | invisible] character as spaces, tabs, and end of line can brake the structure of the DOM (Document Object Model) inserting the unwanted #text elements, hence the relative reference of the type: oElement.parentNode.nextSibling.firstChild reffers to the invisible character instead of the next <INPUT> box.
It is highly recommended to use frequently in FireFox the Error console (or whatever it has English name) and the DOM Inspector (available as free FF plugin). Lot of people use the FireBug plugin for direct debugging of the JavaScript code.
The database exploit seems to be well coded I hope it makes no problems.
I must again admit, that the styled document looks much better than the 'technical' skeleton only :-)
Hi,
I hope your code needs a minor repair only:
- somehow disappeared the <BODY> & <FORM ..> headings<BODY><form method="post" action="[I]./ThePage.php[/I]">where ./ThePage.php should be overwritten with correct destination page name;
- the send() function was not extended:function send(oForm) { var inpF = oForm.getElementsByTagName('input'); for(i=0;i<inpF.length;i++) { inpF[i].disabled=false; } var inpF = oForm.getElementsByTagName('select'); for(i=0;i<inpF.length;i++) { inpF[i].disabled=false; } oForm.submit(); }- a cosmetic cleaning could be:
var selN = oRow.nextSibling.getElementsByTagName('select')[0]; selN.selectedIndex=0;in add(oRow)
- the
<TABLE> ... </TABLE>definitely MUST be unformated in the code -> written as one single row, because, each [formating | invisible] character as spaces, tabs, and end of line can brake the structure of the DOM (Document Object Model) inserting the unwanted #text elements, hence the relative reference of the type:oElement.parentNode.nextSibling.firstChildreffers to the invisible character instead of the next <INPUT> box.It is highly recommended to use frequently in FireFox the Error console (or whatever it has English name) and the DOM Inspector (available as free FF plugin). Lot of people use the FireBug plugin for direct debugging of the JavaScript code.
The database exploit seems to be well coded I hope it makes no problems.
I must again admit, that the styled document looks much better than the 'technical' skeleton only :-)
Okay Sir.. may be thats why when i tried to insert my Html code in it.. its shows error..in Firefox... and yes i use firebug... its a great tool..
i want that if u didnt select any option from dropdown..u cant add row..!!! where should i made change..!!
even i change the value of add and del button... to Add items and Delete items... function shows error..!!!! :(
Sir have to notice that... if u fill values and dont add row.. still your values got passed to next page...!! think to solve this instead of onkeyup..i should use Onclick function to update the total... total got update only when user click the add button..and same in case of edit and lock button...!!!
One more important thing i want to ask... Does it effect the Dom structure when i create new table over your's table(ur code)...
or intserting the rows of your's table into another table....??? does functionality got effected by it..????
Sir can u provide some Good tutorials to understand DOM structure more clearly...!!
Thank u..!! :)
As I am leaving home for some days:
- the total is processed by the sumus() fc. Pick the function call to this fc. out of the fc. emptyStr(oRow), and and do not forget to append it into ed(oBut)
- in fc. emptyStr(oRow), collect the 'select' element in the same way as the 'input' elements are collected, and add the condition oSelS[0].value != "" into the if(...) statement
- the table core (from <tbody> ... </tbody>) can be moved anywhere in the document and styled as is possible with CSS, you must only keep it compact in ought the realtive refferences remain in force
there may be even more copy of this table in the document but you must decide, if you want to submit values from all tables or one only, to include all tabs in one single <FORM> or each tab in its own <FORM>
- while changing the value of the button, you must change the all the apperance of the value use, because some times the code tests the values, the most clever is put in the head of scripts the var addButtValue='Add an Item', edButtValue='Edit this Row', ... etc and then be able to change values globaly
Try to catch the program structure by identifying the modules and drawing the 'flow chart' and then you can experiment w. modifying the modules and changing the relation between them. While making the changes in some function, make a copy and change its name somewhat, and you can quickly see the result with clear way to return back to original state :-)
The code must be yours, I gave you the suggestion only :-) hence I left in my suggestion the disabled attribute even I admit that the use of readonly attr. is better, you are free to change it on your purposes :-)
As I am leaving home for some days:
- the total is processed by the sumus() fc. Pick the function call to this fc. out of the fc. emptyStr(oRow), and and do not forget to append it into ed(oBut)
- in fc. emptyStr(oRow), collect the 'select' element in the same way as the 'input' elements are collected, and add the condition oSelS[0].value != "" into the if(...) statement
- the table core (from <tbody> ... </tbody>) can be moved anywhere in the document and styled as is possible with CSS, you must only keep it compact in ought the realtive refferences remain in force
there may be even more copy of this table in the document but you must decide, if you want to submit values from all tables or one only, to include all tabs in one single <FORM> or each tab in its own <FORM>
- while changing the value of the button, you must change the all the apperance of the value use, because some times the code tests the values, the most clever is put in the head of scripts the var addButtValue='Add an Item', edButtValue='Edit this Row', ... etc and then be able to change values globalyTry to catch the program structure by identifying the modules and drawing the 'flow chart' and then you can experiment w. modifying the modules and changing the relation between them. While making the changes in some function, make a copy and change its name somewhat, and you can quickly see the result with clear way to return back to original state :-)
The code must be yours, I gave you the suggestion only :-) hence I left in my suggestion the disabled attribute even I admit that the use of readonly attr. is better, you are free to change it on your purposes :-)
Great Sir.. Code is working perfectly and fine in IE and Firefox..!!!
Earlier i tried to add new row in beginning for column headers.. and thts creating problem.. i think that interrupting the DOM structure..!!
So i create separate table headers in seprate table..!!
I found DOM.. little Complex but really interesting...!!
Now i m trying when user fills value in one textbox,the other textbox got disable...!! instead of add button... how is the Idea..?
and on edit only that textbox enable which contains Value and dropdown...!!!
I wish i can also play with DOM like You..! lolzz :D
hi i also face this problem 1year back bcz i too developed accts package, it was in jsp,javascript iam sending the code plz check
save the below code in .jsp file and run u will get Ans: before that plz go through the code once and follow the comments....all the best
even if u save with .html also it's work but before that have to delete some lines.. if u have any queries ask bcz i know..i face so much prblm with that
/* For getting data from db
<% ArrayList catgid=new ArrayList();
ArrayList catgname=new ArrayList();
rs=st.executeQuery("select MA_code,MA_name from MA_MAST");
while(rs.next()){
maid.add(rs.getString(1));
maname.add(rs.getString(2));
}
rs=null;
%>
*/
<html>
<head>
<script>
///////////////////////////////ADD ROW/////////////
//addrow
function insRow(TDid,TRid)
{
//alert("in ins row");
selTD = document.getElementById(TDid);
selTR = document.getElementById(TRid);
intRowSpan = selTD.getAttribute("rowSpan");
intRowIndex = selTR.getAttribute("rowIndex");
intInsPos = intRowSpan + intRowIndex ;
var oTR = document.all.TABLE1.insertRow(intInsPos);
var RowId =intInsPos;
//var s=RowId-1;
s=intRowSpan
var oC1TD = oTR.insertCell(0);
oC1TD.innerHTML = "<input type=text readonly class=text_box2 size=4 name=slno"+s+" value="+s+">";
var oC2TD = oTR.insertCell(1);
oC2TD.innerHTML = "<input type=text readonly class=text_box2 size=4 name=mainac"+s+" value="+s+">";
//the below two rows r replace for above 2 rows, if u want to get a/c from db use the below on, before this u have to get data from jsp i will put that in top in comments see that
//var oC2TD = oTR.insertCell(1);
//oC2TD.innerHTML = "<select name=lstCatgId"+s+" tabindex=9 onclick=total() onchange=showCatg(this.value,"+s+")><option selected>---Category---</option> <%for(int p=0;p!=catgid.size();p++){%><option value=<%=catgid.get(p)%>><%=catgname.get(p)%></option><%}%></select>";
var oC3TD = oTR.insertCell(2);
oC3TD.innerHTML = "<input type=text name=subac"+s+" id=subac"+s+" readonly class=textbox_hide style=text-align:right size=8 value=0>";
var oC4TD = oTR.insertCell(3);
oC4TD.innerHTML = "<input type=text class=text_box2 size=8 onkeyup=total() id=billdt"+s+" tabindex=10 name=txtPaidFCT"+s+">";
var oC5TD = oTR.insertCell(4);
oC5TD.innerHTML = "<input type=text class=textbox_hide size=11 style=text-align:right value=0 readonly id=prtclrs"+s+" name=prtclrs"+s+">";//value="+sno+"
var oC6TD = oTR.insertCell(5);
oC6TD.innerHTML = "<input type=text class=text_box2 size=11 onkeyup=totalBon() tabindex=11 name=txtTotAmt"+s+" >";
var oC7TD = oTR.insertCell(6);
oC7TD.innerHTML = "<input type=text class=textbox_hide size=10 readonly style=text-align:right value=0 id=flag"+s+" name=flag"+s+" >";
var oC8TD = oTR.insertCell(7);
oC8TD.innerHTML = "<input type=text name=etc1"+s+" />"
//"<input type=text class=text_box2 name=lstPrgName"+s+" >";
var oC9TD = oTR.insertCell(8);
oC9TD.innerHTML = "<input type=text class=text_box2 name=etc2"+s+" onkeyup=sponcerCheck() tabindex=13><input type=button onclick=delRow1("+s+") value=X >";
/*var oC10TD = oTR.insertCell(9);
oC10TD.innerHTML = "<input type=hidden readonly class=text_box2 size=5 name=txtCatgId"+s+">";
*/
document.getElementById("htncount").value = RowId;
document.getElementById("count").value = RowId;
selTD.setAttribute("rowSpan",selTD.getAttribute("rowSpan")+1);
}
//////////////////////////////////////////////////
function delRow1(s){
var x=intRowSpan-s;
n=s+1;
for(i=1;i<=x;i++){
var j=n-1;
document.getElementById("slno"+j).value=j;
document.getElementById("mainac"+j).value=document.getElementById("mainac"+n).value;
document.getElementById("subac"+j).value=document.getElementById("subac"+n).value;
document.getElementById("billdt"+j).value=document.getElementById("billdt"+n).value;
document.getElementById("prtclrs"+j).value=document.getElementById("prtclrs"+n).value;
document.getElementById("txtTotAmt"+j).value=document.getElementById("txtTotAmt"+n).value;
document.getElementById("flag"+j).value=document.getElementById("flag"+n).value;
document.getElementById("etc1"+j).value=document.getElementById("etc1"+n).value;
document.getElementById("etc2"+j).value=document.getElementById("etc2"+n).value;
n++;
}
document.all.TABLE1.deleteRow(intInsPos);
intInsPos=intInsPos-1;
intRowSpan=intRowSpan-1;
document.form.action=total();
document.form.htncount.value=intInsPos;
document.form.count.value=intInsPos;
}
function AddRow()
{
var rowcount=document.form.count.value
//alert(rowcount)
if(rowcount!=1)
{
//validations here
var flg=0
if(flg==0){
document.form.action="javascript:insRow('mondayTD','mondayTR')"
document.form.submit()
}//if(flg
}//if
else{
document.form.action="javascript:insRow('mondayTD','mondayTR')"
document.form.submit()
}
}//addrow
function save(){
var rowcount=document.form.count.value
//again validations here
var temp=intInsPos-1
if(rowcount!=1)
{
var Row=intInsPos-1;
/*compare main a/c name for no one is same */
var temp=intInsPos-1
var flg=0
if(temp>=2)
{
//again validation here
if(flg==0){
document.form.action="Proposal_RO_insert.jsp"
document.form.submit()
}//if-flg
}//main if
else
{
alert("Plz click on ADDRow Button")
}//else
return true;
}//save()
</script>
</head>
<body>
<form name="form">
<table width="100%" id="TABLE1" cellspacing="1">
<thead>
<tr class="tdbg1">
<td width="1%"></td>
<th width="6%" class="TH1">S.No.</th>
<th width="9%" class="TH1">Head of A/c</th>
<th width="8%" class="TH1">Sub A/c</th>
<th width="9%" class="TH1">Paid Bill Date</th>
<th width="8%" class="TH1">Particulars</th>
<th width="12%" class="TH1">Amount</th>
<th width="10%" class="TH1">Flag</th>
<th width="17%" class="TH1">etc.,</th>
<th width="20%" class="TH1">etc.,</th>
</tr>
</thead>
<tr id="mondayTR" >
<td id="MondayTD"></td>
</tr>
</table>
<input type="button" value="Submit" onclick="save()"/>
<input name="hidden" type="hidden" id="htnDcode" runat="server" />
<input type="hidden" runat="server" id="htncount" name="htncount1" />
<input type="hidden" runat="server" id="htncount" name="count" value="1" />
<input type=hidden runat=server id=htnt name="str" >
</form>
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.