防止通过Ajax提交表单

Question

我有一个表单：

It has

<form id=myform onsubmit=return validate();>
<input type=text id=name name=name>
</form>

在我的Javascript文件中，我有以下内容：

function validate(){
 $.ajax({
        dataType: 'json',
        url: app.url.prefix,
        method: 'POST',
        data: {service: 'manage', met: 1, name: name },
        success: function (data) {
            if (data.exists){
                 return false;
            }

        }

    });
return true;
}

这段 Ajax 代码检查返回的数据是否有值，特别是 data.exists 的值。我希望根据 exists 的值来防止提交表单。

这段代码
if (data.exists){ return false; }

实际上并不能达到预期效果。

- ante geia

---

要百分之百确定。如果您在输入框处于活动状态时按下回车键，您想防止表单重新加载页面吗？ - Jesper

问题在于，ajax 意味着异步操作。因此，您应该防止提交表单，在获得积极反馈后，应在您的成功函数中提交表单。 - Matt

我想要实现如果data.exists等于“我不想要的值”就不提交，但是我在函数末尾返回true，因为AJAX是异步的，所以它无法正常工作。 - ante geia

Answer 1

$('#myform').submit(function() {
    return false;
});

这应该可以解决问题，现在表单在按下回车键或按钮时不会重新加载页面。

编辑：
您的表单还缺少双引号。

<form id="myform" onsubmit="return validate();">
    <input type="text" id="name" name="name">
</form>

- Jesper

Answer 2

你遇到的问题是因为异步ajax函数调用，它在ajax数据返回之前就返回了true。 我还没有检查过它，但你可以尝试像这样的方法：

function validate(){
var self = this;
self.preventDefault();
 $.ajax({
        dataType: 'json',
        url: app.url.prefix,
        method: 'POST',
        data: {service: 'manage', met: 1, name: name },
        success: function (data) {
            if (!data.exists){
                 self.submit();
            }

        }

    });

返回假;

}

- Vipul Bhatt

Answer 3

解决方案：

我已经更改了我的HTML，并添加了onclick事件而不是onsubmit。

<form id="myform">
   <input type="text" id="name" name="name">
   <button type="submit" id="button" onclick="validate();">
</form>

同样适用于 Javascript

我在这里阻止提交

 $("#button").on("click",function(event){
    event.preventDefault();
});

这是我的函数，用于检查是否存在数据，如果不存在，则提交表单。

function validate(){

$.ajax({

 dataType: 'json',
 url: app.url.prefix,
 method: 'POST',
 data: {service: 'manage', met: 1, name: name },
 success: function (data) {
 if (!data.exists){
   $('#myform').submit();
}
 }
  });

- ante geia