Actualizar Variables sin Recargar

[KalSmith]

Estimados, junto con saludar, quisiera consultar (quizás algo muy básico para ustedes) pero para mi que me estoy iniciando en javascript es que quiero hacer lo siguiente

Que al cambiar los números se imprima el valor de la operacion (multiplicar) pero sin tener que recargar la pagina

Tengo el siguiente código

Código HTML:

<form name="calc">
<?php for($i=0;$i<count($var);$i++){ ?>
<input type="text" name="operando1" value="variable numerica">
<?php 
}
?>


<select name="operando2">
    <?php for($a=1;$a<=100;$a++){?>
	<option value="<?php echo $a ?>"><?php echo $a ?> </option>
	<?php
	}
	?>
</select>

</form>

<script>
var num1 = document.calc.operando1.value
var num2 = document.calc.operando2.value
document.write(num2);
document.write("<br>");
document.write(num1*num2);
</script>

La idea que cuando uno cambie el valor de select se imprima en algún lado de nun2 (resultado de select) y resultado de num1*num2 sin presionar o recargar la pagina.

Gracias por su ayuda que me ha servido bastante para aprende

[chulifo]

Iniciado por KalSmith

Estimados, junto con saludar, quisiera consultar (quizás algo muy básico para ustedes) pero para mi que me estoy iniciando en javascript es que quiero hacer lo siguiente

Que al cambiar los números se imprima el valor de la operacion (multiplicar) pero sin tener que recargar la pagina

Tengo el siguiente código

Código HTML:

<form name="calc">
<input type="text" name="operando1" value="variable numerica">
<?php 
}
?>


<select name="operando2">
    <?php for($a=1;$a<=100;$a++){?>
	<option value="<?php echo $a ?>"><?php echo $a ?> </option>
	<?php
	}
	?>
</select>

</form>

<script>
var num1 = document.calc.operando1.value
var num2 = document.calc.operando2.value
document.write(num2);
document.write("<br>");
document.write(num1*num2);
</script>

La idea que cuando uno cambie el valor de select se imprima en algún lado de nun2 (resultado de select) y resultado de num1*num2 sin presionar o recargar la pagina.

Gracias por su ayuda que me ha servido bastante para aprende

Dentro de todo lo que entendi, creo que esto te sirve.

Código Javascript:

<form name="calc">
  <?php for($i=0;$i<count($var);$i++){ ?>
    <input type="text" name="operando1" value="variable numerica">
 
    <select name="operando1" onchange="alert((this.value*document.getElementById('operador2').value))" id="operador1">
      <option value="1">1 </option>
      <option value="2">2</option>
      <option value="4">4</option>
    </select>
      <select name="operando2" onchange="alert((this.value*document.getElementById('operador1').value))" id="operador2"> 
      <option value="1">1 </option>
      <option value="2">2</option>
      <option value="4">4</option>
    </select>
    <script>
    </script>
</form>
 

[IsaBelM]

prueba con esto

function multiplicar(op2) {
console.log('valor operando2 ' + op2)
Array.prototype.map.call(document.querySelectorAll ('input[name="operando1"]'), function(op1) {

console.log(op1.value * op2);
})
}


<form name="calc">
<input type="text" name="operando1" value="2">
<input type="text" name="operando1" value="4">
<input type="text" name="operando1" value="6">
<select name="operando2" onchange="multiplicar(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>

[KalSmith]

Lo que quiero hacer es multiplicar dos valores, uno fijo (que puede estar en un input que no se pueda modificar, y multiplicarlo por el valor que entregue el select, y al momento de modificar el select (el cual es dado por un ciclo for de php) en un 3° campo se imprima el total de la multiplicación, pero sin actualizar la pagina

Lo se hacer en php (recargando paguina ya que el codigo lo hace el servidor) , pero javascript me estoy iniciando y quiero dar la carga al cliente.

[Alexis88]

Veo que generas count($var) cajas de texto, entonces, si luego dices que quieres multiplicar dos valores, el que se seleccione del combo y el de una caja de texto, ¿el valor de cuál de todas las cajas de texto se tendría que tomar?

Y solo suponiendo que fuera una caja de texto y la multiplicación debiera de ejecutarse al seleccionar un valor del combo, solo tendrías que tener el algoritmo de la multiplicación en una función que sería invocada cuando ocurra el evento change en el combo (cambio de valor). Utilizando el método .addEventListener() para registrar el evento en el combo, la función sería la llamada de retorno:

Código Javascript:

document.querySelector("[name=operando2]").addEventListener("change", function (){
    var a = document.querySelector("[name=operando1]").value, b = this.value;
    document.querySelector("#id del campo de salida").value = a * b;
}, false);
 

Un saludo

[IsaBelM]

Eso no es lo que imprime tú php. Aún así, el código sigue siendo válido

function multiplicar(op2) {
console.log('valor operando2 ' + op2)
console.log(document.querySelector ('input[name="operando1"]') * op2);
}

[KalSmith]

Lo mejor que me ha resultado es esto

Código HTML:

<!DOCTYPE html>
<html>
<body>

<select id="mySelect2" onchange="myFunction()">
<script>
var i=0
for (i=0;i<=10;i++){
 document.write("<option>" + i)
}
</script>


</select>



<input type="text" id="mySelect" onchange="myFunction()" value="8990">









El total es <p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    var y = document.getElementById("mySelect2").value;
    var z = 0;
    document.getElementById("demo").innerHTML =  x*y;
    console.log(z);
  
  
}
</script>

El problema es que al iniciar script no aparece ningun resultado y deberia iniciar en 1, el problema es que al iniciar en 1 tampoco muestra resultado :S

[peperafa]

Hola hermano, yo lo haría de esta manera aunque también ocupo JQuery, el chiste de lograr lo que quieres es poner tu código en los eventos correspondientes y con eso funcionará.

Archivo index.php

<!DOCTYPE html>
<html>
<head>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
if ( typeof XMLHttpRequest == "undefined" )
XMLHttpRequest = function(){return new ActiveXObject(navigator.userAgent.indexOf("MSIE 5") >= 0 ?"Microsoft.XMLHTTP" : "Msxml2.XMLHTTP2");};
var ajax=new XMLHttpRequest();
function miFuncion2(){
var x = document.getElementById("mySelect").value;
var y = document.getElementById("mySelect2").value;
ajax.open("POST","funcionXY.php",true);
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
var respuesta=ajax.responseText;
document.getElementById('demo').innerHTML=respuest a;
}
}
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("x="+x+"&y="+y);
}

$(document).ready(function(){
$('#mySelect2 > option[value="1"]').attr('selected', 'selected');
miFuncion2();
});

</script>

</head>

<select id="mySelect2" onchange="miFuncion2()">
<script>
var i=0
for (i=0;i<=10;i++){
document.write("<option value='"+i+"'>" + i)
}
</script>


</select>



<input type="text" id="mySelect" onchange="miFuncion2()" value="8990">


El total es <div id="demo"></div>
</body>


Archivo funcionXY.php

<?php
$y = $_POST['y'];
$x =$_POST['x'];

function insertar($x, $y) {
$z=$y*$x;
return $z;
}
echo "<p>".insertar($x, $y)."</p>";
?>

Yo uso 2 archivos uno para mi funcion y otro el index, es costumbre poner mis funciones por separado mi código funciona incluso en internet explorer, el código que colocaste anteriormente no. Éxitos sigue adelante.