8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

在 JavaScript 中拦截表单提交并阻止正常提交

Juan Moreno 2月前

147 0

关于如何使用 javascript 提交表单的信息似乎很多,但我正在寻找一种解决方案来捕获表单提交的时间并在 javascript.HTML 中拦截它

关于如何使用 javascript 提交表单似乎有很多信息,但我正在寻找一种解决方案来捕获表单的提交时间并在 javascript 中拦截它。

HTML

<form>
 <input type="text" name="in" value="some data" />
 <button type="submit">Go</button>
</form>

当用户按下提交按钮时,我不 希望 提交表单,而是希望调用 JavaScript 函数。

function captureForm() {
 // do some stuff with the values in the form
 // stop form from being submitted
}

一个快速的破解方法是向按钮添加一个 onclick 函数,但我不喜欢这个解决方案...有很多方法可以提交表单...例如,在输入时按回车键,但这并不能解释。

帖子版权声明 1、本帖标题:在 JavaScript 中拦截表单提交并阻止正常提交
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Juan Moreno在本站《ajax》版块原创发布, 转载请注明出处!
最新回复 (0)
  • <form id="my-form">
        <input type="text" name="in" value="some data" />
        <button type="submit">Go</button>
    </form>
    

    在 JS 中:

    function processForm(e) {
        if (e.preventDefault) e.preventDefault();
    
        /* do what you want with the form */
    
        // You must return false to prevent the default form behavior
        return false;
    }
    
    var form = document.getElementById('my-form');
    if (form.attachEvent) {
        form.attachEvent("submit", processForm);
    } else {
        form.addEventListener("submit", processForm);
    }
    

    编辑 :在我看来,这种方法比 onSubmit 在表单上设置属性更好,因为它保持了标记和功能的分离。但这只是我的看法。

    编辑2 :更新了我的示例以包括 preventDefault()

  • 据我使用 jsbin.com/ejoyas 所见,这在 Chrome 上也不适用

  • 请注意,attach 事件代码需要在表单在 dom 中可用后执行。例如,使用 window.onload=function() { ... } 来包装它

  • 不确定,因为我不使用 IE,但我认为 attachmentEvent 参数应该是 \'onsubmit\'。

  • Braj 2月前 0 只看Ta
    引用 6

    在 2017 年,在回退到 attachmentEvent 之前请检查 addEventListener,因为 IE9+ 支持 addEventListener。

  • 你不能在附加事件的元素加载之前附加事件

    建议使用事件监听器 - 一个是在页面加载时使用,另一个是在表单提交时使用。

    注意 切勿在表单中调用任何内容\'提交\'

    从 IE9 开始此功能有效:

    普通/普通 JS

    // Should only be triggered on first page load
    console.log('ho');
    
    window.addEventListener("DOMContentLoaded", function() {
      document.getElementById('my-form').addEventListener("submit", function(e) {
        e.preventDefault(); // before the code
        /* do what you want with the form */
    
        // Will be triggered on form submit
        console.log('hi');
      })
    });
    <form id="my-form">
      <input type="text" name="in" value="some data" />
      <button type="submit">Go</button>
    </form>

    jQuery

    // Should only be triggered on first page load
    console.log('ho');
    
    $(function() {
      $('#my-form').on("submit", function(e) {
        e.preventDefault(); // cancel the actual submit
    
        /* do what you want with the form */
    
        // Will be triggered on form submit
        console.log('hi');
      });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <form id="my-form">
      <input type="text" name="in" value="some data" />
      <button type="submit">Go</button>
    </form>

    不推荐,但可以起作用

    如果不需要多个事件处理程序,则可以使用 onload 和 onsubmit

    // Should only be triggered on first page load
    console.log('ho');
    
    window.onload = function() {
      document.getElementById('my-form').onsubmit = function() {
        /* do what you want with the form */
    
        // Should be triggered on form submit
        console.log('hi');
        // You must return false to prevent the default form behavior
        return false;
      }
    }
    <form id="my-form">
      <input type="text" name="in" value="some data" />
      <button type="submit">Go</button>
    </form>
  • N4v 2月前 0 只看Ta
    引用 8

    我认为你的意思是:$('#my-form).on('submit', function() { alert('hi'); });

  • @Michiel 虽然您提供的内容是与 jQuery 一起使用的内容,但提供的解决方案是纯 JS 解决方案,不依赖 jQuery。此处的解决方案类似于使用

  • @ChrisMarisic - 几年前:) 无论如何,我已经更新了答案以包含 jQuery

  • <form onSubmit="return captureForm()"> 应该可以。请确保您的 captureForm() 方法返回 false .

  • 跟进:有没有办法用 JavaScript 捕获表单提交而不影响浏览器对必需属性的处理?

  • Popo 2月前 0 只看Ta
    引用 13

    @Elisabeth 对什么属性进行什么处理?如果您的意思是不想阻止表单实际提交,则只需要 captureForm() 返回 true 而不是 false。

  • 浏览器对 \'required\' 属性的处理。我确实想阻止提交表单。但是通过返回 false 而不是 true(或使用 PreventDefault()),它会改变浏览器处理输入元素上的 \'required\' 属性的方式。自己尝试一下:添加 required 到输入元素,捕获提交,看看是否丢失了它的默认行为。

  • 我似乎没有失去默认行为。它在 Chrome 中运行良好。您需要想出一个错误的示例,我才能提供帮助。

  • 引用 16

    好的,表格如下:

    and here's the code: function processForm(e) { var form = document.querySelector("form"); for (var i = 0; i < form.childNodes.length; i++) { var node = form.childNodes[i]; /* do stuff with nodes / } / return false; */ } Testing in opera. Uncomment the last line, required fails. (Sorry code doesn't work well in comments)
  • 引用 17

    在我的实践中,当 onload 无法提供帮助时,我使用的另一种处理所有请求的选项是处理 javascript 提交、html 提交、ajax 请求。这些代码应添加到 body 元素的顶部,以便在呈现和提交任何表单之前创建监听器。

    例如,我在提交时将隐藏字段设置为页面上的任何表单,即使它发生在页面加载之前。

    //Handles jquery, dojo, etc. ajax requests
    (function (send) {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        XMLHttpRequest.prototype.send = function (data) {
            if (isNotEmptyString(token) && isNotEmptyString(header)) {
                this.setRequestHeader(header, token);
            }
            send.call(this, data);
        };
    })(XMLHttpRequest.prototype.send);
    
    
    //Handles javascript submit
    (function (submit) {
        HTMLFormElement.prototype.submit = function (data) {
            var token = $("meta[name='_csrf']").attr("content");
            var paramName = $("meta[name='_csrf_parameterName']").attr("content");
            $('<input>').attr({
                type: 'hidden',
                name: paramName,
                value: token
            }).appendTo(this);
    
            submit.call(this, data);
        };
    })(HTMLFormElement.prototype.submit);
    
    
    //Handles html submit
    document.body.addEventListener('submit', function (event) {
        var token = $("meta[name='_csrf']").attr("content");
        var paramName = $("meta[name='_csrf_parameterName']").attr("content");
        $('<input>').attr({
            type: 'hidden',
            name: paramName,
            value: token
        }).appendTo(event.target);
    }, false);
    
  • 使用@Kristian Antonsen 的答案,或者您可以使用:

    $('button').click(function() {
        preventDefault();
        captureForm();
    });
    
  • 对于 2.5 年(或更长时间)后执行此操作的人,您需要将点击事件作为参数传递给函数(如 function(e) 并调用 e.preventDefault()

  • 如果您使用了 input[type=\'submit\'],也可以在表单的 \'submit\' 事件中捕获,这会将您置于表单上下文中,而不是按钮上下文中。回调将始终具有事件的上下文,因此您不必传递“e”作为参数,只需引用“事件”即可。

返回
作者最近主题: