如何在商业催化剂结账中选择PayPal时隐藏信用卡字段
how to hide credit card fields when PayPal is selected in business catalyst checkout
如何使用简单的css和/或javascript更改结账页面,以便在选择PayPal支付选项时,信用卡字段会隐藏,并可能将提交按钮拉到PayPal按钮下。这是表格代码的一部分:
<tr>
<td>
<input checked="checked" type="radio" name="PaymentMethodType" id="PaymentMethodType_1" value="1" /> Credit Card<br />
<input type="radio" name="PaymentMethodType" id="PaymentMethodType_5" value="5" /> PayPal<br />
</td>
</tr>
<tr>
<td><label for="CardName">Name on Card <span class="req">*</span></label><br />
<input type="text" name="CardName" id="CardName" class="cat_textbox" autocomplete="off" /></td>
</tr>
<tr>
<td><label for="CardType">Card Type <span class="req">*</span></label><br />
<select name="CardType" id="CardType" class="cat_dropdown">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
<option value="3">Discover</option>
<option value="4">American Express</option>
</select></td>
</tr>
<tr>
<td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
<input type="text" name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" /></td>
</tr>
<tr>
<td><label>Card Expiry <span class="req">*</span></label><br />
<select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select></td>
</tr>
<tr>
<td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
<input type="text" name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" /></td>
</tr>
<tr>
<td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label><br />
<input type="text" name="Amount" id="Amount" class="cat_textbox" /></td>
</tr>
<tr>
<td><input class="cat_button" type="submit" value="Submit" id="catwebformbutton" /></td>
</tr>
因此,对于基本解决方案,您可以使用jQuery来找出选择的输入,检测是否是PayPal电台,并隐藏信用卡字段。
看看小提琴。
如果用户决定输入信用卡,它还会显示字段。
我将信用卡tr
包装在一个名为.credit-cards
的类中,jQuery只是隐藏并显示了这个类。
确保也复制html,并在文件中包含jQuery。
附言:这可能是一个重复的问题/答案。
将此添加到脚本中,以在选择PayPal时隐藏CC:function ShowCCFields(val) {
if (!document.getElementById('paymentdiv'))
return;
if (val != 1)
document.getElementById('paymentdiv').style.display = 'none';
else
document.getElementById('paymentdiv').style.display = 'inline';
}
- 下拉选择可自动更改第二个下拉选择
- 如何使用jQuery选择下拉列表的值
- jquery点击函数select&取消选择
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 按照选项卡索引的顺序循环一个jQuery选择
- 在动态创建的元素上获取对特定选择器的引用
- AngularJS-在JSON选择器中使用变量名
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 获取选择框的状态
- d3基于用户选择动态更新节点
- 提交后保留下拉选择的值
- JQuery对动态创建的对象进行选择
- 无法在Ionic select中预先选择最后一个选项
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- jQuery自动完成阻止选择后聚焦
- PayPal按钮,允许客户为金额范围选择具有不同价格的产品数量
- HTML 选择语句和按钮不适用于PayPal
- 从表格中选择PayPal或Purchase Order
- 如何添加选项选择到PayPal JavaScriptButtons
- 如何在商业催化剂结账中选择PayPal时隐藏信用卡字段