For learning purposes, I have written a very small; web,
php & mysql based, Accounts Payable Voucher Entry page. The page has two parts.
1. Voucher Header Information
2. Accounting Distribution Lines (1 to n rows)
With the Accounting Distribution lines, I have added buttons to add a new row ("+") and to delete a row ("-"). It works when I do not have the <form> tag. When I add the <form> tag, my "+" button triggers the "action" property.
To add a row or delete a row, I have used javascript and jquery-1.2.1.
js.
When the <form> tag is present, the following code always adds or deletes a row:
echo "<input type='button' value='del' class='delrow' id='delrow' width='65' image='images/btnDel20.gif'>";
echo "<input type='button' value='add' class='addrow' id='addrow' width='65' image='images/btnAdd20.gif'/>"
but the standard button is really
ugly.
I designed my own image button, and uses this code:
echo " <input type='image' border='0' class='delrow' id='delrow' width='20' height='20' src='images/btnDelRow.png'> ";
echo " <input type='image' border='0' class='addrow' id='addrow' width='20' height='20' src='images/btnAddRow.png'> ";
This code only works with
without the <form> tag. When I add a <form> tag, it triggers adds a row and then perform the "action" event.
<form action="vchrAddReg3.
php">.
I did a screen capture video (6MB) and posted it on
www.rapidshare.com.
It shows the image buttons not working and the standard buttons working. The <form> tag is present. Here is the link:
http://rapidshare.com/files/10800727...-FormError.avi
Here are three screen shots showing how the buttons look and work:
Initial display:
Add 3 rows:
Delete rows 2 & 3:
Question:
Is there a way to jazz up the standard button using this code?
echo "<input type='button' value='del' class='delrow' id='delrow'>";
echo "<input type='button' value='add' class='addrow' id='addrow'/>"
OR...
Is there a way to make this code Not trigger the <form action="vchrAddReg3.php"> using this code?
echo "<input type='button' value='del' class='delrow' id='delrow'>";
echo "<input type='button' value='add' class='addrow' id='addrow'/>";
Thank you very much for any input on how to jazz up the standard button or how to not trigger <form action="vchrAddReg3.php">!!!
Code Follows (two php programs)
vchrAddReg3.php
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<link href="images/ss.css" rel="stylesheet" type="text/css" />
<link href="images/ss.css1" rel="stylesheet" type="text/css" />
<link href="images/ss.css2" rel="stylesheet" type="text/css" />
div {
display:inline;
white-space:nowrap;
}
.page
{
width: 675px
}
div {
display:inline;
white-space:nowrap;
}
.table-borderz {
border-right-width: 2px;
border-left-width: 2px;
border-bottom-width: 2px;
border-top-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-right-color: #D0B759;
border-left-color: #D0B759;
border-bottom-color: #D0B759;
border-top-color:#D0B759;
}
.blue-borderz {
background-color: white;
border-color: #CDD7DC;
border-style:solid;
border-width:2px;
}
</style>
<script type="text/javascript" src="./includes/jquery-1.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cursorval = 1;
$("#main input.delrow:first").css({display: "none"});
$("#addrow").click(function() {
$.get("./newrow.php",{ cursor: cursorval }, function(data) {
$("#main").append(data);
});
cursorval += 1;
$(document).ajaxSuccess(function(){
$("#main input.delrow:first").css({display: "inline"});
$("#addrow").appendTo("#main div:last");
$("#main input.delrow").bind("click", function() {
if($("#main input.delrow").length == 1) {
$("#main input.delrow:first").css({display: "none"});
}
if($("#main input.delrow").index($(this)[0]) != ($("#main input.delrow").length-1)) {
$(this).parents("tr").remove();
}
else {
$("#addrow").appendTo($("#main div").get(($("div").length)-2));
$("#main input.delrow:last").parents("tr").remove();
}
});
});
});
});
</script>
</head>
<body>
<form action="vchrAddReg3.php"<?='?pass_var=$vndrNo|$fir stPass'?>" method="post" name="vchrAddReg3" id="vchrAddReg3">
<table id="main" width="700" height="75" border="6px" bordercolor="#D0B759" cellpadding="4" cellspacing="0" class="table-borderz">
<thead>
<tr align="left" bgcolor="#D0B759" bordercolor="#D0B759" height="25" halign="center" valign="middle" >
<th class="blck13b" colspan="7">Distribution Lines:</th>
</tr>
<tr align="left" class="blck13b" bgcolor="#CDD7DC" bordercolor="#CDD7DC" height="25" cellspacing="0" valign="middle">
<th width="46" >Line</th>
<th width="88">Bus Unit</th>
<th width="92">Account</th>
<th width="91">Project</th>
<th width="88">Task</th>
<th width="91">Amount</th>
<th width="130"> </th>
</tr>
</thead>
<?php
echo "<tbody>";
echo "<tr>";
echo "<td width='46'>1</td>";
echo "<td width='88' align='left'><input name='bu1' type='text' size='5' class='blue-borderz'/>$bu1</td>";
echo "<td width='92' align='left'><input name='acct1' type='text' size='7' class='blue-borderz'/>$acct1</td>";
echo "<td width='91' align='left'><input name='proj1' type='text' size='7' class='blue-borderz'/>$proj</td>";
echo "<td width='88' align='left'><input name='task1' type='text' size='7' class='blue-borderz'/>$task1</td>";
echo "<td width='91' align='left'><input name='amt1' type='text' size='8' class='blue-borderz'/>$amt2</td>";
echo "<td width='130'><div>";
//echo " <input type='image' border='0' class='delrow' id='delrow' width='20' height='20' src='images/btnDel-1.png'> ";
//echo " <input type='image' border='0' class='addrow' id='addrow' width='20' height='20' src='images/btnAdd-1.png'> ";
echo "<input type='button' value='del' class='delrow' id='delrow' width='65' image='images/btnDel20.gif'>";
echo "<input type='button' value='add' class='addrow' id='addrow' width='65' image='images/btnAdd20.gif'/></div>";
echo "</td></tr>";
echo "</tbody>";
?>
</table>
</form>
</body>
</html>
newrow.php
<?php
$cursor = $_GET['cursor'] + 1;
echo "<tr>";
echo "<td width='46' size='5' >$cursor</td>";
echo "<td width='88'><input name='javascript:bu{$cursor}' type='text' size='5' class='blue-borderz'/></td>";
echo "<td width='92'><input name='acct{$cursor}' type='text' size='7' class='blue-borderz'/></td>";
echo "<td width='91'><input name='proj{$cursor}' type='text' size='7' class='blue-borderz'/></td>";
echo "<td width='88'><input name='task{$cursor}' type='text' size='7' class='blue-borderz'/></td>";
echo "<td width='91'><input name='amt{$cursor}' type='text' size='8' class='blue-borderz'/></td>";
echo "<td size='130'><div>";
echo " <input type='image' border='0' class='delrow' id='delrow' width='20' height='20' src='images/btnDel.png'> ";
//echo "<input type='button' value='del' class='delrow' width='65'/>";
echo "</div>";
echo "</td></tr>";
?>