PDA

View Full Version : How can I update a form in real-time?



rumblestrut
01-31-2007, 10:18 PM
I'm making a survey where every question has a numeric value assigned to it, and as the user clicks on a checkmark button to approve (or uncheck to disapprove) the values add or subtract to give a total at the bottom of the page.

Basically, it's a spreadsheet but with fixed values for each row instead of being able to type them in.

I can do this easily with php, but only if the user clicks the submit button. I was hoping to find a way to do this real-time.

I'm not looking for someone to do this for me, but can someone point me in the right direction of a tutorial or something that is similar so I can build this into my program?

Thanks.

RS

rumblestrut
01-31-2007, 10:34 PM
Nice!

Thanks, I'll give that a try. I was actually using radio buttons to start off with anyway, so perhaps I'm moving in the right direction.

RS

Kor
02-01-2007, 09:33 AM
Could be something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script type="text/javascript">
function calculate(){
var allinp=document.getElementById('myForm').getElementsByTagName('input');
var tot=0, i=0, c
while(c=allinp[i++]){
c.type=='checkbox'&&c.checked?tot+=Number(c.value):null;
document.getElementById('total').value=tot;
}
}
onload=function(){
var allinp=document.getElementById('myForm').getElementsByTagName('input');
var i=0, c
while(c=allinp[i++]){
c.type=='checkbox'?c.onclick=function(){calculate()}:null;
}
}
</script>
</head>
<body>
<form id="myForm">
<input type="checkbox" value="10">10
<br>
<input type="checkbox" value="50">50
<br>
<input type="checkbox" value="100">100
<br>
<br>
TOTAL: <input type="text" readonly="readonly" id="total">
</form>
</body>
</html>

rumblestrut
02-01-2007, 03:03 PM
That's almost perfect, thanks! One question, how can I get the total to format with commas? I'm actually using some pretty big numbers, up to 10 million.

Kor
02-02-2007, 09:42 AM
Yes, that is easy, on using Regular Expressions:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script type="text/javascript">
function calculate(){
var allinp=document.getElementById('myForm').getElementsByTagName('input');
var tot=0, i=0, c
while(c=allinp[i++]){
c.type=='checkbox'&&c.checked?tot+=Number(c.value):null;
}
tot=tot.toString()
var re=/(-?\d+)(\d{3})/;
while(re.test(tot)){
tot=tot.replace(re,'$1,$2')
}
document.getElementById('total').value=tot;
}
onload=function(){
var allinp=document.getElementById('myForm').getElementsByTagName('input');
var i=0, c
while(c=allinp[i++]){
c.type=='checkbox'?c.onclick=function(){calculate()}:null;
}
}
</script>
</head>
<body>
<form id="myForm">
<input type="checkbox" value="10000000">10000000
<br>
<input type="checkbox" value="500000">500000
<br>
<input type="checkbox" value="700000000">700000000
<br>
<br>
TOTAL: <input type="text" readonly="readonly" id="total">
</form>
</body>
</html>

rumblestrut
02-02-2007, 12:21 PM
Kor, you are amazing.

Easy maybe ... if you're familiar enough. Regular expressions give me heartburn.

You've encouraged me to dive into JavaScript much more. Thanks so much!