I created an input number field and I want to dynamically display the value of this field in a container without having to refresh the page. I am currently using ajax for this purpose, but unfortunately, I still need to reload the page.
HTML:
<form method="post">
<div class="main">
<label for="numb">Enter Number</label><br><br>
<input type="number" id="numb" min="1">
</div>
<div class="main" style="display: block;">
<section id="display">
</section>
</div>
</form>
JavaScript:
const xhr = new XMLHttpRequest();
xhr.open("POST","dynamisch_ajax.html", true);
xhr.onload = () => {
if(xhr.status === 200)
{
$('#display').html($('#numb').val())
} else {
alert('Something went wrong.')
}
}
xhr.send();