Web Wiz - Green Windows Web Hosting

  New Posts New Posts RSS Feed - Javascript and ASP Forms
  FAQ FAQ  Forum Search   Events   Register Register  Login Login

Javascript and ASP Forms

 Post Reply Post Reply Page  12>
Author
Brolin99 View Drop Down
Groupie
Groupie
Avatar

Joined: 03 May 2003
Location: New Zealand
Status: Offline
Points: 58
Post Options Post Options   Thanks (0) Thanks(0)   Quote Brolin99 Quote  Post ReplyReply Direct Link To This Post Topic: Javascript and ASP Forms
    Posted: 04 January 2007 at 2:26am

Hi there,

I am writing some software at the moment that allows people to create invoices.

What I need to be able to do is start with a blank invoice, and then be able to click on a button that says "Add new line" and have one magically appear using Javascript.  The real tricky part though, is that I need to be able to add 2 different types of lines (depending on what the user choses) - so effectively each one will spit out different HTML than the other.

I then need to be able to track the line number so that I can record the number of lines into a database on the form submission page.

I have tried to modify this code here, but can't get it to work. Can anyone help (Javascript is not my speciality)!

Thanks

Back to Top
bootcom View Drop Down
Senior Member
Senior Member
Avatar

Joined: 26 February 2005
Location: United Kingdom
Status: Offline
Points: 259
Post Options Post Options   Thanks (0) Thanks(0)   Quote bootcom Quote  Post ReplyReply Direct Link To This Post Posted: 04 January 2007 at 8:56pm
Ok here's some code to show you the easiest way to insert rows / cells to a table. As you can see you can add rows to the top and bottom of the table as you require. To have 2 different lines ... create a second function
 
<html>
<head>
<script>
function addRow1(){
 
// Put in a row at the end of the table
var r = document.getElementById("someID").insertRow();
 
// Heres how you would do it if you wanted it as the first row
// var r = document.getElementById("someID").insertRow(0);
 
// Set the id field to the row number this is in the table
r.setAttribute("id", document.getElementById('someID').rows.length)
 
//Error checking - making sure that the id is set as you want it call an alert - alert(r.id)
 
// insert cells to the rows
var c1 = r.insertCell(0)
var c2 = r.insertCell(1)
 
// set HTML to the cells
c1.innerHTML = "Hey"
c2.innerHTML = "There"
}
</script>
</head>
<body>
 
<!-- Click the link to insert the row -->
<a href="javascript:addRow1()">Add</a>
 
<table id="someID">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>
</body>
</html>
 
Take a look at http://www.mredkj.com/tutorials/tablebasics1.html if you need to remove the lines.
Back to Top
Brolin99 View Drop Down
Groupie
Groupie
Avatar

Joined: 03 May 2003
Location: New Zealand
Status: Offline
Points: 58
Post Options Post Options   Thanks (0) Thanks(0)   Quote Brolin99 Quote  Post ReplyReply Direct Link To This Post Posted: 05 January 2007 at 12:17am
That's awesome - thanks Bootcom - works like a charm :)
 
One other q - my boss has now asked me to get it do auto totalling on the boxes (i.e. multiply quantity by price) - I can get this to work on a manual table but not when using this routine - any ideas?
 
Thanks!
Back to Top
bootcom View Drop Down
Senior Member
Senior Member
Avatar

Joined: 26 February 2005
Location: United Kingdom
Status: Offline
Points: 259
Post Options Post Options   Thanks (0) Thanks(0)   Quote bootcom Quote  Post ReplyReply Direct Link To This Post Posted: 05 January 2007 at 7:45pm
Sure ... ok we're going to have to work things a little different then ... If like my previous example you're using tables to show all of the data, what we'll need to do is a short recode ...
 
The code now adds the row as before (even though I added a couple of additional cells) , but this time I left a  row at the bottom free which holds the values of the 3rd and 4th columns. Is that what you were looking for ?? 
 
<html>
<head>
<script>

function addRow1(){
var cost
var payment = 0
var t = document.getElementById("someID")
var trows = t.rows
var r = document.getElementById("someID").insertRow(trows.length - 1);
var c1 = r.insertCell(0)
var c2 = r.insertCell(1)
var c3 = r.insertCell(2)
var c4 = r.insertCell(3)
c1.innerHTML = "Random " + trows.length
c2.innerHTML = "Service"
c3.innerHTML = "12"
c4.innerHTML = "0"
var cost = 0
// Set the row attribute
r.setAttribute("id", document.getElementById('someID').rows.length)
    var count=0;
    for (i=1; i < trows.length -1; i++) {
        for (j=0; j < trows(i).cells.length; j++) {
             
     }
cost += parseInt(trows(i).cells(2).innerText)
            payment += parseInt(trows(i).cells(3).innerText)
    }
trows(trows.length - 1).cells(1).innerHTML = "£" + cost
trows(trows.length - 1).cells(2).innerHTML = "£" + payment
}
</script>
</head>
<body>
<a href="javascript:addRow1()">Add</a>
<table id="someID">
  <tr>
    <th>Name</th>
    <th>Payment Type</th>
    <th>Cost 1</th>
    <th>Payment 1</th>
  </tr>
  <tr>
    <td>BootCom</td>
    <td>Works Completed</td>
    <td>0</td>
    <td>200</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td>0</td>
    <td>200</td>
  </tr>
 
</table>
</body>
</html>
Back to Top
bootcom View Drop Down
Senior Member
Senior Member
Avatar

Joined: 26 February 2005
Location: United Kingdom
Status: Offline
Points: 259
Post Options Post Options   Thanks (0) Thanks(0)   Quote bootcom Quote  Post ReplyReply Direct Link To This Post Posted: 05 January 2007 at 7:55pm
I also have a bit of code that shows how to save from the javascript table to a form submission. Let me know if this is of interest.
Back to Top
theSCIENTIST View Drop Down
Senior Member
Senior Member


Joined: 31 July 2003
Location: United Kingdom
Status: Offline
Points: 440
Post Options Post Options   Thanks (0) Thanks(0)   Quote theSCIENTIST Quote  Post ReplyReply Direct Link To This Post Posted: 07 January 2007 at 4:41pm
Another way is to have the full form build and hide some rows with CSS (visibility: hidden;) then have Javascript to change the visibility of those rows if the user clicks it.
Back to Top
Brolin99 View Drop Down
Groupie
Groupie
Avatar

Joined: 03 May 2003
Location: New Zealand
Status: Offline
Points: 58
Post Options Post Options   Thanks (0) Thanks(0)   Quote Brolin99 Quote  Post ReplyReply Direct Link To This Post Posted: 08 January 2007 at 8:24am
Thanks guys - that's a big help.
 
Bootcom - that would be awesome if you could send that other code through.
 
Thanks again!
Back to Top
Brolin99 View Drop Down
Groupie
Groupie
Avatar

Joined: 03 May 2003
Location: New Zealand
Status: Offline
Points: 58
Post Options Post Options   Thanks (0) Thanks(0)   Quote Brolin99 Quote  Post ReplyReply Direct Link To This Post Posted: 08 January 2007 at 8:42am
Hi guys,
 
Now my boss has come back to me and asked for a couple of changes, but to be honest I really don't know how to do it.
 
He wants to be able to add a new line as per the ocde above, but he wants it to be boxes that are part of a blank form (that part is easy enough), but then he wants you to be able to enter a quantity, and price per unit. He then wants the line to total itself (i.e. 4 items @ $10 each = $40) and then have a grand total at the bottom.
 
Is that overly difficult? I don't know exactly what's involved but if it's too major then don't fret over it.
 
Thanks again!
Back to Top
 Post Reply Post Reply Page  12>

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.08
Copyright ©2001-2026 Web Wiz Ltd.


Become a Fan on Facebook Follow us on X Connect with us on LinkedIn Web Wiz Blogs
About Web Wiz | Contact Web Wiz | Terms & Conditions | Cookies | Privacy Notice

Web Wiz is the trading name of Web Wiz Ltd. Company registration No. 05977755. Registered in England and Wales.
Registered office: Web Wiz Ltd, Unit 18, The Glenmore Centre, Fancy Road, Poole, Dorset, BH12 4FB, UK.

Prices exclude VAT at 20% unless otherwise stated. VAT No. GB988999105 - $, € prices shown as a guideline only.

Copyright ©2001-2026 Web Wiz Ltd. All rights reserved.