I made a input number field and want to dynamic render the value of this in the container without reloading the page. I'm using ajax for this but I still have to reload the page.
HTML:
<form method="post">
<div class="main">
<label for="numb">Parcour</label><br><br>
<input type="number" id="numb" min="1">
</div>
<div class="main" style="display: block;">
<section id="erstellen">
</section>
</div>
</form>
js:
const xhr = new XMLHttpRequest();
xhr.open("POST","dynamisch_ajax.html", true);
xhr.onload = () => {
if(xhr.status === 200)
{
$('#erstellen').html($('#numb').val())
} else {
alert('Irgendetwas past nicht')
}
}
xhr.send();
you must use from preventDefault method to prevent default refresh :
$("form" ).submit(function( event ) {
event.preventDefault();
// The rest of the work
});