带有提交按钮作为子项的按钮

Question

该应用程序显示一个 html 页面，其中包含一个表单元素。该表单有几个提交按钮。其中之一是标题为 "Close deal" 的按钮。当用户单击此按钮时，会出现上下文菜单。上下文菜单有 "not submitted"、"price too high"、"other" 等选项。单击一个选项应提交表单（就像提交按钮一样）。后端需要知道用户点击了这些选项之一（而不是其他提交按钮）以及点击了哪一个。

如何实现？

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

我曾尝试寻找其他东西，但未能找到足够接近要求的任何东西ui。

Answer 1

它可能正在发送某种 ajax post 或获取请求。我一直在做过滤器等

 
$('#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>

Answer 2

从您链接到的 JQuery UI Split Button Widget 开始，这里有一些调整，使按钮在单击时为 select 提供选项，当单击选项时，这些单击（按钮和列表项）通过 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.

带有提交按钮作为子项的按钮

Button with submit buttons as subitems

html

javascript

forms

jquery

jquery-ui