如何从引导表单检索用户输入到 JSON 发布到 API？

Question

 <form>
        <div class="form-group">
            <label for="text">Name:</label>
            <input type="text" class="form-control" id="name" placeholder="Enter name" name="name">
        </div>
        <div class="form-group">
            <label for="text">Age:</label>
            <input type="text" class="form-control" id="age" placeholder="Age" name="age">
        </div>
        <div class="form-group">
            <label for="text">City:</label>
            <input type="text" class="form-control" id="city" placeholder="Enter city" name="city">
        </div>
        <button onclick = "MyFunction()" id = "submitButton" type="submit" class="btn btn-default">Submit</button>
        <p id = "demo">

        </p>
        <script>

            function MyFunction() {
                var name = document.getElementById("name")
                var age = document.getElementById("age")
                var city = document.getElementById("city")
                document.getElementById("demo").innerHTML = name + " " + age + " " + city;
            }
        </script>
    </form>
</div>

it's a bootstrap form where they fill their name, address, age, and when they press submit it makes a JSON post request to a flask server that is running on localHost:5200

that is the end goal, right now I am trying to just show on the screen what the user entered in these forms to show up on screen so I know im grabbing the right things hence the myFunction method, but it is not working and returns an object and refreshes the page...

Answer 1

<form>
    <div class="form-group">
      <label for="text">Name:</label>
      <input type="text" class="form-control" id="name" placeholder="Enter name" name="name">
    </div>
    <div class="form-group">
      <label for="text">Age:</label>
      <input type="text" class="form-control" id="age" placeholder="Age" name="age">
    </div>
    <div class="form-group">
      <label for="text">City:</label>
      <input type="text" class="form-control" id="city" placeholder="Enter city" name="city">
    </div>
    <button onclick="MyFunction(event)" id="submitButton" type="submit" class="btn btn-default">Submit</button>
    <p id="demo">

    </p>
  </form>
  <script>
    function MyFunction(e) {
      e.preventDefault();
      var name = document.getElementById("name").value
      var age = document.getElementById("age").value
      var city = document.getElementById("city").value
      document.getElementById("demo").innerHTML = name + " " + age + " " + city;
      fetch('http://localhost:5100', {
        method: 'POST',
        body: JSON.stringify({ name, age, city })
      }).then(res => res.json())
    }
  </script>