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();
});

Form Target _blank在新页面和当前页面上提交

2 个答案: