Question

所以我有些东西可能看起来有点小但是这里有。

这都是使用jQuery

完成的

我有一个功能＆＃34; cont_refresh＆＃34;我用它来刷新页面内容等，其中包含一个AJAX请求，用于将变量传递给外部文档/脚本进行处理。

除此之外，我还有一个匿名函数，可以在表单提交时触发...这意味着完全不相关，不应该在此按钮上发生。

然而，在某些时候我运行＆＃34; cont_refresh＆＃34;触发提交功能，它似乎触发提交功能的时间点是我发出我的ajax请求。

最终发生的事情是我对ajax请求做出的，那个只是在服务器上运行一个函数的那个，第二个是提交我的表单......我不想让后者发生。< / p>

有两个按钮可以分别处理这两个东西，一个是另一个提交按钮，与此问题相关的不是提交按钮。

为什么呢？以及如何防止这种情况？

为什么这个小丑有两个功能基本上做同样的事情，但是我会优雅地请求你为...提出一个新帖子，这将是一个问题，为什么这个小丑有两个功能旋转。）

＆＃13;

/*
  This is what I want to run... it does but fails then.....(see below this function)
*/
function cont_refresh(form,params,url,e,modal){
    $(".ng-loading-container").toggleClass("ng-loading-container-show");
   
    if(modal === 'undefined'){
        modal = false;
    }
    var request = $.ajax({
        method: 'post',
        url: url,
        data: params,
        success: function(result){
            
          if(e !== '' && e !== 'undefined'){
                $(e).html(result);    
            } else {
                alert('Success');
            }
            
        },
        error: function(){
            alert('Page Error')
            $(".ng-loading-container").toggleClass("ng-loading-container-show");
        },
        }).fail(function() {
            alert( "Something went wrong!" );
            $(".ng-loading-container").toggleClass("ng-loading-container-show");
        })
    // end of cont_refresh()
}

/*
.... This runs. Which is not my intention!
*/

$('form').submit(function (e){
    e.preventDefault();
    submit_form(e.target);
    // there is an additional function that handles any submition from this point but have not included it as .
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Rightly or wrongly the intention here is to run a stored SQL procudure.<br>
<p>The reason the statements are stored in the db is so anyone (with access) can add and edit these statements or functions from my front end application.</p>

<form role="form" action="myscript.php" method="post">
  <input type="hidden" name="stp_tsk_id" id="stp_tsk_id" class="form-control" value="34">
  <div class="form-group col-md-12">
        <label for="stp_function">Function (SQL statement)</label>
        <textarea class="form-control" name="stp_function" id="stp_function" rows="3">SELECT * FROM SOME_TABLE</textarea>
</div>
<!-- this button should trigger only the function it is calling onclick -->
<button role="button" 
        class="btn btn-default btn-md"
        onclick="cont_refresh('',{'id':34},'app/handlers/process_steps.php')">
                Run this Step
        </button> 
  
 <!-- There is a second "submit" button but not relevent for this query -->
  <button role="submit" class="btn btn-default btn-md">Save</button>
 </form>

＆＃13;

Answer 1

好的，你可以尝试一下......

为您的表单添加ID

<form role="form" action="myscript.php" method="post" id="myForm">

但请随意使用ID名称更具创意......

将您的活动更改为

$('#myForm').submit(function (e){
    e.preventDefault();
    submit_form(e.target);
    // there is an additional function that handles any submition from this point but have not included it as .
});

看看是否有帮助。

Answer 2

您已全局添加了form.submit函数，显然会在页面刷新后调用，即在页面加载时调用。

在按钮点击事件或其他内容上添加 $（'form'）。submit（）功能。

您的ajax没有提交表单，因为全局功能 $（'form'）而提交，因此提交（）

$('form').submit(function (e){  // instead of form use here button click event
    e.preventDefault();
    submit_form(e.target);
    // there is an additional function that handles any submition from         this point but have not included it as .
});

Answer 3

答案与按钮有关。

我没有意识到通过使用HTML5按钮，我需要指定一种按钮类型以防止提交默认操作。

<button>This will Submit</button>
<button type="button">Will not Submit</button>

我感谢@TimBrownlaw＆amp; @Nitin指导我解决方案。

Ajax请求触发器提交....为什么？

3 个答案: