我有一个表单,其中包含一个免费选项和一个付费选项。
如果用户选择了一个付费选项,我想要显示一个不同于如果他们按下免费选项的按钮。
形式:
<form method=POST>
<input type="radio" name="plan" value="1days" required="required"> 1 day (free)
<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)
<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
按钮
您可以直接在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)
<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>