...

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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum