Кнопка с кнопками отправки в качестве подпунктов

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>