表单通过 jQuery 提交第 1 次，通过 PHP 提交第 2 次答案

【问题标题】：Form submits 1st via jQuery, 2nd via PHP表单通过 jQuery 提交第 1 次，通过 PHP 提交第 2 次
【发布时间】：2014-11-06 14:49:36
【问题描述】：

我有一个表单，它在提交时通过对 PHP 脚本的 jQuery ajax 调用进行处理。第一次提交表单时，jQuery 捕获事件，运行 ajax 调用和 PHP 脚本并从 PHP 脚本返回数据，并将其放入所需的 HTML 元素中。

但是，如果第二次按下提交按钮，则表单提交正常，jQuery 无法“防止默认”。所以整个页面都被重新加载了。

jQuery 代码

$(document).ready(function() {

// catch form submittion
    $('#user_account_form').submit(function(ev) {

// prevent default action and propagation
    ev.preventDefault();
    ev.stopPropagation();

// pull data from the form attributes
    var href = $(this).attr('action');
    var postData = $(this).serializeArray();

// run the ajax call        
    var request = $.ajax({
        url: "view/jquery/" + href,
        type: "post",
        data: postData,
        dataType: "json"
    });

// ajax call completed?
// -- echo returned data to elements
    request.done(function(data) {

// put the refreshed form (provided by PHP script) in the #user_account element
        $('#user_account').html(data.form);

// put the system message (provided by PHP script) in the #sysmsg element
        $('#sysmsg').html(data.sysmsg).delay(2000).fadeOut(100);
    });

// on fail, log to console        
    request.fail(function(jqXHR, textStatus, errorThrown) {
        console.log('error processing form data: ' + textStatus + " [" + errorThrown + "]");
    });

    });

});

PHP 代码

this is basically a simple script that checks the entered data from the form 
against the data in the database. If the entered password equals the database 
password the database is updated, otherwise it will only return a system message 
to the user that the password was incorrect.

我认为错误在于我的 jQuery 代码中遗漏了一些东西，这使得 jQuery 捕获了第二、第三、第四等提交。

【问题讨论】：

我猜这会让你感到困惑$('#user_account').html(data.form); 看起来正在创建一个新表单。 jQuery 不会自动为您重新应用您的逻辑。你需要明确地这样做。
"// 将刷新的表单（由 PHP 脚本提供）放在#user_account 元素中" 你的意思是，一个没有提交事件的新表单？
stakolee，Kevin B，说得好。从来没想过。 PHP 脚本确实构建了一个全新的表单。所以不知何故，新表单的提交动作没有被 jQuery 脚本捕获是有道理的。谢谢。
我认为代表可以解决您的问题

标签： php jquery ajax

【解决方案1】：

试试：

$('#user_account_form').on('submit', function(ev) {});

代替：

$('#user_account_form').submit(function(ev) {});

这是因为据我了解，您的提交按钮位于从后端刷新的数据中，这意味着该按钮未绑定到任何事件，因为它是一个全新的按钮。 jQuery on 会将事件绑定到该元素的所有实例，即使它们是在将来创建的。

重要提示：如果您使用 jQuery

【讨论】：

thanpa，是的......在阅读了 stakolee、Kevin B 和你的 cmets 之后，我有点想“如果 PHP 脚本中的新表单被解释为新表单，因此不绑定按钮怎么办？？”。我要改变我的剧本，看看会发生什么。
不应该更像$('body').on('submit', '#user_account_form', function(ev) {});body可以换成最近的静态父类
asprin，我看不到选择所有正文然后将其绑定到特定字段的原因，我不确定 jQuery 是否与我编写绑定的方式相同，但它肯定看起来更好;)

【解决方案2】：

也许可以尝试使用计数器，这样您就会知道您点击了多少次提交 btn

$(document).ready(function() {

var counter = 0;

// catch form submittion
    $('#user_account_form').submit(function(ev) {
        // If first click
        if(counter === 0){
            // Do the preventDefault and ajax thing
        }
        else{
            // Do nothing or what you expect for a >2nd click
        }
        // Increment counter
        counter++;
    })
});

【讨论】：

【解决方案3】：

在阅读了您关于 PHP 脚本构建全新表单并因此未绑定提交按钮以防止 jQuery 捕获后续提交的帖子后，我想“如果我只需要刷新 1 或 2 个字段，为什么还要构建一个全新的表单？ ”。所以我更改了我的 PHP 脚本，只返回更改字段的数据库中的数据，并将其以 json 格式发送到我的 jQuery 脚本。然后调整我的 jQuery 脚本读取 json 对象，并将新值放入相应的字段中。现在它按预期工作了。

更改的 jQuery 代码

....
request.done(function(data) {
    $('#email').val(data.email);
    $('#sysmsg').html(data.sysmsg).delay(2000).fadeOut(100);
});

更改的 PHP 代码

....
$email = $main->getUserDetails('email');
$array = array("sysmsg" => $msg, "email" => $email);
$data = json_encode($array);

echo $data;

感谢大家的意见，它帮助我弄清楚要更改哪些内容来改进我的代码。

【讨论】：