检查选择了哪一个单选选项，并根据该选项显示一个按钮

Question

我有一个表单，其中包含一个免费选项和一个付费选项。

如果用户选择了一个付费选项，我想要显示一个不同于如果他们按下免费选项的按钮。

形式：

<form method=POST>
    <input type="radio" name="plan" value="1days" required="required"> 1 day (free) &nbsp;
    <input type="radio" name="plan" value="7days" required="required"> 7 days  (£12.99)</p>
    <button type="submit" class="link button" display:block">Submit</button>
 </form>

我想要的是：

  <form method=POST>
    <input type="radio" name="plan" value="1days" required="required"> 1 day (free) &nbsp;
    <input type="radio" name="plan" value="7days" required="required"> 7 days  ($12.99)</p>
     // if radio value == "7days":
     <button type="submit" display:block">Pay 12.99 now </button>
     // else:
     <button type="submit" display:block">Submit</button>
 </form>

我不确定如何在用户完成表单时实时实现这一点，我假设它是Javascript，但我不确定如何实现？多谢了。

编辑：

12.99按钮会将用户带到付款处理程序，而另一个处理程序只需填写/提交表单即可。

编辑2：

这是我使用的支付处理器：

<form action="{% url 'charge' %}" method="post">
  {% csrf_token %}
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
          data-key="{{ key }}"
          data-description="Website Purchase"
          data-currency=usd
          data-amount="{{ price }}"
          data-locale="auto"></script>

    <button type="submit" class="link button" style="margin:auto;">COMPLETE THIS ORDER</button>
</form>

所以我真的必须用上面的表单替换支付12.99按钮

Answer 1

您可以直接在onclick函数中执行此操作：

  <form method=POST>
    <input type="radio" name="plan" value="1days" required="required" onclick="document.getElementById('s2').style.display ='none';document.getElementById('s1').style.display =''"> 1 day (free) &nbsp;
    <input type="radio" name="plan" value="7days" required="required" onclick="document.getElementById('s1').style.display ='none';document.getElementById('s2').style.display =''"> 7 days  ($12.99)</p>
     <button type="submit" display:block" id='s1'>Pay 12.99 now </button>
     <button type="submit" display:block" id='s2'>Submit</button>
 </form>