如何使用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>