Classic ASP Discussion - Javascript and ASP Forms

Javascript and ASP Forms

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: Classic ASP Discussion
Forum Description: Discussion on Active Server Pages (Classic ASP).
URL: https://forums.webwiz.net/forum_posts.asp?TID=22332
Printed Date: 29 March 2026 at 7:39pm
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com

Topic: Javascript and ASP Forms

Posted By: Brolin99
Subject: Javascript and ASP Forms
Date 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 http://javascript.internet.com/forms/adding-html-controls.html - code here , but can't get it to work. Can anyone help (Javascript is not my speciality)!

Thanks

Replies:

Posted By: bootcom
Date 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>

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>

<tr>

</tr>

</table>

</body>

</html>

Take a look at http://www.mredkj.com/tutorials/tablebasics1.html - http://www.mredkj.com/tutorials/tablebasics1.html if you need to remove the lines.

Posted By: Brolin99
Date 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!

Posted By: bootcom
Date 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>

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>

<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>

</tr>

</table>

</body>

</html>

Posted By: bootcom
Date 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.

Posted By: theSCIENTIST
Date 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.

-------------
:: http://www.mylittlehost.com/ - www.mylittlehost.com

Posted By: Brolin99
Date 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!

Posted By: Brolin99
Date 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!

Posted By: bootcom
Date Posted: 08 January 2007 at 6:33pm

Brolin99, the last code snippet that I gave you unfortunately doesn't work in firefox so I'm going to have to do some additional work on the code and test it in IE 7, Firefox, Opera. I will also endevour to do the last bit that you added and show you how to get all this information into an ASP script. That may take a day or two to get this lot on though so don't worry I'm on it

Posted By: Brolin99
Date Posted: 09 January 2007 at 3:25am

Thanks Bootcom - you're a legend!

Posted By: bootcom
Date Posted: 10 January 2007 at 8:05pm

Just to give a quick update so you don't think i've forgotten about you

I've now sorted the code out for the totalling up of the numbers as you wanted. I'm just sorting out the commenting and the final form submission and will have this available to you tomorrow (hopefully).

Posted By: bootcom
Date Posted: 11 January 2007 at 6:48pm

Ok heres the first page ....

function addRow1(){

var t = document.getElementById("someID")

var r = document.getElementById("someID").insertRow(t.rows.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 " + t.rows.length
c2.innerHTML = "Service"
c3.innerHTML = 12 + t.rows.length
c4.innerHTML = "0"

var cost = 0
var payment = 0

// Set the row attribute
r.setAttribute("id", document.getElementById('someID').rows.length)
var count=0;

for (i=1; i < t.rows.length -1; i++) {

        for (j=0; j < t.rows.cells.length; j++) {

     }
cost += parseInt(t.rows.cells[2].innerHTML)
payment += parseInt(t.rows.cells[3].innerHTML)
    }

t.rows[t.rows.length - 1].cells[1].innerHTML = "�" + cost
t.rows[t.rows.length - 1].cells[2].innerHTML = "�" + payment
}

function completeMe(){
// Im completing the script with HTML entries into the table

var t = document.getElementById("someID")

var cost = ""
var payment = ""

for (i=1; i < t.rows.length -1; i++) {

        for (j=0; j < t.rows.cells.length; j++) {

     }
if(i > 1){
cost += "+"
payment += "+"
}
cost += parseInt(t.rows.cells[2].innerHTML)
payment += parseInt( t.rows.cells[3].innerHTML)
    }

document.addForm.cost.value = cost
document.addForm.reciept.value = payment
document.addForm.submit()
}

</script>
</head>
<body>
<a href="javascript:addRow1()">Add</a>

<form name="addForm" method="post" action="save.asp">

<input type = "hidden" name = "cost">
<input type = "hidden" name = "reciept">

<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"> </td>
    <td>0</td>
    <td>200</td>
</tr>

</table>

</form>

<a href="javascript:completeMe()">Finish</a>

</body>
</html>

As you can probabaly see this page is up for lots of editing, just to make it do exactly what you want it to do. Use prompts to fill in the table values or use inputs.

Page 2 - Bung it all in a db / show it to user ... whatever you want it to do

<%
Dim input1
Dim input2

Dim intArrayLoop

input1 = split(request.form("cost"), "+")
input2 = split(request.form("reciept"), "+")

' Test to see if the js worked.

For intArrayLoop = 0 to uBound(input1)
response.write(intArrayLoop & " " & input1(intArrayLoop) & "<br />")
response.write(intArrayLoop & " " & input2(intArrayLoop) & "<br />")
Next
%>

There you go. Im now going to use this code to do something similar on my site. Happy coding