Form Data Help

[David]

Hi,

I have a MAINFORM with a pop-up form link and a textfield

The POPUPFORM displays 3 columns

(1) Description : (2) £Charge : (3) Checkbox

Each charge will be different for the various descriptions.
A user needs to be able to select from 1 or more checkboxes then press
submit.
When the form is submitted, the form/page is closed and the charges
for each item selected are totalled and dumped into a textfield on the
MAINFORM.

I have the Mainform and the Popupform, but do not know how to take all
the selected values (from column 'x' , total them and put the total in
the textfield on the Mainform ?

I would appreciate any help you could offer

Thanks

David

 

[ASM]

David a écrit :

Hi,

I have a MAINFORM with a pop-up form link and a textfield

The POPUPFORM displays 3 columns

what do you mean by columns ? are they cells of a table ?

(1) Description : (2) £Charge : (3) Checkbox

Each charge will be different for the various descriptions.
A user needs to be able to select from 1 or more checkboxes then press
submit.
When the form is submitted, the form/page is closed and the charges
for each item selected are totalled and dumped into a textfield on the
MAINFORM.

I have the Mainform and the Popupform, but do not know how to take all
the selected values (from column 'x' , total them and put the total in
the textfield on the Mainform ?

I would appreciate any help you could offer

In your popup :

<script type="text/javascript">

function add() {
var t = document.getElementById('myTable');
t = t.getElementsByTagName('TBODY')[0];
t = t.rows;
var val = '', total = 0;
for(var i=1;i<t.length-1; i++) {
var c = t.getElementsByTagName('INPUT')[0];
var r = t.cells;
if(c.checked) {
val += r[0].innerHTML+' : '+
r[1].innerHTML.replace('£','')+'\n';
total += r[1].innerHTML.replace('£','')*1;
}
}
val += '-----------------------------\n'+
'TOTAL = '+total;
t[t.length-1].cells[1].innerHTML = total;
}
function valid() {
add();
opener.forms[0].myTextArea.value = val;
self.close();
}
function init() {
var t = document.getElementById('myTable');
t = t.getElementsByTagName('TBODY')[0];
t = t.rows;
for(var i=1;i<t.length-1; i++) {
var r = t.getElementsByTagName('INPUT');
r[0].onclick = function() { add(); }
}
}
window.onload = init;
</script>

<form action="" onsubmit="valid()">
<table id="myTable" border=1 celsspacing=2 width=70%>
<tr><th>Description</th><th>Charge</th><th>Checkbox</tr>
<tr><td>Item 1</td><td>£1.25</td><td><input type=checkbox></td></td>
<tr><td>Item 2</td><td>£2.25</td><td><input type=checkbox></td></td>
<tr><td>Item 3</td><td>£3.05</td><td><input type=checkbox></td></td>
<tr><td>Item 4</td><td>£10.25</td><td><input type=checkbox></td></td>
<tr><th colspan=2>Total = </th><th></th></tr>
</table>
<input type=submit value="OK">
</form>

 

[David]

Stephane,

Many thanks for your promp help.
The checkboxes were just created in a simple html table.
The pop up works well, but the form does not close and the total value
is not passed back to my mainform ?
I do not require the '£' passed back, just the total sum, of which the
individual costs will always be whole numbers, i.e 10, 15, 25 etc
What do I need to do to get this working correctly

Many thanks

David

 

[ASM]

David a écrit :

Stephane,

Many thanks for your promp help.
The checkboxes were just created in a simple html table.

The table must be in a form for better compatibility.

The JS with function init() gives to all checboxes an onclick event to
get immediately the new total when check/uncheck one of them.

The pop up works well, but the form does not close and the total value
is not passed back to my mainform ?

there was an error :-(
opener.document.forms[0].myTextArea.value = ...
---------^^^^^^^^^

Where is your mainform ?
has it a name ?
what is the name of your textarea ?

How do you open the popup ?

I do not require the '£' passed back, just the total sum, of which the
individual costs will always be whole numbers, i.e 10, 15, 25 etc
What do I need to do to get this working correctly

with the function add() as is, it would be OK
with/without '£' and with/without non decimal numbers


main file :
===========
<html>
<form name="myForm">
<textarea name="myTextArea" rows=10 cols=60></textarea>
</form>
<a href="#" onclick="window.open('tabauto.htm','','width=500,height=500');
return false;">open the popup</a>
</html>

popup file 'tabauto.htm' :
==========================
<html>
<script type="text/javascript">

function add() {
var t = document.getElementById('myTable');
t = t.getElementsByTagName('TBODY')[0];
t = t.rows;
var val = '';
var total = 0;
for(var i=1;i<t.length-1; i++) {
var c = t.getElementsByTagName('INPUT')[0];
var r = t.cells;
if(c.checked) {
val += r[0].innerHTML+' : '+
r[1].innerHTML.replace('£','')+'\n';
total += r[1].innerHTML.replace('£','')*1;
}
}
val += '-----------------------------\n'+
'TOTAL = '+total;
t[t.length-1].cells[1].innerHTML = total;
return val;
}
function valid() {
opener.document.myForm.myTextArea.value = add();
self.close();
}
function init() {
var t = document.getElementById('myTable');
t = t.getElementsByTagName('TBODY')[0];
t = t.rows;
for(var i=1;i<t.length-1; i++) {
var r = t.getElementsByTagName('INPUT');
r[0].onclick = function() { add(); }
}
}
window.onload = init;
</script>

<form action="" onsubmit="valid()">
<table id="myTable" border=1 celsspacing=2 width=70%>
<tr><th>Description</th><th>Charge</th><th>?</th></tr>
<tr><td>Item 1</td><td>10</td><td><input type=checkbox></td></td>
<tr><td>Item 2</td><td>12</td><td><input type=checkbox></td></td>
<tr><td>Item 3</td><td>20</td><td><input type=checkbox></td></td>
<tr><td>Item 4</td><td>50</td><td><input type=checkbox></td></td>
<tr><th colspan=2>Total = </th><th></th></tr>
</table>
<input type=submit value="OK">
</form>
</html>

 

[David]

Stephane,

I have tried your fixed code, but to no avail.
If I set my Textfield to the function = add(); I get the following
loaded into my textfield on the original mainform: Item 1 : 10
It only loads 1 selection, always the first, even when multiple items
are selected. It does not calculate any total when loading the
tetxfield. If I change = = add(); to = "test string"; then 'test
string' gets loaded into my textfield. I cannot find any variable or
function that holds the calculated total to return that value to my
textfield ?

I have just tried your code in IE rather than Firefox and found the
following data was loaded:
Item 1 : 10Item 2 : 12-----------------------------TOTAL = 22

I will now try and get this to work so that only the total '22' is
sent back.

So, is there a way to make this code work in FF ?

Thanks David

David a écrit :

Stephane,

Many thanks for your promp help.
The checkboxes were just created in a simple html table.

The table must be in a form for better compatibility.

The JS with function init() gives to all checboxes an onclick event to
get immediately the new total when check/uncheck one of them.

The pop up works well, but the form does not close and the total value
is not passed back to my mainform ?

there was an error :-(
opener.document.forms[0].myTextArea.value = ...
---------^^^^^^^^^

Where is your mainform ?
has it a name ?
what is the name of your textarea ?

How do you open the popup ?

I do not require the '£' passed back, just the total sum, of which the
individual costs will always be whole numbers, i.e 10, 15, 25 etc
What do I need to do to get this working correctly

with the function add() as is, it would be OK
with/without '£' and with/without non decimal numbers

main file :
===========
<html>
<form name="myForm">
<textarea name="myTextArea" rows=10 cols=60></textarea>
</form>
<a href="#" onclick="window.open('tabauto.htm','','width=500,height=500');
return false;">open the popup</a>
</html>

popup file 'tabauto.htm' :
==========================
<html>
<script type="text/javascript">

function add() {
var t = document.getElementById('myTable');
t = t.getElementsByTagName('TBODY')[0];
t = t.rows;
var val = '';
var total = 0;
for(var i=1;i<t.length-1; i++) {
var c = t.getElementsByTagName('INPUT')[0];
var r = t.cells;
if(c.checked) {
val += r[0].innerHTML+' : '+
r[1].innerHTML.replace('£','')+'\n';
total += r[1].innerHTML.replace('£','')*1;
}
}
val += '-----------------------------\n'+
'TOTAL = '+total;
t[t.length-1].cells[1].innerHTML = total;
return val;}

function valid() {
opener.document.myForm.myTextArea.value = add();
self.close();}

function init() {
var t = document.getElementById('myTable');
t = t.getElementsByTagName('TBODY')[0];
t = t.rows;
for(var i=1;i<t.length-1; i++) {
var r = t.getElementsByTagName('INPUT');
r[0].onclick = function() { add(); }
}}

window.onload = init;
</script>

<form action="" onsubmit="valid()">
<table id="myTable" border=1 celsspacing=2 width=70%>
<tr><th>Description</th><th>Charge</th><th>?</th></tr>
<tr><td>Item 1</td><td>10</td><td><input type=checkbox></td></td>
<tr><td>Item 2</td><td>12</td><td><input type=checkbox></td></td>
<tr><td>Item 3</td><td>20</td><td><input type=checkbox></td></td>
<tr><td>Item 4</td><td>50</td><td><input type=checkbox></td></td>
<tr><th colspan=2>Total = </th><th></th></tr>
</table>
<input type=submit value="OK">
</form>
</html>