将提交按钮作为子项的按钮

Question

应用程序显示一个包含表单元素的 html 页面。该表单有几个提交按钮。其中一个是标题为“关闭交易”的按钮。当用户单击此按钮时，会出现一些上下文菜单。上下文菜单有“未提交”、“价格太高”、“其他”等选项。单击一个选项应该提交表单（就像提交按钮一样）。后端需要知道用户点击了其中一个选项（而不是其他提交按钮）以及哪个选项。

如何实现？

我找到了一个 jquery ui split button example，但它没有提供所需的功能。例如，不需要两个按钮（一个带有文本，一个带有箭头） - 只有一个行为 - 显示上下文菜单。另外，我不明白如何制作提交表单的项目。

我试图找到其他东西，但没有找到足够接近要求的东西。

Answer 1

从您链接到的JQuery UI Split Button Widget 开始，这里有一些调整，以使按钮在单击时提供可供选择的选项，并且在单击选项时将这些单击（按钮和列表项）发送到服务器通过表单 POST。

HTML：

<form id="deal_form">
    <input type="hidden" name="submit_action" value=""/>
    <input type="hidden" name="submit_type"   value=""/>
</form>
<div>
  <div id="submit_actions">
    <button id="close_deal">Close Deal</button>
  </div>
  <ul>
    <li>Not Submitted</li>
    <li>Price Too High</li>
    <li>Other</li>
  </ul>
</div>

JavaScript：

$(function() {
    $( "#close_deal" )
    .click(function(evtCD) {
        var menu = $( this ).parent().next().show().position({
            my: "left top",
            at: "left bottom",
            of: this
        });
        $("#deal_form input[name='submit_action']").val(evtCD.target.innerHTML);
        $( document ).one( "click", function(evtDOC) {
            menu.hide();
            if ( 'LI' === evtDOC.target.tagName ) {
                $("#deal_form input[name='submit_type']").val(evtDOC.target.innerHTML);
                $("#deal_form").submit();
            }
        });
        return false;
    })
    .parent()
    .buttonset()
    .next()
    .hide()
    .menu();
});

当然，您可以向表单添加更多输入，这些输入可以在单击按钮和列表项之前填写，并且这些值会随表单提交一起发送。

JSFiddle with it here.

Answer 2

它可能会发送某种 ajax 帖子或获取请求。我一直这样做是为了过滤器等。

 
$('#btn1').click(function(){
$.post( "pages/somepage.php?view", { 
    id: $(this).attr('data-rel')
    }).done(function( data ) {
    $(".right-side").html( data );
});
});

$('#btn2').click(function(){
 $.post( "pages/somepage.php?delete", { 
    id:  $(this).attr('data-rel')
    }).done(function( data ) {
    $(".right-side").html( data );
});
});

<form name="d" >
  <button id="btn1" data-rel="1" >Do something</button>
  <button id="btn2" data-rel="2" >Do something else</button>
 </form>