Javascript 表单未在$.ajax成功函数内提交
我正在使用jquery+Ajax验证重复名称。一切正常，只是在一切返回真值后表单不会提交 发生了什么事Javascript 表单未在$.ajax成功函数内提交,javascript,jquery,ajax,forms,Javascript,Jquery,Ajax,Forms,我正在使用jquery+Ajax验证重复名称。一切正常，只是在一切返回真值后表单不会提交 发生了什么事 <form action="add-shelf-post.php" method="post" id="form1"> 如果未输入名称，则会显示警告框，说明名称为 必需-->此处没有问题 如果发现重复的名称，则会显示警告框，说明名称 已存在且表单未提交-->此处无问题 如果未找到重复名称，则会显示警告框（以证明 其他条件的一部分正在工作），但表单不工作 提交。我希望表单继续并在
<form action="add-shelf-post.php" method="post" id="form1">
- 如果未输入名称，则会显示警告框，说明名称为 必需-->此处没有问题
- 如果发现重复的名称，则会显示警告框，说明名称 已存在且表单未提交-->此处无问题
- 如果未找到重复名称，则会显示警告框（以证明
条件的一部分正在工作），但表单不工作 提交。我希望表单继续并在此其他
部分中提交，否则
$('#form1').submit(function(){
var name = $('#shelf_name').val();
if(name == '')
{
alert('Shelf name is required');
$('#shelf_name').focus();
}
else
{
$.ajax({
type:'post',
url:'check-duplicate-shelf-name.php',
data:{'name':name},
context:this,
success:function(data)
{
if(data == 'stop')
{
alert('Shelf name already exists'); // working if duplicate name is found
}
else
{
alert('else working?'); // alert box is showing up if name is not duplicate
this.submit(); // but after alert, this line not executing
}
}
});
}
return false;
});
<form action="add-shelf-post.php" method="post" id="form1">
<?php
include 'confignew.php';
$name = $_POST['name'];
// peforming database operations
.
.
.
// and then
if($db->num_rows($q) == 0)
{
echo 'go';
}
else
{
echo 'stop';
}
执行远程表单验证？签出及其规则 除此之外，您的代码看起来还不错。这是一个有效的演示： 像这样的东西：）
无法测试我会在运行时使用jQuery验证器检查它，而不是在提交时，但另一种方法是进行Rest样式的调用。我认为没有必要仅仅为了检查1个字段就发布完整的表单
$('#form1').submit(function(){
//Check not empty
if(!$('#shelf_name').val()) {
alert('Shelf name is required');
$('#shelf_name').focus();
} else {
//Valiate Rest style call
$.getJSON("check-duplicate-shelf-name.php/".concat($('#shelf_name').val()), function(data) {
//If you only have 2 states I would return boolean to faster check ex: if(!data){
if(data == 'stop') {
// working if duplicate name is found
alert('Shelf name already exists');
} else {
alert('else working?'); // alert box is showing up if name is not duplicate
$('#form1').submit(); // but after alert, this line not executing
}
});
}
return false;
});
$.ajax({
url: "./myurl",
cache: false,
type: "POST",
data: $("#form1").serialize(),
success: function(){
console.log("Submit successful");
}
});
在这种情况下，您可以从
回调中获益。只需按如下方式分离代码：
函数的回调函数，该回调函数将返回一个对象{status:'true或false'，message:'Some text'}
function validity(callback){
var name = $('#shelf_name').val();
if(name == '')
{
return callback({status: false, message: 'Shelf name is required'});
}
else
{
$.ajax({
type:'post',
url:'check-duplicate-shelf-name.php',
data:{'name':name},
context:this,
success:function(data)
{
if(data == 'stop')
{
return callback({status: false, message: 'Shelf name already exists'});
}
else
{
return callback({status: true, message: 'else working?'});
}
}
});
}
//just for safety :))
return callback({status: false, message: 'something went wrong completely'});
});
这将返回AJAX调用的结果。它将等待AJAX完成并返回的相应分支结果（如果）
。。您现在可以这样使用它：
$('#form1').submit(function(){
validity(function(result){
if (result.status) { //status is true
return true;
}
else
{
alert(result.message);
$('#shelf_name').focus();
return false;
}
});
});
。。。或者将它们结合起来，就像：
$('#form1').submit(function(){
// definition
function validity(callback){
var name = $('#shelf_name').val();
if(name == '')
{
return callback({status: false, message: 'Shelf name is required'});
}
else
{
$.ajax({
type:'post',
url:'check-duplicate-shelf-name.php',
data:{'name':name},
context:this,
success:function(data)
{
if(data == 'stop')
{
return callback({status: false, message: 'Shelf name already exists'});
}
else
{
return callback({status: true, message: 'else working?'});
}
}
});
}
//just for safety :))
return callback({status: false, message: 'something went wrong completely'});
});
//usage
validity(function(result){
if (result.status) { //status is true
return true;
}
else
{
alert(result.message);
$('#shelf_name').focus();
return false;
}
});
});
希望这有帮助，而不是这个。提交（）写：
或者，如果您不知道表单名称，您可以使用：
document.forms[0].method = "POST";
document.forms[0].action = "Relative_URL_to_Go_to";
document.forms[0].submit();
完全由于范围
你在哪里
alert('else working?'); // alert box is showing up if name is not duplicate
this.submit(); // but after alert, this line not executing
这是指ajax对象，而不是表单。这是因为它现在位于另一个函数中
我正在添加$form=$（这个）
在ajax调用之前声明可以在回调中使用的变量
试试这个：
$('#form1').submit(function( e ){
e.peventDefault();
var name = $('#shelf_name').val();
if(name == '')
{
alert('Shelf name is required');
$('#shelf_name').focus();
}
else
{
$form = $(this);
$.ajax({
type:'post',
url:'check-duplicate-shelf-name.php',
data:{'name':name},
context:this,
success:function(data)
{
if(data == 'stop')
{
alert('Shelf name already exists'); // working if duplicate name is found
}
else
{
alert('else working?'); // alert box is showing up if name is not duplicate
$form.submit(); // but after alert, this line not executing
}
}
});
}
return false;
});
更新：我昨天可能已经完全没有时间了。尝试添加e.preventDefault（）；就在提交呼叫上方。此外，在function（）定义中添加e变量。检查上面更新的代码
下面是一些关于preventDefault（）的文档：不要尝试过多地检查get simple button和addd onclick事件，在该事件中放入下面的代码
html代码
<input type="button" value="submit" onclick="formsubmit();">
我已经测试了你的代码，它可以在Chrome、IE 8和Mozilla Firefox中运行。检查整个页面中是否有一个元素包含在其名称属性中对单词进行赋值。如果有，请重命名它。例如，这样的输入标记：
将导致Mozilla Firebug中出现错误
此外，您可以在下面找到另一种解决方案
以下解决方案已在Chrome、IE 8和Mozilla Firefox中成功测试
替代解决方案
检索发布URL和要发布的数据，并在成功回调中执行发布
以下实现已在Chrome、IE 8和Mozilla Firefox中成功测试。在成功回调中，将检索要发布的数据并将其发布到URL，然后将结果放入id为result的div中。您可以修改它以满足您的需要
$(document).ready(function() {
$('#form1').submit(function(){
var name = $('#shelf_name').val();
if(name == '')
{
alert('Shelf name is required');
$('#shelf_name').focus();
}
else
{
$.ajax({
type:'post',
url:'check-duplicate-shelf-name.php',
data:{'name':name},
context:this,
success:function(data)
{
if(data == 'stop')
{
alert('Shelf name already exists');
}
else
{
alert('else working?');
//this.submit();
//$(this).submit();
// get the post url and the data to be posted
var $form = $(this);
shelfNameVal = $form.find( 'input[id="shelf_name"]' ).val(),
url = $form.attr( 'action' );
// Send the form data and put the results in the result div
$.post(url, { shelf_name: shelfNameVal },
function(data) {
$( "#result" ).empty().append(data);
}
);
}
}
});
}
return false;
});
});
我希望这会有所帮助。表单未提交的原因是您正在从submit
事件处理程序返回false
，这导致默认操作（提交）不会发生。即使调用submit（）
方法，您仍然在submit
事件处理程序中，该处理程序返回了false
您可能想考虑更改处理表单提交的服务器端逻辑，也可以检查重复，或者将重复的检查Ajax帖子附加到文本框的<代码>模糊>代码>事件中，或者按照@ Rajh KaWaAT建议的提交按钮（除了附加jQuery而不是HTML属性）。例如：
$('#form1').submit(function(){
var name = $('#shelf_name').val();
if(name == '')
{
alert('Shelf name is required');
$('#shelf_name').focus();
return false;
}
});
$('#shelf_name').on('blur', function () {
var $this = $(this),
name = $this.val();
if(name == '')
{
alert('Shelf name is required');
$this.focus();
return false;
}
$.ajax({
type:'post',
url:'check-duplicate-shelf-name.php',
data:{'name':name},
success:function(data)
{
if(data == 'stop')
{
alert('Shelf name already exists'); // working if duplicate name is found
}
else
{
alert('else working?'); // alert box is showing up if name is not duplicate
$('#form1').submit(); // this should work now
}
}
});
});
我不知道为什么this.submit（）行以前工作过，因为我对您的应用程序、脚本版本等了解不够。。你可能想考虑使用一个例子。我们遇到了同样的问题，认为我们已经排序了。< /P>
问题是
.submit（）
操作在“线程”$.ajax
中也不起作用。
为此，您必须在$.ajax
块中添加async:false
指令，并在$.ajax
执行完成时提交表单
未经测试，但这是工作思路：
html:
<input type='submit' onClick='javascript:MyCheck(); return false;'>
function Mycheck() {
var result = "";
$.ajax {
async:false,
url: you_url_here,
timeout: 15000,
success: function(data) {
result="success";
},
error: function(request, status, err) {
result="error";
}
};
// Here, if success -> SUBMIT FORM or whatever
// Only get here if "ASYNC" = FALSE!!!
if (result == "success") {
$("form").submit(); // this submits the form
return;
} else {
alert('error');
// the form will not be post
}
}
享受它的工作
document.createElement('form').submit.call(document.formname);
你确定“这个”指向你认为应该指向的地方吗？@JureC。它应该指向表单，不是吗？@asprin别忘了ajax是异步的，您正在处理提交事件，因此即使它正确提交，您也会再次输入提交事件。@asprin我认为它不正确。只要检查：）@JureC。正如我所说的，我还没有弄清楚到底出了什么问题。如果你已经发现了它，你能分享一下吗？我尽量不使用任何插件。想要使用普通的jquery来完成它表单提交，即使我在你的jsfiddleWorks中为我在IE9、FF和Chrome中保持文本框为空。你用的是什么浏览器？你看过我最新的小提琴了吗？真奇怪。我正在用你最新的提琴来尝试，但是不管什么条件，表单仍然在提交。哇，你必须有一些插件做一些奇怪的事情。你能在开发控制台中看到一些错误吗？但是th在哪里
function Mycheck() {
var result = "";
$.ajax {
async:false,
url: you_url_here,
timeout: 15000,
success: function(data) {
result="success";
},
error: function(request, status, err) {
result="error";
}
};
// Here, if success -> SUBMIT FORM or whatever
// Only get here if "ASYNC" = FALSE!!!
if (result == "success") {
$("form").submit(); // this submits the form
return;
} else {
alert('error');
// the form will not be post
}
}
document.createElement('form').submit.call(document.formname);