Hola foreros, resulta que hace un tiempo vengo queriendo hacer algo como en
este sitio. En donde por un lado te dan la posibilidad de elegir la cantidad de páginas y el tiempo de entrega y por otro en un div aparte presentan el precio que es resultado de la suma de opciones elegidas por el usuario.
Bien, de tanta prueba y error llegué a esto:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>formulario dinamico</title>
<style type="text/css">
body{font-family:Arial; font-size:18px;}
#content{overflow:hidden;}
#uno{width:40%; padding:10px; float:left; background-color:#eaeaea;}
#dos{width:40%; padding:10px; float:left; background-color:#ccc;}
.radio:hover{cursor:pointer;}
</style>
<script type="text/javascript">
function cambiaNroPags (elem) { // ingresa el nuevo valor
var elemento = document.getElementById('paginas');
elemento.value= elem;// aca elemento es el text y elem el radio. el input text toma el valor del imput radio
}
function cambiaNroDias (elem) {
var elemento = document.getElementById('dias');
elemento.value= elem;
}
</script>
</head>
<body>
<div ="content">
<div id="uno">
<form id="formulario" action="trabajo.php" method="post">
<p>¿Cuantas páginas?</p>
<input name="paginas" id="paginas" type="text" value="1"/>
<input id="radiop1" type="radio" name="nroPag" value="1" class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop1').value)"/>
<input id="radiop2" type="radio" name="nroPag" value="2" class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop2').value)"/>
<input id="radiop3" type="radio" name="nroPag" value="3" class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop3').value)"/>
<p>¿Cuantos días?</p>
<input name="dias" id="dias" type="text" value="3" />
<input id="radiod1" type="radio" name="nroDia" value="1" class="radio" onclick="javacript:cambiaNroDias(document.getElementById('radiod1').value)"/>
<input id="radiod2" type="radio" name="nroDia" value="2" class="radio" onclick="javacript:cambiaNroDias(document.getElementById('radiod2').value)"/>
<input id="radiod3" type="radio" name="nroDia" value="3" class="radio" onclick="javacript:cambiaNroDias(document.getElementById('radiod3').value)"/>
</form>
</div>
<div id="dos">
<p>en este div va la suma <br> <a href="http://w3-markup.com/order#details" target="_blanck">aquí</a> el sitio que intento imitar</p>
</div>
</div>
</body>
</html>
un enlace para que vean la práctica funcionando.
Bien, al grano:
¿Como puedo hacer que, por ejemplo, el radiobutton al que di un value="1" luego tome digamos un valor de 150, logrando que este valor me quede disponible para, luego, junto a los demás valores (de los demás radiobutton) poder hacer la suma y presentar la misma en el div de la derecha?
Espero me entiendan
sino me explico nuevamente.
Cualquier pista me biene bien ya que por más manuales y tutoriales que leo, por ser nuevo solo consigo meter teoría en mi cabeza y me falta práctica con js, lo que me interesa muchísimo adquirir.
Un saludo!