Question

我有这个单独的按钮，如果我单击第一个按钮，它将变为活动状态；同时，如果我单击第二个按钮，则第一个按钮将不处于活动状态，而第二个按钮将变为活动状态。我尝试的一个问题是，我无法在列表li中创建按钮，因为按钮的样式不同。

<div class="d-flex justify-content-between">
  <form action="grocery.php" method="POST">
    <div class="btn-change" role="group">
       <div class="btn-group" role="group">
          <button style="border-radius: 20px;" type="submit" class="btn btn-default" name="req" id="req">Purc Details</button>
        </div>
        <div class="btn-group" role="group">
           <button style="border-radius: 20px;" type="submit" class="btn btn-default" name="sold" id="sold">Cust Details</button>
         </div>
     </div>
  </form>
</div>

Answer 1

我不认为这是与php相关的问题。如果您想更改“活动”，则是在隐含地说您要更改按钮的样式或类吗？

如果是这种情况，那么这里有一个jquery侦听器，可以为一个按钮实现这种行为

$("#req_rep").click(function () { 
    $("#req_rep").attr("class", "class-of-active-button");
    // or you can $("#req_rep").css(property, value);

});

您还可以考虑更改提交类型，因此您无需提交表单即可查看页面上发生的情况，而只需刷新页面即可结束。

Answer 2

我不太确定您到底想要什么，我也真的看不到这种视觉效果的使用，因为当由于type="submit"而单击其中一个按钮时，表单将立即提交。 / p>

因此，我建议您不要再通过将其类型更改为button来使它们成为提交触发器，并创建一个实际上包含“详细信息”类型的隐藏类型输入。像这样：

<form id="grocery-form" ...>
  // ...
  <input name="details_type" type="hidden" />
  <div class="btn-group details-type" ...>
    <button type="button" class="btn ..." data-value="req">Purc Details</button>
    <button type="button" class="btn ..." data-value="sold">Cust Details</button>
  </div>
  // ...
  <button ...>Submit</button>
</form>

<script>
var form = document.getElementById("grocery-form"),
  detailsTypeButtons = form.querySelectorAll(".details-type button");

detailsTypeButtons.forEach(function(button) {
  button.onclick = function() {
    // Set the value to a field than can actually be submitted with the form
    form.details_type.value = this.getAttribute("data-value");

    // Removing class of active button on any of these buttons if there is
    detailsTypeButtons.forEach(function(button_) {
      button_.classList.remove("class-of-active-button");
    });

    // Adding class of active button on this button
    this.classList.add("class-of-active-button");
  };
});
</script>

希望有帮助！

单击时是否可以激活我的按钮？

2 个答案: