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á 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á tu inversió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á 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á en contato con usted. <a href=''>Cargar simulador</a>";
}
}
?>
</div>