表单目标_blank在新页面和当前页面上都提交

Question

我正在使用“提交”按钮和“预览”按钮设置表单。

提交按钮一切正常。 但是，“预览”按钮确实确实会打开带有预览的新页面，但它还会提交给实际表单页面上的同一预览，这不是我想要的，因为用户会丢失所有工作数据。

允许这样做的JQuery代码如下：

<script type="text/javascript">
jQuery(document).ready(function ($) {
$( ":button" ).click(function(){
    var url = $(this).attr('data-url');
    if(url=="{{ URL::to('customdownloadpage/preview') }}") {
        $('#formCustom').target = "_blank";
    }
    $('#formCustom').attr('action',url);   
    $('#formCustom').submit();
});
});
</script>

按钮的HTML如下：

<button data-url="{{ URL::to('customdownloadpage/new') }}" class="btn btn-primary">I'm Finished</button>
<button data-url="{{ URL::to('customdownloadpage/draft') }}" class="btn btn-primary">Save Draft</button>
<button style="float:right" data-url="{{ URL::to('customdownloadpage/preview') }}" class="btn btn-default">Preview</button>

为什么表单提交两次（在_blank页上和在自己上）？

Answer 1

使预览按钮成为锚标记而不是按钮。 按钮似乎总是充当表单内的提交触发器，因此，如果您将标记与btn类一起使用，则按钮外观不会包含所有事件。

Answer 2

尝试阻止默认提交：

$( ":button" ).click(function(e){
    var url = $(this).attr('data-url');
    if(url=="{{ URL::to('customdownloadpage/preview') }}") {
        $('#formCustom').target = "_blank";
        e.preventDefault();
    }
    $('#formCustom').attr('action',url);   
    $('#formCustom').submit();
});