Question

单击按钮后，我试图取消表单提交。当单击按钮时，我从带有json的check-timetable-timing-conflict中获取了一些信息。因此，如果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提交，您需要从单击false时调用的onclick函数返回button。另外，为了防止提交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){})为Submit事件创建一个处理程序。在您的代码中，直到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>

无法取消jquery中的表单提交

3 个答案: