I'm trying to show the results of the submit button on the same page. I tried with several codes from here (specially this: Display result in the same page with PHP) but it didn't work.
This is how my html page looks like now:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".mybutton").click(function() {
$.ajax({
type: "post",
url: "https://catadordealfajores.com/wp-content/uploads/2020/calc.php",
data: $("form").serialize(),
success: function(result) {
$(".myresult").html(result);
}
});
});
});
</script>
</head>
<body>
<form>
<input type="radio" name="causa" value="si">
<label for="male">Sí</label><br>
<input type="radio" name="causa" value="No">
<label for="female">No</label><br>
<h3>¿Cuántos años trabajaste?</h3>
<input type="text" name="anios">
<br>
</form>
<button class="mybutton">Calculate</button>
<div class="myresult"></div>
</body>
</html>Before Ajax, I had:
<!DOCTYPE html>
<html>
<body>
<h1>Calculadora de indemnización</h1>
<form action = "https://catadordealfajores.com/wp-content/uploads/2020/calc.php" method = "post">
<h3>¿Te despidieron con causa?</h3>
<p>Si trabajaste más de 3 meses, se considera 1 año. Si trabajaste 1 año y 3 meses, se consideran 2 años. Y así.</p>
<input type="radio" name="causa" value="si">
<label for="male">Sí</label><br>
<input type="radio" name="causa" value="No">
<label for="female">No</label><br>
<h3>¿Cuántos años trabajaste?</h3>
<input type="text" name="anios">
<br>
<h3>¿Cuál era tu sueldo?</h3>
<input type="text" name="sueldo">
<br>
<br>
<input type="submit" value = "Enviar">
</form>
</body>
</html>Thank you very much