Encuesta en java script

diego007007 · #1 (**permalink**) 08/06/2011, 19:24

Hola Amigos, tengo un formulario escrita en html y javascript, lo que hace es dependiendo de la opción que escojamos va sumando una cantidad de dinero (es para calcular costos), trabaja bien pero quiero hacer que en lugar que me muestre todas las preguntas de una sola en la pagina, me muestre pregunta por pregunta, mi codigo es el siguiente

Código HTML:

<html> 
<head> 
<title> 
</title> 
<script language=javascript>
var a = 0;
   function sum(){  
    var b = document.frm.text1.value;
    var c = document.frm.text2.value;
    var d = document.frm.text3.value; 
    a = a + (b * 0.035); 
    a = a + (c * 0.3); 
    a = a + (d * 6); 
    
    if (document.frm.chk1.checked){  
     a = a + 3;  
    } 

    if (document.frm.chk2.checked){  
     a = a + 5;  
    }
    
    if (document.frm.chk3.checked){  
     a = a + 16;  
    }

    if (document.frm.chk4.checked){  
     a = a + 17;  
    }

    if (document.frm.chk5.checked){  
     a = a + 35;  
    }

    if (document.frm.chk6.checked){  
     a = a + 40;  
    }

    if (document.frm.chk7.checked){  
     a = a + 40;  
    } 
    
    if (document.frm.chk8.checked){  
     a = a + 40;  
    } 

    if (document.frm.chk9.checked){  
     a = a + 40;  
    } 

    if (document.frm.chk10.checked){  
     a = a + 150;  
    } 
    
    if (document.frm.chk11.checked){  
     a = a + 150;  
    } 

    if (document.frm.chk12.checked){  
     a = a + 150;  
    } 

    if (document.frm.chk13.checked){  
     a = a + 150;  
    }

    if (document.frm.chk14.checked){  
     a = a + 100;  
    }

    if (document.frm.chk15.checked){  
     a = a + 100;  
    }

    if (document.frm.chk16.checked){  
     a = a + 100;  
    }

    if (document.frm.chk17.checked){  
     a = a + 100;  
    }

    if (document.frm.chk18.checked){  
     a = a + 51;  
    }

    if (document.frm.chk19.checked){  
     a = a + 41;  
    }

    if (document.frm.chk20.checked){  
     a = a + 65;  
    }

    if (document.frm.chk21.checked){  
     a = a + 500;  
    }

    if (document.frm.chk22.checked){  
     a = a + 20;  
    }

    if (document.frm.chk23.checked){  
     a = a + 30;  
    }

    if (document.frm.chk24.checked){  
     a = a + 15;  
    }

    if (document.frm.chk25.checked){  
     a = a + 10;  
    }
   }
</script>

</head> 
<form name="frm">
	<font face="arial,verdana"> 
	<table border="0">
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>What kind of CC do you have?</b> 
			</div>
		</td></tr>
		<tr><td>
			<input type="checkbox" name="chk1">US Visa/MasterdCard Classic<br>
		</td><td>
			<input type="checkbox" name="chk2">UK Visa/MasterdCard Classic<br>
		</td></tr>
		<tr><td>
			<input type="checkbox" name="chk3">EU Visa/MasterdCard Classic<br>
		</td><td>
			<input type="checkbox" name="chk4">LATAM Visa/MasterdCard Classic<br>
		</td></tr>
		<tr><td>
			<input type="checkbox" name="chk5">US American Express<br>
		</td><td>
			<input type="checkbox" name="chk6">US Visa Gold/Signature<br>
		</td></tr>
		<tr><td>
			<input type="checkbox" name="chk7">US Visa Platinum/Signature<br>
		</td><td>
			<input type="checkbox" name="chk8">US Visa Corporate/Signature<br>
		</td></tr>
		<tr><td>
			<input type="checkbox" name="chk9">US Visa Business/Signature<br>
		</td><td>
			<input type="checkbox" name="chk10">EU Visa Gold/Signature<br>
		</td></tr>
		<tr><td>
			<input type="checkbox" name="chk11">EU Visa Platinum/Signature<br>
		</td><td>
			<input type="checkbox" name="chk12">EU Visa Corporate/Signature<br>
		</td></tr>
		<tr><td>
			<input type="checkbox" name="chk13">EU Visa Business/Signature<br>
		</td><td>
			<input type="checkbox" name="chk14">Other country Visa Gold/Signature<br>
		</td></tr>
		<tr><td>
			<input type="checkbox" name="chk15">Other country Visa Platinum/Signature<br>
		</td><td>
			<input type="checkbox" name="chk16">Other country Visa Corporate/Signature<br>
		</td></tr>
		<tr><td>
			<input type="checkbox" name="chk17">Other country Visa  Business/Signature<br>
 		</td></tr>
		<tr></tr>
		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>What is your bank account balance in USD?</b><br>
			</div>
			$<input type="text" name="text1" size=10 value="0"><br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>What is your domain name email provider?</b><br>
			</div>
			<input type="checkbox" name="chk18">any .com<br>
			<input type="checkbox" name="chk19">any .ru<br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2"> 
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have a Facebook account?</b><br>
			</div>
			<input type="checkbox" name="chk20">Yes
			<input type="checkbox">No<br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have a Twitter account and you have a high number of followers?</b><br>
			</div>
			<input type="checkbox" name="chk21">Yes
			<input type="checkbox">No<br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have a paid rapidshare service?</b><br>
			</div>
			<input type="checkbox" name="chk22">Yes
			<input type="checkbox">No<br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have a paid Skype account? What's your current balance in USD?</b><br>
			</div>
			$<input type="text" name="text2" size=10 value="0"><br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2"> 
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have an ICQ number with 7 or less digits?</b><br>
			</div>
			<input type="checkbox" name="chk23">Yes
			<input type="checkbox">No<br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>How many PCs do you have with a broadband Internet connection?</b><br>
			</div>
			N:<input type="text" name="text3" size=10 value="0"><br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have an account on PayPal or eBay online payment system?</b><br>
			</div>
			<input type="checkbox" name="chk24">Yes
			<input type="checkbox">No<br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have an IM account? (MSN Messenger, YM, etc.)?</b><br>
			</div>
			<input type="checkbox" name="chk25">Yes
			<input type="checkbox">No<br>
		<tr><td colspan="2" align="right">
			<br><b><font color="#8B0000">Total:</font></b>
     			$<input type="text" name="text4" size=30><br> 
		</td></tr>
		<tr></tr>
		<tr><td colspan="2">
			<input type="button" value="Total" onClick="sum(); document.frm.text4.value = a"> 
			<input type="reset" value="Reset" onClick="sum(); a = 0">
			<br><br><br>
    		</td></tr>
	</font>
	</table>
</form> 
</body> 
</html>

Alguien que me muestre un ejemplo o una pequeña parte de como hacerlo con mi código (no se mucho de ajax, si me sujieren eso, podrian mostrarme una pequeña muestra usando mi codigo). De antemano muchas gracias

America|UNK · #2 (**permalink**) 09/06/2011, 02:42

Código HTML:

<html> 
<head> 
<title> 
</title> 
<script language="javascript">
function unoPorUno(){
	var f = document.frm;
	var b = f.getElementsByTagName('b'), i;
	var trs = new Array();
	var index = 0;
	function inicio(){
		trs[index].style.display = 'table-row';
		var n = document.getElementById('next');
		
			n.onclick = function(){
				if(index+1 < trs.length){
					trs[index].style.display = 'none';
					index++;
					inicio();
				}
			};
	}
	for(i=0; i<b.length; i++){
		var tr = b[i].parentNode.parentNode.parentNode;
		if(tr.tagName == 'TR'){
			tr.style.display = 'none';
			trs.push(tr);
		}
	}
	f.reset.onclick = function(){
		trs[index].style.display = 'none';
		index = 0;
		inicio()
	};
	inicio();

}
var a = 0;
function sum(){  
	var f = document.frm;
    var b = parseInt(f.text1.value);
    var c = parseInt(f.text2.value);
    var d = parseInt(f.text3.value); 
    a = a + (b * 0.035); 
    a = a + (c * 0.3); 
    a = a + (d * 6); 
	
	var cheks = [3,5,16,17,35,40,40,40,40,150,150,150,150,100,100,100,100,51,41,65,500,20,30,15,10], i;
	
	for(i=0;i<cheks.length;i++){
		var key = i+1;
		if(f['chk'+key].checked)	a += cheks[i];
	}
}
</script>

</head> 
<form name="frm">
	<font face="arial,verdana"> 
	<table border="0">
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>What kind of CC do you have?</b> 
			</div>
			<table>
					<tr><td>
					<input type="checkbox" name="chk1">US Visa/MasterdCard Classic<br>
				</td><td>
					<input type="checkbox" name="chk2">UK Visa/MasterdCard Classic<br>
				</td></tr>
				<tr><td>
					<input type="checkbox" name="chk3">EU Visa/MasterdCard Classic<br>
				</td><td>
					<input type="checkbox" name="chk4">LATAM Visa/MasterdCard Classic<br>
				</td></tr>
				<tr><td>
					<input type="checkbox" name="chk5">US American Express<br>
				</td><td>
					<input type="checkbox" name="chk6">US Visa Gold/Signature<br>
				</td></tr>
				<tr><td>
					<input type="checkbox" name="chk7">US Visa Platinum/Signature<br>
				</td><td>
					<input type="checkbox" name="chk8">US Visa Corporate/Signature<br>
				</td></tr>
				<tr><td>
					<input type="checkbox" name="chk9">US Visa Business/Signature<br>
				</td><td>
					<input type="checkbox" name="chk10">EU Visa Gold/Signature<br>
				</td></tr>
				<tr><td>
					<input type="checkbox" name="chk11">EU Visa Platinum/Signature<br>
				</td><td>
					<input type="checkbox" name="chk12">EU Visa Corporate/Signature<br>
				</td></tr>
				<tr><td>
					<input type="checkbox" name="chk13">EU Visa Business/Signature<br>
				</td><td>
					<input type="checkbox" name="chk14">Other country Visa Gold/Signature<br>
				</td></tr>
				<tr><td>
					<input type="checkbox" name="chk15">Other country Visa Platinum/Signature<br>
				</td><td>
					<input type="checkbox" name="chk16">Other country Visa Corporate/Signature<br>
				</td></tr>
				<tr><td>
					<input type="checkbox" name="chk17">Other country Visa  Business/Signature<br>
				</td></tr>
			</table>
		</td></tr>
		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>What is your bank account balance in USD?</b><br>
			</div>
			$<input type="text" name="text1" size=10 value="0"><br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>What is your domain name email provider?</b><br>
			</div>
			<input type="checkbox" name="chk18">any .com<br>
			<input type="checkbox" name="chk19">any .ru<br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2"> 
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have a Facebook account?</b><br>
			</div>
			<input type="checkbox" name="chk20">Yes
			<input type="checkbox">No<br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have a Twitter account and you have a high number of followers?</b><br>
			</div>
			<input type="checkbox" name="chk21">Yes
			<input type="checkbox">No<br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have a paid rapidshare service?</b><br>
			</div>
			<input type="checkbox" name="chk22">Yes
			<input type="checkbox">No<br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have a paid Skype account? What's your current balance in USD?</b><br>
			</div>
			$<input type="text" name="text2" size=10 value="0"><br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2"> 
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have an ICQ number with 7 or less digits?</b><br>
			</div>
			<input type="checkbox" name="chk23">Yes
			<input type="checkbox">No<br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>How many PCs do you have with a broadband Internet connection?</b><br>
			</div>
			N:<input type="text" name="text3" size=10 value="0"><br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have an account on PayPal or eBay online payment system?</b><br>
			</div>
			<input type="checkbox" name="chk24">Yes
			<input type="checkbox">No<br>
		</td></tr>
		<tr></tr>
    		<tr><td colspan="2">
			<div id=general style="position:relative; top:0; left:20;"> 
			<img src="flecha.gif">
			<b>Do you have an IM account? (MSN Messenger, YM, etc.)?</b><br>
			</div>
			<input type="checkbox" name="chk25">Yes
			<input type="checkbox">No<br>
		<tr><td colspan="2" align="right">
		<p id="next" style="text-align:left">Siguiente</p>
			<br><b><font color="#8B0000">Total:</font></b>
     			$<input type="text" name="text4" size=30><br> 
		</td></tr>
		<tr></tr>
		<tr><td colspan="2">
			<input type="button" value="Total" onClick="sum(); document.frm.text4.value = a"> 
			<input type="reset" value="Reset" name="reset" onClick="sum(); a = 0">
			<br><br><br>
    		</td></tr>
	</font>
	</table>
</form>
<script>
	unoPorUno()
</script>
</body> 
</html>

Me tome un tiempo ahora que estoy libre, si tienes algunas dudas, pregúntame.

diego007007 · #3 (**permalink**) 09/06/2011, 18:15

Hola America|UNK, gracias por tu ayuda, el codigo trabaja muy bien

Salu2