关于form表单button事件教训

最新推荐文章于 2025-09-30 13:27:18 发布

原创最新推荐文章于 2025-09-30 13:27:18 发布 · 5.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#form

JS 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一种在自定义按钮点击事件中避免触发所在表单默认提交行为的方法，通过修改表单标签并使用JavaScript来确保点击按钮时能够导航至预期URL。

在form中我自定义了一个button,然后在button上增加了点击事件。html代码大致如下：

<form t-att-action="keep('/shop/order/preview')" class="js_add_cart_variants" method="POST">
                                            
         <div class="epic_download_images" t-if="inner_product">
                    <button ng-click="download_images()">
                          <span>下载图片</span>
                    </button>
         </div>
                                                   
</form>

</pre><pre name="code" class="html">button自定义事件处理逻辑如下:

$scope.download_images = function () {
        console.log(3333);
        // 创建一个 form
        var form1 = document.createElement("form");
        form1.id = "download_images_form";
        form1.name = "download_images_form";

        // 添加到 body 中
        document.body.appendChild(form1);
        console.log(document.getElementById('download_images_form'));

        // 创建一个输入
        var input = document.createElement("input");
        // 设置相应参数
        input.type = "text";
        input.name = "product_tmpl_id";
        input.value = $scope.product_template_id;

        // 将该输入框插入到 form 中
        form1.appendChild(input);

        // form 的提交方式
        form1.method = "POST";
        // form 提交路径
        <span style="color:#ff0000;"><strong>form1.action = "/export/tmpl_images";</strong></span>

        // 对该 form 执行提交
        form1.submit();
        // 删除该 form
        // document.body.removeChild(form1);
    };

button的主要目的是重新创建一个form表单，然后点击后跳转到 /export/tmpl_images 页面，但是很奇怪，点击后一直跳转到它所在的form 的 action /shop/order/preview

寻思了很久，后来恍然大悟，form中的 <input type="button"> 和<button></button> 都会点击后跳转到它所在的form的action执行的页面。

为了解决这个跳转问题，让页面跳转到button中用js制定的url，需要在form中增加 onSubmit = "return false;"

或者为了不影响原来form的跳转，将button或<input type="button">标签换成其它标签。