HTML element dynamic

Question

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();

@HereticMonkey I think OP uses the enter/return key to trigger submit event. — zer00ne, May 10 '22 at 17:02
@zer00ne Well, there's a dupe for that too... [JavaScript code to stop form submission](https://stackoverflow.com/q/8664486/215552) But of course, I can't vote to close again... — Heretic Monkey, May 10 '22 at 17:03
[JavaScript code to stop form submission](https://stackoverflow.com/q/8664486/215552) But of course, I can't vote to close again... @zer00ne — Heretic Monkey, May 10 '22 at 17:05

score 0 · Answer 1 · answered May 10 '22 at 16:57

0

you must use from preventDefault method to prevent default refresh :

$("form" ).submit(function( event ) {
  event.preventDefault();
  // The rest of the work
});

answered May 10 '22 at 16:57

masoud

98
1
8

HTML element dynamic

1 Answers1