form 的submit提交没有反应

最新推荐文章于 2023-02-27 17:03:12 发布
最新推荐文章于 2023-02-27 17:03:12 发布
阅读量8.4k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ziyouniao719672119/article/details/51177566
版权


搞了一天，submit提交就是没有反应，原来是标签用错了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h:form id="form1" action="goto.html" method="post">
input text :<input type ="text" name ="info" id="text"/>

<input type="submit" name="submit" value ="show" />
</h:form>
</body>
</html>



做如下修改后，即可正常提交 submit。原因是 <h:form> 是属于jsf框架的标签，通过<h:commonbutton>来提交表单，<form>是属于html的标签，通过  type=submit 来提交表单。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form id="form1" action="goto.html" method="post">
input text :<input type ="text" name ="info" id="text"/>

<input type="submit" name="submit" value ="show" />
</form>
</body>
</html>




表单Form的submit事件不响应
01-19
当用JS调用form的方法submit直接提交form的时候，submit事件不响应。为什么？知道的请回复。类比一下，我用input.select()做了测试，却能响应select事件。这个原因先放一边，我们看看先怎么把眼下的问题解决了。不...
解决Vue @submit 提交后不刷新页面问题
10-15
Vue提供了事件修饰符`@submit.prevent`来处理这种情况，帮助我们在表单提交时不触发表单的默认行为，即防止页面刷新。本文将详细讲解如何利用`@submit.prevent`来解决Vue表单提交后不刷新页面的问题。 首先，让我们...
from表单点击submit提交后没有反应
weixin_50776418的博客
05-01 6889
一般的错误还是命名问题 在页面中点击如果没有一点效果，说明form表单中一定有错误，我是打成了“from” 如果有页面刷新但是没有反应，检查后台 1. 从Controller开始排查 （1）看参数是不是我们想要接收的 （2）观察业务层有没有报错（错误信息大多数情况比较模糊，不容易排查，需要总结异常经验） 2. 观察Service层 如果是比较复杂的业务逻辑，需要你打断点一步一步进行调试，每走一步，都需要观察结果，是不是我们想要的 如果是比较简单的业务逻辑，则不需要观察 3. 观察dao层 主要.
表单Form的submit事件不响应的解决方法
12-10
一、问题描述 类比一下，我用input.select()做了测试，却能响应select事件。这个原因先放一边，我们看看先怎么把眼下的问题解决了。 不响应事件的代码示例： [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 实际运行，不会有alert出来。 虽然用submit方法来提交表单有违Unobtrustive Javascript的原则，但有时候不得不用，比如做搜索提示（auto-complete)选中Item之后就需要用JS来提交搜索表单。 二、问题分析 既然本身不响应事件，那只有手工触发这些事件了，确定手工触发方案之前先回顾一下事件的注册方式： “原始”的注册方式有两
html form 表单 submit 提交数据没有反应
weixin_44414639的博客
06-05 2666
检查一下是不是form 写成了from <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <form action = "#" method = "get"> 用户名：<input name="username"&gt.
submit 按钮提交无效 点击无效果 不可用
jaylongli的专栏
11-21 2万+
        我的问题主要是，点击type="submit"的按钮没有作用，即是鼠标在上面点，不会发生提交，无任何响应。但是呢我先操作了一下该页面的其他按钮然后在点击该按钮又可以了。后来到网上看到一篇文章：http://blog.youkuaiyun.com/rushman/archive/2007/07/15/1693039.aspx  该文章虽然没有马上解决我的问题，但是在后面让我知道了问题所在
form表单submit提交后台无反应、前端不报错
热门推荐
qq_25260079的博客
09-06 3万+
form表单submit提交后台无反应、前端不报错
JavaScript中form的submit方法不响应的问题解决
静觅
03-15 1万+
今天第一次测试javaScript，一个button按钮点击，调用JavaScript方法，但是form.submit方法死活不响应，最后恍然大悟... <%@ page language="java" contentType="text/html; charset=GB2312" pageEncoding="UTF-8"%> Insert title here function
layui 解决form表单点击无反应的问题
10-16
另外，当我们在无刷新页面后进行操作时，由于DOM没有被重新加载，之前可能有一些事件绑定、页面数据处理等操作不再生效，因此在进行操作前需要确保表单的状态是最新的，这时候调用`form.render()`是非常必要的。...
html表单提交没反应,用JS提交表单没有反应
weixin_35120608的博客
06-27 853
我用JS事件触发表单提交，没有反应，然而js的警告窗口可以弹出，是表单提交代码错误，还是jquery包没导入成功，求路过的好心人帮助查找;htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Stringpath=req...
form表单submit方法无法提交 没反应 到不了后台
weixin_30644369的博客
07-06 2457
　　　　千万别把form里面button的id设为submit！！！！！！！！！！！！！ 转载于:https://www.cnblogs.com/donnieluo/p/7124829.html
layui form表单点击无反应
72shmily的博客
08-01 8948
无刷新页面再次操作form表单 时，点击无效果 重点来了！解决方法！需要.render(); 代码如下： layui.use('form', function(){ var form = layui.form,$ = layui.jquery; form.render();//重点在这里 });...
JavaScript 中form.submit（）提交不响应问题
iteye_19968的博客
03-24 639
[code="java"] 后台操作区 BODY { MARGIN-LEFT: 0px; BACKGROUND-COLOR: #ffffff } .STYLE1 {color: #ECE9D8} function sub() { var form = document.getElementById('form1...
layui表单提交无反应
不积跬步，无以至千里
11-27 3108
点击submit时,form.on不被处罚，表单输入框验证项的验证不执行。 //监听提交 form.on('submit(demo1)', function(data){ //save(data); return false; }); 解决办法: 给submit按钮增加 lay-submit="" 即可。
IE8下submit表单没反应
ty0415的专栏
03-07 1972
当在IE8浏览器下，如下代码点击没反应，一般是由于表单里面嵌套了表单造成的，把另外一个表单删掉即可。
触发layui的表单提交事件，我提交一次之后 第二次就没反应了
业余前端的职业经历
01-26 2435
其实工作中还是比较常见这样的需求呢 监听submit提交 首先在layui中监听表单提交事件 form.on('submit(*)', function(data){ console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value
form标签提交表单没有反应，也不报错【已解决】
m0_62477881的博客
02-27 694
form标签提交表单没有反应，也不报错
html5 submit没反应,jquery,javascript_jquery form表单submit()中的过程不执行，jquery,javascript,html,html5 - phpStu...
weixin_35319894的博客
06-20 357
jquery form表单submit()中的过程不执行很奇葩的问题，代码如下：$(document).ready(function(){//提交function sub(btn){var goUrl = 'test.php';$('#example').submit(function(){alert(goUrl);});}//修改文章提交$('#doEdit').click(function()...
vant form提交没反应
最新发布
03-11
<think>好的，用户遇到了Vant表单提交无响应的问题，需要解决。首先，我需要回忆Vant组件库的相关知识，特别是表单部分。Vant的Form组件通常和Field组件一起使用，提交无响应可能涉及多个方面，比如事件绑定、表单验证、异步处理等。 第一步，用户可能没有正确绑定submit事件。Vant的Form组件需要通过@submit事件来触发表单提交，如果用户误用了其他事件比如@click，可能会导致问题。需要检查代码中的表单标签是否正确使用@submit。 第二步，表单验证失败可能导致提交不执行。Vant的表单验证规则可能被触发，如果某个字段未通过验证，submit事件就不会触发。用户可能没有正确处理验证逻辑，或者在rules配置上有错误。需要检查各个Field的rules是否正确，以及是否所有必填项都填写了。 第三步，阻止表单默认事件的问题。在原生表单提交时，浏览器会默认刷新页面，但Vant通常配合Ajax使用，可能需要阻止默认行为。如果用户没有在@submit事件中使用.prevent修饰符，可能会导致页面刷新，而看不到提交效果。需要检查是否添加了.prevent。 第四步，异步操作未处理。比如提交函数中有异步请求，但没有返回Promise，可能导致Vant无法正确等待异步完成。需要检查提交函数是否正确处理了异步操作，比如使用async/await并返回Promise。 第五步，表单元素是否正确使用。比如是否遗漏了name属性，或者按钮的native-type是否正确设置为submit。需要检查按钮的属性和表单结构是否正确。 其他可能的问题包括Vant版本问题、自定义验证函数错误、UI库与框架版本不兼容等。需要建议用户检查版本，查看控制台报错，使用官方示例代码进行对比。 总结，应该分步骤引导用户检查事件绑定、验证规则、默认事件阻止、异步处理以及表单结构，并提供示例代码帮助排查。同时建议查阅官方文档和社区资源，如GitHub issues，寻找类似问题的解决方案。</think>### 分步解决Vant表单提交无响应问题 #### 1. 检查事件绑定与表单结构 确保使用Vant的`<van-form>`组件并正确绑定`submit`事件： ```html <van-form @submit="onSubmit"> <van-field v-model="username" name="username" label="用户名" /> <van-button native-type="submit">提交</van-button> </van-form> ``` 关键点： - 必须使用`@submit`而非`@click`[^1] - 按钮需设置`native-type="submit"` - 表单字段需定义`name`属性 #### 2. 验证表单规则配置 检查是否因验证失败导致提交阻断： ```javascript export default { data() { return { rules: { username: [{ required: true, message: '必填项' }] } }; }, methods: { onSubmit(values) { console.log('提交数据:', values); } } }; ``` 常见问题： - 未通过`rules`属性绑定验证规则 - 异步验证未返回Promise - 自定义验证函数逻辑错误 #### 3. 处理异步提交 若涉及API请求，需返回Promise： ```javascript async onSubmit(values) { try { await axios.post('/api/submit', values); this.$toast.success('提交成功'); } catch (error) { this.$toast.fail('提交失败'); } } ``` #### 4. 常见问题排查清单 | 问题现象 | 解决方法 | |---------|---------| | 点击无任何响应 | 检查控制台错误/网络请求 | | 页面意外刷新 | 添加`.prevent`修饰符 | | 部分字段未提交 | 检查`name`属性是否缺失 | | 移动端兼容性问题 | 测试不同机型/浏览器 | #### 5. 调试建议 ```javascript // 临时关闭验证进行测试 <van-form @submit="onSubmit" :validate-first="false"> ``` ###
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值