[英]how to hide credit card fields when PayPal is selected in business catalyst checkout
How to change the checkout page with simple css and/or javascript so when selecting the PayPal payment option the credit card fields hide and possibly pulls the submit button up under the PayPal button. 如何使用简单的CSS和/或javascript更改结帐页面,以便在选择PayPal付款选项时,信用卡字段会隐藏,并可能在PayPal按钮下方拉出Submit按钮。 Here is section of table code: 这是表代码的一部分:
<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>
So for a basic solution you can use jQuery to find out which input is selected, detect if it is the PayPal radio, and hide the credit card fields. 因此,对于基本解决方案,您可以使用jQuery找出选择了哪个输入,检测它是否为PayPal无线电,并隐藏信用卡字段。
Take a look at the fiddle . 看看小提琴 。
It will also show the fields if the user decided to input a credit card instead. 如果用户决定输入信用卡,它将也显示字段。
I wrapped the credit card tr
's in a class called .credit-cards
which jQuery just hides and shows this class. 我将信用卡tr
包裹在一个名为.credit-cards
的类中,jQuery只是隐藏并显示了该类。
Make sure to copy the html as well, as include the jQuery in your file. 确保也复制html,并在文件中包含jQuery。
PS: This is probably a duplicate question/answer. PS:这可能是重复的问题/答案。
Added this to script to hide CC when PayPal is selected: function ShowCCFields(val) { if (!document.getElementById('paymentdiv')) return; if (val != 1) document.getElementById('paymentdiv').style.display = 'none'; else document.getElementById('paymentdiv').style.display = 'inline'; }
添加到脚本中以在选择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'; }
function ShowCCFields(val) { if (!document.getElementById('paymentdiv')) return; if (val != 1) document.getElementById('paymentdiv').style.display = 'none'; else document.getElementById('paymentdiv').style.display = 'inline'; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.