To start, I am a beginner that has started working with my employer on their website. Adding small functions and features here and there. The issue I am coming across is, I am trying to add a reCaptcha to one of our payment pages and when I test the code taken directly from the production site in the developer environment there are features that no longer work. There are radio buttons that drop down when selecting a payment option for credit or debit to add the additional payment information that no longer works when on the developer site. This is the page I am working on: here This is all before even adding the CAPTCHA. That part I did not have a problem with, it is matching the current functionality. I need it to work on the dev site before pushing changes to production. My company currently uses Interchange web-based application server. Here is some of the code:
$(document).ready(function(){
//payment type check
var payType = $('input[name=paymentType]:checked', '#paymentForm').val();
if( payType == null )
{
alert('You have not selected a Payment Type')
return false;
}
//credit card check
if( payType == 'credit' ){
if(IsEmpty(form.cc_type))
{
alert('You have not entered a Credit Card Type')
form.cc_type.focus();
return false;
}
if(IsEmpty(form.ccnum))
{
alert('You have not entered a Credit Card Number')
form.ccnum.focus();
return false;
}
if(IsEmpty(form.ccmo))
{
alert('You have not entered a Credit Card Expiration Month')
form.ccmo.focus();
return false;
}
if(IsEmpty(form.ccyr))
{
alert('You have not entered a Credit Card Expiration Year')
form.ccyr.focus();
return false;
}
if(IsEmpty(form.cvv2_number))
{
// alert('You have not entered the Credit Card CVV2')
// form.cvv2_number.focus();
// return false;
}
}
//checking account check
if( payType == 'check' ){
var chkType = $('input[name=checkingType]:checked', '#paymentForm').val();
if( chkType == null )
{
alert('You have not selected a Checking Type')
return false;
}
if( !form.aba.value.match(/^\d{9}$/) )
{
alert('Checking Routing Number must be 9 digits')
form.aba.focus();
return false;
}
else{
var n=form.aba.value.split('');
var chkSum = ( 3 * (parseInt(n[0]) + parseInt(n[3]) + parseInt(n[6])) +
7 * (parseInt(n[1]) + parseInt(n[4]) + parseInt(n[7])) +
(parseInt(n[2]) + parseInt(n[5]) + parseInt(n[8]))) % 10;
if( chkSum != 0 ){
alert('Checking Routing Number is invalid')
form.aba.focus();
return false;
}
}
if(IsEmpty(form.account))
{
alert('You have not entered a Checking Account Number')
form.account.focus();
return false;
}
}
});<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>var submitted = false;
$(document).ready(function(){
try {
$('#item_1_cost').priceFormat({
prefix: '',
thousandsSeparator: ''
});
} catch (e) { console.log(e); }
$('#item_1_cost').val('[scratch form-item_1_cost]');
$('.trimMe').focusout(function(){
$(this).val( $.trim($(this).val()) );
});
var updateBilling = function () {
if (!$("#sameAsShipping").is(":checked")) { return }
$("#address").val( $("#saddr").val() );
$("#city").val( $("#scity").val() );
$("#state").val( $("#sstate").val() );
$("#zip").val( $("#szip").val() );
}
$('.paymentTypeRadio').change(function(){
$('#paymentCredit').hide();
$('#paymentCheck').hide();
var payType = $('input[name=paymentType]:checked', '#paymentForm').val();
if(payType == "credit") {
$('#pass_action').val('iTransact');
document.paymentForm.action = "https://secure.paymentclearing.com/cgi-bin/rc/ord.cgi";
$('#paymentCredit').show();
$('#aba').val('');
$('#account').val('');
$('#account_source').val('');
} else if( payType == "check" ){
$('#pass_action').val('@@MV_PAGE@@');
document.paymentForm.action = "https://__SERVER_NAME__/@@MV_PAGE@@.html";
$('#paymentCheck').show();
$('#ccnum').val('');
$('#ccmo').val('');
$('#ccyr').val('');
$('#cvv2_number').val('');
}
});
$('.patientGroup').keyup(function(){ updateBilling() });
$('.patientGroup').change(function(){ updateBilling() });
$("#sstate").val("[scratch form-sstate]");
$("#state").val("[scratch form-state]");
// Add onclick handler to checkbox w/id checkme
$("#sameAsShipping").click(function(){
// If checked
if ($("#sameAsShipping").is(":checked")) {
$(".billingGroup").attr("readonly", true);
$("#first_name").val( $("#sfname").val() );
$("#last_name").val( $("#slname").val() );
updateBilling();
} else {
$(".billingGroup").val('');
$("#first_name").val('');
$("#last_name").val('');
$(".billingGroup").removeAttr("readonly");
}
});
}); // document ready
var pop_window;
function popWin(pop_url) {
pop_window = open(pop_url, 'package_info',',width=500,height=450,scrollbars=yes,resizable=yes');
}
function IsEmpty(aTextField) {
if ((aTextField.value.length==0) || (aTextField.value==null)) return true;
return false; // no need for else as if the statment is true this line will not run anyway
}
function ValidateForm(form) {
if( submitted == true ) {
alert("You have already submitted. Please wait while the page processes. Thank you.");
return false;
}
}<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="mybinsonsform" style="width: 680px;">
<input type="text" name="ccnum" id="ccnum" class="trimMe" VALUE="" size="30" maxlength="20">
</div>
<div class="mybinsonsform" style="width: 680px;">
<select name="ccmo" id="ccmo">
<option value="">Month</option>
<option value="January">01 January</option>
<option value="February">02 February</option>
<option value="March">03 March</option>
<option value="April">04 April</option>
<option value="May">05 May</option>
<option value="June">06 June</option>
<option value="July">07 July</option>
<option value="August">08 August</option>
<option value="September">09 September</option>
<option value="October">10 October</option>
<option value="November">11 November</option>
<option value="December">12 December</option>
</select>
<select name="ccyr" id="ccyr" style="width:70px;">
<option value="">Year</option>
</select>
</div>
<div class="mybinsonsform" style="width: 680px;">
<input type="text" name="cvv2_number" id="cvv2_number" class="trimMe" value="" size="5" maxlength="5">
<a href="[area href=special/cvv_pop]" target="package_info" onclick="popWin('[area href=special/cvv_pop]'); return false;">
<small>Where is it?</small>
</a>
</div>
<!-- Checking information -->
<div id="paymentCheck" style="display:none;">
<div class="mybinsonsform" style="width: 680px;">
<input type="radio" class="checkingTypeRadio" name="checkingType" value="acctChecking"> Checking Account
<input type="radio" class="checkingTypeRadio" name="checkingType" value="acctSavings"> Savings Account
</div>
<div class="mybinsonsform" style="width: 680px;">
<input type="text" name="aba" id="aba" class="trimMe" VALUE="" size="10">
</div>
<div class="mybinsonsform" style="width: 680px;">
<input type="text" name="account" id="account" class="trimMe" VALUE="" size="10">
</div>
</div>If there is any more information I can provide please let me know. I appreciate any assistance! Thank you in advance! -Tim
Are you sure that JQuery is being loaded? The piece of code responsible for showing/hiding the payment type fields is this:
It's using JQuery so perhaps it's not being loaded locally. Look for 404 errors in your console, or errors along the lines of
$ is not a function.