我的jQuery不起作用。这是一个应该从我的表单中更新数字的函数。我尝试在我的外部JavaScript上设置一个"Hello World",以查看脚本是否被调用。如果我在我的按钮类型="提交"中删除 id="sub",这是有效的。如果 id="sub" 在我的按钮类型="提交"中,hello 世界不起作用,这意味着我下面的脚本不起作用,因为我需要 id="sub"。
有人能明白为什么会这样吗?
.HTML:
<div class="col-lg-6 bg-success">Content
<form class="form-inline" id="myForm" action="select.php" method="post">
<div class="form-group">
<label for="inputNumber"></label>
<input type="number" class="form-control" name="numbervalue" id="numberinput" placeholder="Number">
<button type="button" class="btn btn-success" id="sub">Insert</button>
</div>
</form>
<span id="result"></span>
</div>
.JS:
// Insert function for number
function clearInput() {
$("#myForm :input").each( function() {
$(this).val('');
});
}
$(document).ready(function(){
$("#sub").click( function(e) {
e.preventDefault(); // remove default action(submitting the form)
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){
$("#result").html(info);
});
clearInput();
});
});
// Recieve data from database
$(document).ready(function() {
setInterval(function () {
$('.latestnumbers').load('response.php')
}, 3000);
});
从div 中的数据库返回:
<!-- Show Numbers In Left Side-->
<div class="col-lg-1" id="show" style="list-style:none; padding: 4px 0px 0px 0px;">
<div class="fixed-width-col border" class="latestnumbers">
<?php include('response.php');?>
</div>
</div>
这是 HTML:
<div class="col-lg-6 bg-success">Content
<form class="form-inline" id="myForm" action="select.php" method="post" onSubmit="return sayHello()">
<div class="form-group">
<label for="inputNumber">
<Label>
<input type="number" class="form-control" name="numbervalue" id="numberinput" placeholder="Number">
<button type="button" class="btn btn-success" id="sub">Insert</button>
<span id="result"></span>
</div>
</form>
</div>
和Javascript:
function sayHello() {
alert("Hello World");
return true;
}
$(document).ready(function() {
$("#sub").click(function(e) {
sayHello();
});
});
这是JS小提琴链接:
https://jsfiddle.net/2b0noxjw/6/
而不是使用
<button type="submit" class="btn btn-success" id="sub">Insert</button>
请使用这个
<button type="button" class="btn btn-success" id="sub">Insert</button>
也许这会有所帮助。
谢谢
它的原因...当您删除按钮的默认操作时,
即e.preventDefault();
您删除了按钮操作,而不是提交。因此,您可以像这样将onClick属性添加到提交按钮中
<button type="submit" id="sub" onClick="somefunctiontodosomestuff()">insert</button>
当您使用type="submit"
时,单击按钮时将调用按钮的submit
事件。但是,当您在单击处理程序中使用e.preventDefault();
时,它会取消该事件。
您需要将按钮的type
属性更改为button
,以便它充当简单按钮
<button type="button" class="btn btn-success" id="sub">Insert</button>
完成上述更改后,您将不需要e.preventDefault()
因此也将其删除。
您click
方法添加到按钮,则此按钮未调用表单提交。
你应该在你的点击方法上这样称呼它:(jQuery submit)
$("#myForm").submit();