如何使用 submit() 函数读出表单并显示内容

Question

我想使用 submit() 函数从表单域中读出文本并再次显示。但是，按下提交按钮后什么也没有发生。使用像 keyup() 这样的不同事件处理程序，一切正常。有什么建议吗？

$(function() {
    $("#name")
    .on("submit", function(e) {
        e.preventDefault();
        var namenew = $(this).val();
        $("p.show").html("Hello <strong>" + (namenew) + "</strong>");
    });  
});

<section>
        <label for="name">Name</label>
        <input type="text" id="name">
        <input type="submit" id="submit">
        <p class="show">Hello <strong>Unknown</strong></p>
    </section>

Answer 1

submit 事件在表单上触发，而不是输入。

因此您需要在 <section> 中放置一个表单，并将处理程序绑定到该表单。然后你需要使用$("#name").val()来获取输入的值。

$(function() {
  $("#myform")
    .on("submit", function(e) {
      e.preventDefault();
      var namenew = $("#name").val();
      $("p.show").html("Hello <strong>" + (namenew) + "</strong>");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <form id="myform" action="#">
    <label for="name">Name</label>
    <input type="text" id="name">
    <input type="submit" id="submit">
  </form>
  <p class="show">Hello <strong>Unknown</strong></p>
</section>

如何使用 submit() 函数读出表单并显示内容

How do I use the submit()-function to read out a form and show the content

forms

jquery

submit