0

I am making a default save card selection in my payment gateway. So, for that I am using jquery. On click of savecard I am able to make a default selection but when I click on proceed to pay it gives me error of please select the card.

I am not understanding whats wrong here.

Could someone help please?

if(window.innerWidth < 768 && $('.payment_desc .pay_section input[type=radio]').length !== 0){
                            $('.payment_desc .pay_section input[type=radio]').eq(0).prop('checked','checked');
                            // $('.payment_desc .pay_section input[type=radio]').eq(0).attr('checked',true);
                            $('.payment_desc .pay_section input[type=password]').eq(0).removeAttr("disabled");
                         }else if($('.payuSavedCards').length !== 0){
                            $('.payuSavedCards input[type=radio]').eq(0).prop('checked','checked');
                            $('.payuSavedCards input[type=password]').eq(0).removeAttr("disabled");
                        }
<div class="payuSavedCards clearfix" data-bind="click:$parent.checkEnableCvv.bind($data,$index())">
    <div class="payUSavedCards_wrapper">
      <div class="checkbox_card col-lg-1 col-md-1 col-sm-1 col-xs-1">
          <input type="radio" data-bind="attr:{class: 'savedCards_input-'+$index()}" name="savedCards" class="savedCards_input-0">
          <span></span>
          <span class="checkmarkboxCard"></span>
      </div>
      <div class="payUcardImg col-lg-3 col-md-3 col-sm-3 col-xs-3">
        <img data-bind="attr:{src: img}" src="/file/general/visa_cardtype.jpg">
      </div>
      <div class="payU_bankDetails col-lg-5 col-md-5 col-sm-5 col-xs-5">
        <span class="payU_bankname" data-bind="text:brand">visa</span>
        <span class="payU_cardNumber" data-bind="text:cardNo">XXXXX525</span>
      </div>
      <div class="payU_Cvv col-lg-3 col-md-3 col-sm-3 col-xs-3 hidden-xs hidden-sm">
        <input aria-required="true" type="password" class="27369282f20ad4fb1724ec28e6b5d340ad90c90d" name="CVV" placeholder="CVV" data-bind="event:{focus: $parent.ppSavedCardForm.cvvFieldFocused},enable: cardToken === $parent.cardToken(), value: cvv, attr:{class: cardToken}">
      </div>
      <div class="payU_Cvv col-lg-3 col-md-3 col-sm-3 col-xs-3 hidden-md hidden-lg">
        <input aria-required="true" type="password" class="27369282f20ad4fb1724ec28e6b5d340ad90c90d" name="CVV" placeholder="CVV" data-bind="event:{focus: $parent.ppSavedCardForm.cvvFieldFocused}, enable: cardToken === $parent.cardToken(),value: cvv, attr:{class: cardToken}" disabled="">
      </div>
        <span data-bind="attr:{class: 'cvvErrorMsg-'+cardToken+' text-danger'}" class="cvvErrorMsg-27369282f20ad4fb1724ec28e6b5d340ad90c90d text-danger"></span>
    </div>
  </div>
Trevor Reid
  • 3,310
  • 4
  • 27
  • 46
RAVI singh
  • 158
  • 2
  • 15
  • 4
    Don't mix jquery and knockout like this. It won't work. Use [`checked`](https://knockoutjs.com/documentation/checked-binding.html) binding to set the value to the radio button – adiga Apr 23 '19 at 11:57
  • @adiga thankyou but i think i have solved the issue – RAVI singh Apr 24 '19 at 13:28
  • Or write your own custom bindingHandler, where you implement your thirdparty application, like https://stackoverflow.com/questions/6612705/jquery-ui-datepicker-change-event-not-caught-by-knockoutjs you can also check dataFor and contextFor,these are methods to get the correct data from the context that is set by ko by calling elements for its ko context – Martea Apr 30 '19 at 09:40

0 Answers0