“返回假"从外部源加载脚本时，不适用于jQuery发布表单提交 [英] "return false" doesn't work for jQuery post form submission when script is loaded from external source

问题描述

我有以下两种形式:

<form id='EnableBackgroundCrossfadeForm' action='BgCFenable.php' method='post'>
    <input id='BgCFenable' class='DisableD_Button' type='submit' value='Enable'>
</form>

和:

<form id='DisableBackgroundCrossfadeForm' action='BgCFdisable.php' method='post'>
    <input id='BgCFdisable' class='DisableButton' type='submit' value='Disable'>
</form>

这是外部POST.js文件:

$("#BgCFdisable").click(function(){

    $("#BgCFLog").animate({"max-height":"100px"}, 300);
    $("#BgCFLog").html("<img src='Resources/Images/Loader02.gif'/>");

    $.post($("#DisableBackgroundCrossfadeForm").attr("action"),
               $("#DisableBackgroundCrossfadeForm").serializeArray(),
               function(data){
                    if(data == "DISABLED"){
                        $("#BgCFLog").html("Background Crossfading disabled!");
                        $( "#BgCFdisable" ).attr("disabled", "disabled");
                        $( "#BgCFdisable" ).switchClass( "DisableButton", "DisableD_Button", 1000, "easeInOutQuad" );
                        $( "#BgCFenable" ).removeAttr("disabled");
                        $( "#BgCFenable" ).switchClass( "DisableD_Button", "EnableButton", 1000, "easeInOutQuad" );
                    }
               });
    $("#DisableBackgroundCrossfadeForm").submit(function(){
        return false;
    });
});

$("#BgCFenable").click(function(){

    $("#BgCFLog").animate({"max-height":"100px"}, 300);
    $("#BgCFLog").html("<img src='Resources/Images/Loader02.gif'/>");

    $.post($("#EnableBackgroundCrossfadeForm").attr("action"),
               $("#EnableBackgroundCrossfadeForm").serializeArray(),
               function(data){
                    if(data == "ENABLED"){
                        $("#BgCFLog").html("Background Crossfading enabled!");
                        $( "#BgCFdisable" ).removeAttr("disabled");
                        $( "#BgCFdisable" ).switchClass( "DisableD_Button", "DisableButton", 1000, "easeInOutQuad" );
                        $( "#BgCFenable" ).attr("disabled", "disabled");
                        $( "#BgCFenable" ).switchClass( "EnableButton", "DisableD_Button", 1000, "easeInOutQuad" );
                    }
               });
    $("#EnableBackgroundCrossfadeForm").submit(function(){
        return false;
    });
});

主要思想是，如果我将脚本放置在body中INDEX.php文件(具有表单的位置)末尾的<script></script>标记之间，则可以完美地实现此目的.换句话说，这仅适用于jQuery脚本是内部"脚本且未从外部*.js文件加载的情况.

The main idea is that this work perfect if I put the script between <script></script> tags at the end of my INDEX.php file (where I have the forms) in the body. With other words this works just if the jQuery script is "internal" and not loaded from and external *.js file.

如果从外部加载，提交表单会将我重定向到BgCFenable.php/BgCFdisable.php，而不是保留在INDEX.php页面上，我需要在该页面上显示结果数据.

If is loaded externally, submiting the form will redirect me to the BgCFenable.php/BgCFdisable.php instead of remaining on the INDEX.php page, where I need the resulted data to be displayed.

如何使这项工作从外部加载脚本而无需在提交时进行重定向?

How can I make this work loading the script externally without redirecting on submission?

推荐答案

我终于弄清楚了. 这些是以下形式:

I figured it out in the end. Those are the forms:

<form id='EnableBackgroundCrossfadeForm' onsubmit='return EnableBGCF();'>
    <input id='BgCFenable' class='DisableD_Button' type='submit' value='Enable' disabled='disabled'>
</form>

和:

<form id='DisableBackgroundCrossfadeForm' onsubmit='return DisableBGCF();'>
    <input id='BgCFdisable' class='DisableButton' type='submit' value='Disable'>
</form>

这是外部.js文件:

function EnableBGCF() {
    $("#BgCFLog").animate({"max-height":"100px"},300);
    $("#BgCFLog").html("<img src='Resources/Images/Loader02.gif'/>");

    $.ajax({type:'POST', url: 'BgCFenable.php', data:$('#EnableBackgroundCrossfadeForm').serialize(), success: function(response) {
        $('#BgCFLog').html("Background Crossfading <span style='color: #c9e52d'>enabled!</span>");
        $( "#BgCFdisable" ).removeAttr("disabled");
        $( "#BgCFdisable" ).switchClass( "DisableD_Button", "DisableButton", 1000, "easeInOutQuad" );
        $( "#BgCFenable" ).attr("disabled","disabled");
        $( "#BgCFenable" ).switchClass( "EnableButton", "DisableD_Button", 1000, "easeInOutQuad" );
    }});

    return false;
}

function DisableBGCF() {
    $("#BgCFLog").animate({"max-height":"100px"},300);
    $("#BgCFLog").html("<img src='Resources/Images/Loader02.gif'/>");

    $.ajax({type:'POST', url: 'BgCFdisable.php', data:$('#DisableBackgroundCrossfadeForm').serialize(), success: function(response) {
        $('#BgCFLog').html("Background Crossfading <span style='color: #e52d58'>disabled!</span>");
        $( "#BgCFdisable" ).attr("disabled","disabled");
        $( "#BgCFdisable" ).switchClass( "DisableButton", "DisableD_Button", 1000, "easeInOutQuad" );
        $( "#BgCFenable" ).removeAttr("disabled");
        $( "#BgCFenable" ).switchClass( "DisableD_Button", "EnableButton", 1000, "easeInOutQuad" );
    }});

    return false;
}

现在可以正常工作了.无论如何，谢谢您的帮助！

Now it's working. Thanks for help anyway!

这篇关于“返回假"从外部源加载脚本时，不适用于jQuery发布表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！