Question

我有一个表单，我想在提交时使用mixpanel来跟踪某些属性。如果验证返回false，如何通过mixpanel停止表单提交？

这是我的一般代码。

我的简单表格

<form id="form" action="..." method="post" role="form">
    // my elements here
    <input type="submit" value="Submit" />
</form>

我的剧本

<script>
    function(){
        mixpanel.track_forms("form", "MyEventName", getProperties());
        $("form").submit(SubmitForm);

        function getProperties(){
            // get properties here
        }

        function SubmitForm() {
            if (SomethingNotRight()) { return false; }

            return true;
        }
    }

我的问题：

我希望在我的SubmitForm函数中，经SomethingNotRight函数验证后，它将停止提交。但是，即使SubmitForm返回false，表单也会继续提交给服务器，我发现这是因为mixpanel.track_form。

我使用mixpanel.track_form的原因是为了避免表单提交和mixpanel之间的竞争条件提交为debugging mixpanel track form

Answer 1

我绝对可以理解这里的问题，原因是track_forms只是为立即提交表单的默认用例而设计的。如果你之间有一个进程（在这种情况下是验证），你基本上应该自己实现。 track_forms的想法是识别正在提交的表单，记录事件，等待一段时间以便保存事件，然后继续。从这个意义上说，你可以这样做：

(function(){})(
    var theForm = $("#form"),
        readyToProceed = false;

    //listen for the submition
    theForm.submit(function(e){
        if(!readyToProceed){
            e.preventDefault();
            processSubmit();
        }
    });

    function processSubmit(){
        //validation process
        if (SomethingNotRight()) { return false; }

        //we are all good, lets proceed
        mixpanel.track("Form submitted");
        readyToProceed = true;
        window.setTimeout(function(){ theForm.submit() }, 300);
    }

);

mixpanel跟踪表单提交和验证

1 个答案: