preventDefault() 无法阻止提交表单

Posted 2023-05-08

【中文标题】preventDefault() 无法阻止提交表单

【英文标题】：preventDefault() not working for preventing submission of form

【发布时间】：2021-08-26 00:10:45

【问题描述】：

使用 javascript 检查表单的提交，执行 ajax 调用以检查项目名称。如果响应为真（“项目名称存在”）那么我想取消提交表单并显示错误。

由于某种原因阻止默认没有做任何事情来阻止页面的刷新，或者表单的提交。每次测试都成功输入了if语句，但是页面刷新并提交了表单。

JS

$( document ).ready(function() 
    // If the project entered already exists in our database, Cancel submission.
    $('#add-project-form').on("submit", function(event)
        console.log("SUBMITTING...");
        let project_name = $('#project_ea').val();
        $.ajax(
            url: "api/Projects/ProjectExists/" + project_name,
            type: "POST",
            dataType: "json",
            success: function(data)
                console.log(data);
                console.log(event);
                if (data == true)
                   //Prevent Submission of form
                   event.preventDefault();
                   console.log("Submission Halted.");
                   $('#project-name-error').show();
                 

            
        ); 
    );
);

按钮被按下

<button type="submit" form="add-project-form" name="add-project-form-button" id="add-project-form-button" class="btn btn-primary">Save changes</button>

【问题讨论】：

将 event.preventDefault() 移出 AJAX 成功处理程序。

【参考方案1】：

在向 API 发送请求之前，您必须使用 event.preventDefault()。由于 API 调用是异步的，在 success 方法中的 event.preventDefault() 执行之前，页面已经重新加载

编辑：您可以在事件处理程序开始时阻止默认，并在数据为真时提交表单

$( document ).ready(function() 
// If the project entered already exists in our database, Cancel submission.
$('#add-project-form').on("submit", function(event)
    event.preventDefault(); //prevents
    console.log("SUBMITTING...");
    let project_name = $('#project_ea').val();
    $.ajax(
        url: "api/Projects/ProjectExists/" + project_name,
        type: "POST",
        dataType: "json",
        success: function(data)
            console.log(data);
            console.log(event);
            if (data == true)
               //Prevent Submission of form
               //event.preventDefault();
               document.querySelector('#add-project-form').submit(); //you can submit the form using this function
               console.log("Submission Halted.");
               $('#project-name-error').show();
             

        
    ); 
);

);

【讨论】：

event.preventDefault() 在 submit 事件处理程序中肯定会阻止提交事件正常继续。不过，您的其余答案是正确的。一个代码示例会让它变得更好

@Phil 是的，可能不好，我错了。我会改变答案。

感谢你们为我澄清了这个想法！这是公认的答案，因为它帮助我解决了这个问题。