无法取消jQuery中的表单提交

Question

我试图在单击按钮后取消表单提交。 单击按钮时，我会从 check-timetable-timing-conflict 与 json 中获取一些信息。 因此，如果 json 附带的数据为 1，我决定取消表单提交。但它不会取消表单提交，尽管我得到了 1。

<form role="form" method="POST" id="subform" name="subform">
...
...

<button id="submitbutton" type="submit" class="btn btn-primary" onclick="return select_course();">{% trans "EKLE" %}</button>
...
...

<script>
conflict = 0;

var select_course = function()
{
    //alert("button clicked");
    var selectcourse = document.getElementById('kurskod');
    var kurskod = selectcourse.options[selectcourse.selectedIndex].value;    
    var selectcoursedate = document.getElementById('kursgunu');
    var kursgunu = selectcoursedate.options[selectcoursedate.selectedIndex].value;    
    var selectcoursestart = document.getElementById('kursbasla');
    var kursbasla = selectcoursestart.value;
    var selectcourseend = document.getElementById('kursbitis');
    var kursbitis = selectcourseend.value;

    check_conflict(kurskod,kursgunu,kursbasla,kursbitis)
}

var check_conflict = function(kurskod,kursgunu,kursbasla,kursbitis) {
    $.get('/check-timetable-timing-conflict', {kurskod: kurskod, kursgunu: kursgunu, kursbasla: kursbasla, kursbitis: kursbitis}, function(data){
        objlist = JSON.parse(data);
        if (objlist[0] == 1) {
            conflict = 1;
            alert("Confictval:"+conflict);
            var warning = document.getElementById('warningdiv');
            warning.innerHTML = "Başka bir kurs ile Saat çakışması var.";

            $('#subform').submit(function(e){
                e.preventDefault();
                alert('prevent submit');             
            });            
        }
    });
}
</script>

Answer 1

为了防止form提交，您需要从单击button时调用的onclick函数返回false 。 同样为了防止ajax form提交，您还可以添加e.preventDefault(); 像下面。

注意：如果使用表单的onsubmit方法而不是按钮的onclick方法调用该函数，也可以达到相同的效果。

 var select_course = function(e) { e.preventDefault(); // your logic goes here return false; }

 <form role="form" method="POST" id="subform" name="subform" > <button id="submitbutton" type="submit" class="btn btn-primary" onclick="return select_course(event);">placeholder</button> </form>

Answer 2

您的问题是提交事件侦听器的设置位置。

您需要将此代码块移到check_conflict()函数之外。

$('#subform').submit(function(e){
    e.preventDefault();
    alert('prevent submit');             
});

.submit(function(e){})为提交事件创建一个处理程序。 在您的代码中，直到 check_conflict 函数使其异步调用返回之后，您才创建处理程序。 太晚了。 当用户提交表单时，您需要处理程序已经就位。

<script>

    conflict = 0;
    $('#subform').submit(function(e){
        e.preventDefault();
        alert('prevent submit');             
    });   

    var select_course = function()
    {
        var selectcourse = document.getElementById('kurskod');
        var kurskod = selectcourse.options[selectcourse.selectedIndex].value;    
        var selectcoursedate = document.getElementById('kursgunu');
        var kursgunu = selectcoursedate.options[selectcoursedate.selectedIndex].value;    
        var selectcoursestart = document.getElementById('kursbasla');
        var kursbasla = selectcoursestart.value;
        var selectcourseend = document.getElementById('kursbitis');
        var kursbitis = selectcourseend.value;

        check_conflict(kurskod,kursgunu,kursbasla,kursbitis)
    }

    var check_conflict = function(kurskod,kursgunu,kursbasla,kursbitis) {
        $.get('/check-timetable-timing-conflict', {kurskod: kurskod, kursgunu: kursgunu, kursbasla: kursbasla, kursbitis: kursbitis}, function(data){
            objlist = JSON.parse(data);
            if (objlist[0] == 1) {
                conflict = 1;
                alert("Confictval:"+conflict);
                var warning = document.getElementById('warningdiv');
                warning.innerHTML = "Başka bir kurs ile Saat çakışması var.";         
            }
            else {
                // todo no conflict
            }
        });
    }

</script>

Answer 3

问题是由于 ajax 的异步行为。 当我单击按钮时，表单提交已经开始。 因此，当我尝试检查 jquery 中的冲突条件时，表单提交已经完成。 所以我通过在 jquery 的 if 条件下提交表单来解决这个问题，在那里我得到了与 document.subform.submit() 的冲突=1。

在解决方案之前，我开始提交表单，然后我在做 jquery 检查。 但是现在我首先进行jquery检查，然后根据jquery搜索结果做或不做表单提交。

<form role="form" method="POST" id="subform" name="subform">
...
...

#DELETED THIS > <button id="submitbutton" type="submit" class="btn btn-primary" onclick="return select_course();">{% trans "EKLE" %}</button>
#ADDED THIS > <a href="#" onclick="return select_course();">EKLE</a>
...
...

<script>
conflict = 0;
var select_course = function()
{
    //alert("button clicked");
    var selectcourse = document.getElementById('kurskod');
    var kurskod = selectcourse.options[selectcourse.selectedIndex].value;    
    var selectcoursedate = document.getElementById('kursgunu');
    var kursgunu = selectcoursedate.options[selectcoursedate.selectedIndex].value;    
    var selectcoursestart = document.getElementById('kursbasla');
    var kursbasla = selectcoursestart.value;
    var selectcourseend = document.getElementById('kursbitis');
    var kursbitis = selectcourseend.value;

    check_conflict(kurskod,kursgunu,kursbasla,kursbitis)
}

var check_conflict = function(kurskod,kursgunu,kursbasla,kursbitis) {
    $.get('/check-timetable-timing-conflict', {kurskod: kurskod, kursgunu: kursgunu, kursbasla: kursbasla, kursbitis: kursbitis}, function(data){
        objlist = JSON.parse(data);
        if (objlist[0] == 1) {
            conflict = 1;
            alert("Confictval:"+conflict);
            var warning = document.getElementById('warningdiv');
            warning.innerHTML = "Başka bir kurs ile Saat çakışması var.";         
        } else {
            document.subform.submit();  #ADDED THIS PART  
        }
    });
}
</script>