Question

我正在使用jQuery的AJAX提交表单。我有几个使用AJAX的表格：

$('#newUser').submit(function() {
var dataString = $(this).serialize();

$.ajax({  
    type: "POST",  
    url: "/includes/classes/handler.php?do=addLogin",
    data: dataString,
    success: function(returnedData){

        if(returnedData){
            $('.errorMessage').fadeIn().html(returnedData);
        } else {
            $('.sideBarNewUserWrap').fadeOut();
        }

    }
});
return false;
});
//

然后我还有另一个这样的人：

$('#addLookup').submit(function() {
var dataString = $(this).serialize();

$.ajax({  
    type: "POST",  
    url: "/includes/classes/handler.php?do=addLookup",
    data: dataString,
    success: function(returnedData){

        if(returnedData){
            $('.errorMessage').fadeIn().html(returnedData);
        } else {
            window.location.href = "";
        }

    }
});
return false;
});

由于某种原因，当我不想触发#newUser时，它会触发#addLookup。如果我删除了#addLookup，那么没有为#newUser运行的AJAX或jQuery（如果我点击“提交”，浏览器就会刷新）。

表格如下：

<form method='post' action='#' id='newUser'></form>

或

<form method='post' action='#' id='addLookup'></form>

这怎么可能？我现在一直在看同样的代码2小时，我无法弄清楚是什么问题。

更新

仅当2个表单在同一页面上时才会触发#addLookup。如果#newUser独立站在一个页面AJAX触发正确的功能。

完整的HTML

<form method='post' action='#' id='addLookup'>

    <div id='tilfojOpslagClose'><img src='/includes/images/design/btn/closeWindow-btn.png'></div>

    <div class='successMessage'></div>
    <div class='errorMessage'></div>


    <div id='tilfojOpslagHeader'>
        <input type='text' name='lookupHeader' id='lookupHeader' value='Skriv en overskrift'>
    </div>

    <div id='tilfojOpslagExpand'>

        <div style='float:left;'>
            <label>Præsentations tekst (bliver vist på forsiden)</label> 
                <textarea name='lookupSubHeader' id='lookupSubHeader' maxlength='100'></textarea>
        </div>
            <span id='lookupSubHeaderCharsLeftOutput'>Du mangler <strong>50</strong> tegn</span>

        <div style='float:left;width:618px;margin:3px 0 0 0;'>
            <textarea name='lookupContent' id='lookupContent' style='height:100px;'></textarea>
        </div>

        <div id='tilfojOpslagBottom'>
            <div id='tilfojOpslagSubmit'><input type='submit' value='Opret mit opslag'></div>
        </div>
</form>

和#newUser

<form method='post' action='#' id='newUser'>
        <fieldset>
            <legend>Ny bruger</legend> 
                <label>Brugernavn</label>
                    <input type='text' name='username' id='username' placeholder='Brugernavn vil forekomme på siden, som et alias'>
                <label>E-mail</label>
                <label style='color:#f00;font-size:8px;'>Ja, du skal skrive en gyldig e-mail. Du modtager et aktiverings link.</label>
                    <input type='text' name='email' id='email' placeholder='E-mail - en del af dit login'>
                <label>Adgangskode</label>
                    <input type='password' name='password' id='password' placeholder='Adgangskode - en del af dit login'>
                <input type='hidden' name='salt' id='salt' value='<?=uniqid(mt_rand())?>'>
                <input type='submit' value='Opret mig'>

                <div class='errorMessage'></div>
                <div class='successMessage'></div>
        </fieldset>
        </form>

更新

<?if($_SESSION['loggedIn']){?>
    <form action='' method='' id='addLookup'>
<?} else {?>
    <input type='submit' value='something'>
    </form>
<?}?>

Answer 1

问题来自SUBMIT按钮行为。表单内的特定提交只会发布包含它的表单。我编写了一个快速jsFiddle来说明它。如果您触发未包含在表单中的提交按钮，则不会发布任何表单。如果您触发特定表单内的特定提交按钮，则只会发布该表单。

Al替代方案可能是通过将OnClick事件处理程序附加到提交按钮来手动发布两个表单...

Answer 2

尝试使用preventDefault取消提交事件，也可以为两个表单编写单个处理程序。试试这个

$('#newUser,#addLookup').submit(function(e){
    e.preventDefault();
    var dataString = $(this).serialize();
    var id = $(this).attr('id');

    $.ajax({  
       type: "POST",  
       url: "/includes/classes/handler.php?do="+id,
       data: dataString,
       success: function(returnedData){
           if(returnedData){
               $('.errorMessage').fadeIn().html(returnedData);
           }else{
               // include as per your need
           }
        }
    });
});

Answer 3

我没有完全解决你的问题，但似乎你正在进行POST，其中一个参数在URL中传递（应该是ge GET）。所以似乎有冲突。它可能是所有问题的母亲。

type: "POST",  
url: "/includes/classes/handler.php?do=addLookup",

jQuery，AJAX - 触发错误的函数

3 个答案: