html中的接受/拒绝按钮

Question

我正在尝试通过 html 中的表单元素接受或拒绝邀请。代码如下：

             <form method="POST">
             <input type="submit" name="accept" id="accept" value="Accept">
             <input type="submit" name="decline" id="decline" value="Decline">
             </form>  

所以每当我尝试接受或拒绝邀请时，接受或拒绝按钮应更改为接受或拒绝。 我可以使用javascript onclick属性来实现这一点。但是我对响应对象应该如何在express js的发布路由中处理这个感到困惑？？？我的发布路由应该做什么？ 当我点击接受或拒绝时，页面不应该重新加载，只有点击的按钮应该改变..

    response.send()
    response.redirect()

我的问题是我的响应对象应该包含什么方法才能实现上述目标（您可以将购物网站中的“添加到购物车”视为示例）。我该如何解决？

Answer 1

您可以轻松地为此使用 JQUERY。如果没有，那么我会为它发布一个 Pure javascript 解决方案。

阻止表单提交。使用event.preventDefault()

$("#accept").click(function(event) {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic ( Request to  express js endpoint )
    this.value = "Accepted"
});


$("#decline").click(function(event) {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
    this.value = "Declined"
});

我还没有测试过，但我相信它应该可以工作。

Answer 2

如果你只有一个提交，你可以这样做：

 <form name="myform" method="POST" onsubmit="onSubmit()";>
             <input type="submit" name="accept" id="accept" value="Accept">
  </form>  

function onSubmit(){
 document.myform.accept.value = 'Accepted';

}

但是，在您的情况下，有两个 submits，因此您应该使用其中的 onClick

  <form name="myform" method="POST" onsubmit="onSubmit()";>
                 <input type="submit" name="accept" id="accept" value="Accept" onclick="acceptFunction()">
<input type="submit" name="reject" id="reject" value="Accept" onclick="rejectFunction()">
    </form> 

function acceptFunction(){
 document.myform.accept.value  = "Accepted";
}
function rejectFunction(){
   document.myform.accept.value  = "Rejected";
}