Question

我试图阻止/允许表格使用以下js中给出的某些条件提交。我能够从我的PHP代码中获取所有响应并显示它们，但是阻止/允许表单提交的if条件似乎现在正在工作，因为它应该是。虽然从php获得响应有延迟。仅当响应为“OK”但if条件在我从PHP代码获取响应之前处理时才满足if条件。

请帮助

谢谢。

JS -

function checkall() {
var name=document.getElementById( "UserName" ).value;
var email=document.getElementById( "UserEmail" ).value;
var group=document.getElementById( "GroupName" ).value;

if(name)
{
$.ajax({
type: 'post',
url: 'checkdata.php',
data: {
user_name:name,
},
success: function (response) {
$( '#name_status' ).html(response);
}
});
}
else
{
$( '#name_status' ).html("");
}

if(email)
{
$.ajax({
type: 'post',
url: 'checkdata.php',
data: {
user_email:email,
},
success: function (response) {
   $( '#email_status' ).html(response);
  }
 });
}
else
{
   $( '#email_status' ).html("");
   return false;
}


if(group)
{
 $.ajax({
  type: 'post',
  url: 'checkdata.php',
  data: {
    groupname:group,
  },
success: function (response) {
   $( '#group_status' ).html(response);
  }
 });
}
else
{
$( '#group_status' ).html("");
return false;
}

var namehtml=document.getElementById("name_status").innerHTML;
var emailhtml=document.getElementById("email_status").innerHTML;
var grouphtml=document.getElementById("group_status").innerHTML;

if((namehtml && emailhtml && grouphtml)=="OK")
  {
   alert("processing");
   return true;
  } else {
   alert("Failed To Submit");             
   return false;
  }

//return false;
}

Html -

<form name="registration" action="" method="post" onsubmit="return checkall()" autocomplete="off">
    <input type="text" name="username" required="required" id="UserName" />
    <label for="#{label}">Username</label> <p id="name_status"></p>


    <input type="email" name="email" required="required" id="UserEmail" />
    <label for="#{label}">Email</label> <p id="email_status"></p>



    <input type="password" id="#{label}" name="password" required="required"/>
    <label for="#{label}">Admin Password</label>



    <input type="text" name="group_name" required="required" id="GroupName" />
    <label for="#{label}">Group Name</label> <p id="group_status"></p>



    <input type="password" id="#{label}" name="group_password" required="required"/>
    <label for="#{label}">Group Password</label>



    <button type="submit" id="myBtn" name="submit"><span>Next</span></button>

</form>

Answer 1

简而言之，您的PHP调用是异步的，但是您的onSubmit（）是同步的。

因此，您必须找到一种方法使onSubmit()以更加同步的方式运行。

这样做的基本方法是：

在提交时，调用您的PHP函数并返回false。
- 理想情况下，也会停用您的提交按钮，以便人们不会再次点击它。
当您的通话完成后，如果有效，请手动提交表单。
- 您可以使用form.submit（）或类似内容，具体取决于您的确切框架。看起来你正在使用jQuery，所以$('form').submit()可以解决问题。
如果它无效，请执行您要执行的任何验证。
- 如果您之前禁用了以后的通话，请再次启用提交按钮。

通过立即返回false，您告诉表单不提交。但是，这会让您只需等待PHP返回所需的所有时间。然后，您可以手动触发提交，如果它有效，或者如果它没有。因此，您已经使您的表单表现得像异步一样。

阻止/允许表单提交

1 个答案: