js的onclick和form提交按钮冲突了，请指教！

2016-08-22 10:53:42 649 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

5分钟搞定Google Custom Search API申请：从注册到获取CX Key全流程本文详细介绍了如何快速申请和配置Google Custom Search API，从Google Cloud项目创建、启用计费、获取API Key，到在Programmable Search Engine控制台创建自定义搜索引擎并获取关键的CX Key，提供了全流程实战指南。文章还包含安全配置建议、API调用测试方法及前端与后端的集成代码示例，帮助开发者高效实现网站或应用的智能搜索功能。阅读详情

<from action=***>
<button id=b1 onclick="cmd()">b1</button>
<button id=b2 type=submit>b2</button>
<div id=动态新增其他input></div>
其他一堆已有的<input>控件
</from>

意图是button1的js命令在<div>中新增一批name=value的input控件，然后button2将这批动态新增的input连同其他input控件一起提交出去。

但是如果不写<from></from>，button1是可以触发的，但是写了form标记后，button1就失效了。
但是如果不写form标记的话，button2提交的范围是什么呢？页面上所有input吗？因为form标记外还有其他input，不能一起提交。

这个怎么解决呢？

...全文

直线型一阶倒立摆1---从理论到实践的桥梁本文深入探讨了直线型一阶倒立摆在控制理论中的核心地位，从非线性控制、鲁棒性到实时反馈等关键问题。通过实际案例和硬件搭建指南，帮助读者理解从理论到实践的过渡，特别适合控制工程初学者和研究人员。文章还提供了算法选型建议和硬件避坑手册，是掌握倒立摆控制的实用指南。阅读详情

中文命名法

JavaScript 87,984 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

KK3K2005 2016-08-22

打赏
举报

失效？不能仅仅根据‘失效’ 2个字得出你的结论写代码要用明确的描述

中文命名法 2016-08-22

打赏
举报

引用 1 楼 Return_false 的回复:

加上type属性 <button id=b1 onclick="cmd()" type="button">b1</button> type 属性规定按钮的类型。提示：请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。如果不加，非IE浏览器，走默认值 submit，表单照样提交

你好，我帖子里漏写了 type="button"，代码里是有写type=button的。应该不是这个问题。我怀疑是不是这个原因： button1的cmd里js是往一个api以ajax方式提交一个请求，收到返回值后区填充<div id=动态新增其他input></div>。会不会是因为这样而起的冲突，如果是的话，请问有什么办法解决吗？

人生难得一只鸡 2016-08-22

打赏
举报

加上type属性 <button id=b1 onclick="cmd()" type="button">b1</button> type 属性规定按钮的类型。提示：请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。如果不加，非IE浏览器，走默认值 submit，表单照样提交

中文命名法 2016-08-22

打赏
举报

$.ajax({
    url: 'http://api.fanyi.baidu.com/api/trans/vip/translate', type: 'get', dataType: 'jsonp',
    data: { ... },
    success: function (返回值) {
        for (var 位置 in 返回值.trans_result) {
            $("#配料选择").append("<div class=col-xs-4>" +
                "<input type=hidden name=用户确认[" + 位置 + "].确认前 value='" + 返回值.trans_result[位置].src + "' />" +
                "<inupt type=hidden name=用户确认[" + 位置 + "].位置 value='" + 位置 + "' />" +
                "<input type=hidden name=用户确认[" + 位置 + "].翻译 value='" + 返回值.trans_result[位置].dst + "' /></div>");
        }
    }
});

动态新增的3个input，提交后发现，第一个（用户确认[" + 位置 + "].确认前）和第三个（用户确认[" + 位置 + "].翻译）传值正确。第二个（用户确认[" + 位置 + "].位置）无法正确传值。请帮我看看哪里错了吗？返回值的数据结构是这样的： {"from":"en","to":"zh","trans_result":[{"src":"apple","dst":"苹果"},{"src":"orange","dst":"橙子"},{"src":"banana","dst":"香蕉"}]}

中文命名法 2016-08-22

打赏
举报

<button id="格式检查" type="button" class="btn btn-primary" onclick="格式检查()">格式检查</button> 找到问题了，因为button的id和命令重名发生冲突了。

中文命名法 2016-08-22

打赏
举报

引用 3 楼 KK3K2005 的回复:

不能仅仅根据‘失效’ 2个字得出你的结论写代码要用明确的描述

我话句话替代“失效”，也就是按下去没反应。 <from action ...> <input type="text" class="form-control" name="用户输入"> <button id="格式检查" type="button" class="btn btn-primary" onclick="格式检查()">格式检查</button> <div id="配料选择" class="row" style="margin-bottom:5px"></div> <input type="text" class="form-control" name="摘要"> <input type="text" class="form-control" name="条形码"> <button id="提交" type="submit" class="btn btn-primary">提交</button> </form> <script> function 格式检查() { var 原文=$("#用户输入").val().replace(new RegExp(",", "g"), "\n"); $.ajax({ url: 'http://api.fanyi.baidu.com/api/trans/vip/translate', type: 'get', dataType: 'jsonp', data: { ..... }, success: function (返回值) { for (var 位置 in 返回值.trans_result) { 往id="配料选择"的div里面动态新增input控件 ); }} }); }<script> 测试结果是，如果最外层不写 <form></form> 的时候，格式检查按钮，提交api请求，然后动态新增input一切正常。但是一旦像我贴的代码这样，外层写上 <form></form> 的时候，格式检查按钮按了就没任何反应。而我给外层加上<form>的原因是，最终要通过页面最后的提交按钮将 form里面的动态控件提交出去。

js的onclick和form提交按钮冲突了，请指教！

相关推荐