避免刷新页面和必填字段不起作用
avoid refresh page and required field doesn't work
我想提交禁用刷新的表单,我希望 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>
如果您打算动态添加表单,则需要委托
$("#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>
我想提交禁用刷新的表单,我希望 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>
如果您打算动态添加表单,则需要委托
$("#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>