我想提交一个禁用刷新的表单,并且我希望 ajax 执行 POST 请求以避免刷新页面。
这里我得到了类似的结构,但我所需的标签不起作用
<form id="test">
<input type="text" name="title" required/>
</form>
<button id="submitForm">Save</button>
然后我像这样编写 JavaScript:
$('#submitForm').click(function(e){
e.preventDefault();
$("#test").submit();
console.log('success');
});
为什么我的表单正在刷新并且未验证必填字段?
最佳答案
您正在绕过所有免费获得的东西。
方法如下
- 使用提交事件
- 将提交按钮移至表单
$('#test').on("submit", function(e) {
e.preventDefault();
// $.post(url.....)
console.log('success');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="test">
<input type="text" name="title" required/>
<button type="submit">Save</button>
</form>
- 或在标签上使用 form="test"
$('#test').on("submit", function(e) {
e.preventDefault();
// $.post(url.....)
console.log('success');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="test">
<input type="text" name="title" required/>
</form>
<button type="submit" form="test">Save</button>
如果您打算动态添加表单,则需要委托(delegate)
$("#container").on("submit", ".dynForm", function(e) {
e.preventDefault();
// $.post(url.....)
console.log('success', this.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<form id="test1" class="dynForm">
<input type="text" name="title" required/>
</form>
<form id="test2" class="dynForm">
<input type="text" name="title" required/>
</form>
<form id="test3" class="dynForm">
<input type="text" name="title" required/>
</form>
</div>
<button type="submit" form="test1">Save 1</button>
<button type="submit" form="test2">Save 2</button>
<button type="submit" form="test3">Save 3</button>
关于javascript - 避免刷新页面且必填字段不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61724024/