关于form表单button事件教训

悠悠 2022-08-18 05:42 205阅读 0赞

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

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