0

Estoy terminando un simulador de inversión en donde el usuario elige el monto, se calcula el porcentaje según la cantidad de meses y después si lo desea, puede enviar esos datos por email.

El problema que tengo es que estoy tratando de usar el evento event.preventDefault() para evitar que la pagina se recargue.

Ejemplo:

document.getElementByName("add").addEventListener("click", 

function actualizarValor() {
  // codigo
  campo_resultado.value = suma_actual;

event.preventDefault()
});

y quitar esta linea: echo "Gracias.<br>Un representante se pondr&aacute; en contato con usted. <a href=''>Cargar simulador</a>"; de PHP.

Uno de los errores que daba era que document.getElementByName("add") no estaba declarado y el formulario dejaba de funcionar. Perdón, pero no se como solucionarlo. Gracias!

Dejo el script completo

function actualizarValor() {
  var campo_resultado = document.getElementById('txtValor');
  var valor = parseInt(document.getElementsByName('valorBase')[0].value);
  var suma_actual = valor;
  var radio = document.querySelector('input[name="mes"]:checked');
  if(radio) {
      var porcentaje = radio.value;
      suma_actual += valor * parseInt(porcentaje) / 100;
  }
  campo_resultado.value = suma_actual;
} //terminar y subir a github
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6 p-5 rounded-lg shadow bg-gr">
<?php
if (!isset($_POST["add"])){
?>
<form action="" method="post">
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" name="valorBase" onkeyup="actualizarValor();" class="form-control" id="inputValor" placeholder="Ingres&aacute; tu inversi&oacute;n">
</div>
</div>


<div class="form-group">
<h5>Meses</h5>
<div class="btn-group btn-group-toggle" data-toggle="buttons">

<label class="btn btn-secondary">
<input type="radio" name="mes" value="12" onclick="actualizarValor();" id="option1"> 3
</label>
<label class="btn btn-secondary">
<input type="radio" name="mes" value="16" onclick="actualizarValor();" id="option2"> 6
</label>
<label class="btn btn-secondary">
<input type="radio" name="mes" value="20" onclick="actualizarValor();" id="option3"> 12
</label>
<label class="btn btn-secondary">
<input type="radio" name="mes" value="24" onclick="actualizarValor();" id="option4"> 18
</label>
<label class="btn btn-secondary">
<input type="radio" name="mes" value="28" onclick="actualizarValor();" id="option5"> 24
</label>
</div>

</div>

<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" name="total" readonly id="txtValor" value="" aria-describedby="addon-wrapping" class="form-control">
</div>
</div>

<hr>

<p>Envianos cuanto queres envertir!</p>

<div class="form-group">
<input type="email" name="from" class="form-control" aria-describedby="emailHelp" placeholder="Email">
</div>

<div class="form-group">
<input type="text" name="subject" class="form-control" placeholder="Nombre">
</div>

<input type="submit" name="add" class="btn btn-primary btn-sm" value="Solicit&aacute; tu inversión">
<input type="reset" class="btn btn-light btn-sm" value="Reset">

</form>

<?php
} else {

if (isset($_POST["from"])){
    
 $from = $_POST["from"];
 $subject = $_POST["subject"];
 $message = 'Estoy interesado en invertir $'.$_POST["valorBase"].' al '.$_POST["mes"].'%. '. 'Total $'.$_POST["total"];
    
 mail("[email protected]", $subject, $message, "From: $from");
 echo "Gracias.<br>Un representante se pondr&aacute; en contato con usted. <a href=''>Cargar simulador</a>";
}
}
?>
</div>

2 respuestas 2

1

¿Puedes probar con esto y decirme si funciona?

document.getElementByName("add").addEventListener("click",function(event) {
  event.preventDefault();
  // codigo
  campo_resultado.value = suma_actual;
});
3
  • Gracias Axel. Al final no lo van a usar y tuve que seguir con otro trabajos. De igual manera cuando termine lo retomo para que al menos quede bien.
    – user101604
    el 7 abr. 2020 a las 1:51
  • @STN cuando lo retomes, no olvides comprobar qué solución te funcionó y compartirla con la comunidad o marcar como aceptada la respuesta que te sirvió. Un saludo.
    – Alvaro Montoro
    el 7 abr. 2020 a las 14:25
  • Dale, gracias Álvaro!
    – user101604
    el 8 abr. 2020 a las 16:45
1

En tu formulario tiene tu boton enviar

Puedes cambiar el type="button"

1
  • Gracias Franco. Como dije anteriormente, no lo van a usar y lo voy a seguir mas adelante.
    – user101604
    el 7 abr. 2020 a las 1:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.