关于form表单button事件教训

来源：互联网发布：学院风服装知乎编辑：程序博客网时间：2024/05/16 14:10

在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">标签换成其它标签。

0 0