我有一个带有文本输入字段和按钮的表单。我想要实现的是，用户在文本输入字段中输入内容并单击按钮后，他在框中输入的文本将显示在表单下方的范围内。由于某种原因它不起作用，我正在尝试找出原因。
我的 HTML:
<form>
<input type="text" id="textInput">
<button id="submitButton" class="btn btn-primary">Submit</button>
</form>
<span id="guests"></span>
我的 JS/jQuery:
$(document).ready(function() {
$("#submitButton").on("click", function() {
var input = $("#textInput").val()
$("#guests").html(input)
})
});
包含 JS 代码的 JS 文件在头部链接如下:
<head>
<script src="guestList.js"></script>
</head>
最佳答案
您将需要 Event.preventDefault(); 。
每次单击按钮时，页面都会刷新，因此不会显示任何值。默认操作 <Button>是提交表单，因此页面被重新加载(已提交)。
另一个更简单的选择是设置 type = "button"因此按钮不会充当Submit按钮。
$(document).ready(function() {
$("#submitButton").on("click", function(e) {
e.preventDefault();
var input = $("#textInput").val()
$("#guests").html(input)
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="textInput">
<button id="submitButton" class="btn btn-primary">Submit</button>
</form>
<span id="guests"></span>关于javascript - jQuery 在页面上显示输入的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50085161/