我有一个带有文本输入字段和按钮的表单。我想要实现的是,在用户在文本输入字段中键入内容并单击按钮后,他在框中键入的文本将显示在表单下方的范围内。出于某种原因,它不起作用,我试图找出原因。
我的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>
答案 0 :(得分:1)
每次单击按钮时,页面都会刷新,因此不会显示任何值。 <Button>
的默认操作是提交表单,因此重新加载页面(已提交)。
另一个更简单的选择是设置type = "button"
因此按钮不会充当Submit
按钮。
$(document).ready(function() {
$("#submitButton").on("click", function(e) {
e.preventDefault();
var input = $("#textInput").val()
$("#guests").html(input)
})
});
&#13;
<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>
&#13;
答案 1 :(得分:1)
您的按钮提交表单,以便页面刷新。
只需将Button类型设置为type="button"
> <button id="submitButton" type="button" class="btn btn-primary">Submit</button>
答案 2 :(得分:0)
HTML:
<form>
<input type="text" id="textInput">
<input type="submit" value="Submit" id="submitButton">
</form>
<span id="guests"></span>
JQuery的:
$( document ).ready( function() {
$( "form" ).submit( function(e) {
e.preventDefault();
var input = $( "#textInput" ).val();
$( "#guests" ).html( input )
})
});