Попытка использовать href для отмеченной опции

Question

Когда я нажимаю опцию «Пожертвовать сейчас, плати позже» на моем веб-сайте (gesher-jds.org/giving), он переходит в нужное место, но не проверяет опцию «Оплатить позже» и открывает другойсформироваться. Я пробовал так много вещей, и ничего не работает. Я собираюсь добавить весь свой код шаблона (я знаю, что это долго), но я понятия не имею, в чем проблема и как ее исправить.

<?php /*  template name: Custom Form */ ?>
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="gesher-sections">
      <div class="gesher-section">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="row">
                <div class="col-md-8">
                  <h1><?php if (get_field('alternate_title')) the_field('alternate_title');
                          else the_title(); ?></h1>
                  <div class="image-div">
                    <?php the_post_thumbnail(); ?>
                  </div>
                  <br />
                  <div class="gesher-content">
                    <?php the_content(); ?>
                    <div class="new-goal-form">
                      <div class="donations">
                        <div class="row d-flex align-items-center">
                          <div class="multiplier col-lg-5">
                            <div class="whitebox">
                              <div class="heading">Your Donation</div>
                              <div class="row d-flex align-items-center">
                                <div class="col-md-2 costed">$ <div>USD</div>
                                </div>
                                <div class="col-md-10"><input type="text" id="sample-donation" /></div>
                              </div>

                            </div>
                            <div class="finaldonation">
                              <span>With Each Donation</span>
                              Gesher Jewish Day School Gets
                              <div class="multiplyresult">$0.00</div>
                            </div>
                            <a href="#myAnchor" rel="" id="anchor1">Donate Now</a>

                          </div>
                          <div class="col-lg-2 seperator">
                            OR
                          </div>
                          <div class="col-lg-5 multi-pay multiplier">
                            <div class="whitebox">
                              <div class="heading">Your Donation</div>
                              <div class="row d-flex align-items-center">
                                <div class="col-md-2 costed">$ <div>USD</div>
                                </div>
                                <div class="col-md-10"><input type="text" id="sample-donation2" /></div>
                              </div>

                            </div>
                            <div class="finaldonation">
                              <span>With Each Donation</span>
                              Gesher Jewish Day School Gets
                              <div class="multiplyresult2">$0.00</div>
                            </div>
                            <a href="#myAnchor" rel="" id="anchor1">Donate Now, Pay Later</a>


                            <!--<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
        <h3 class="modal-title" id="exampleModalLongTitle">Please Fill Following Information If You Want To Pay Later</h3>
      </div>
      <div class="modal-body">
        <?php echo do_shortcode('[contact-form-7 id="2703" title="Pay Later Form"]'); ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
</div>
</div>
</div>-->
                          </div>
                        </div>
                      </div>
                      <div name="myAnchor" id="myAnchor">
                        <?php
                            $valueform = get_field("form_short_code");
                            echo do_shortcode($valueform);
                            ?>
                      </div>
                    </div>

                  </div>
                </div>
                <div class="col-md-4 statstics">
                  <div class="time-remaining">
                    <h5>Time Remaining</h5>
                    <div class="clockit">
                      <div class="row bt">
                        <div class="col-6" id="days"></div>
                        <div class="col-6" id="hours"></div>
                      </div>
                      <div class="row tb">
                        <div class="col-6" id="minutes"></div>
                        <div class="col-6" id="seconds"></div>
                      </div>
                      <div class="dot"></div>
                    </div>
                  </div>
                  <?php $valueid = get_field("form_id"); ?>
                  <?php echo do_shortcode('[give_goal id="' . $valueid . '" show_text="true" show_bar="true"]') ?>
                  <div class="goalcompletion">
                    &nbsp;
                  </div>

                  <div class="donors_info">
                    <div class="totalenteries"></div>
                    <?php
                        $valueid = 2727;
                        //Get donors based on forms IDs (can be single or multiple forms)
                        if (function_exists('give_get_payments')) {
                          $args = array(
                            'give_forms' => $valueid,
                            'number' => -1,
                          );
                          $donations = give_get_payments($args);

                          echo "<table id='dtab'>";
                          echo "<thead>";
                          echo "<th align='center'>" . 'Name' . "</th>";
                          echo "<th align='center'>" . 'Amount' . "</th>";
                          echo "</thead>";
                          echo "<tbody>";
                          $donors = array();
                          $dtmp = array(); //tmp array
                          foreach ($donations as $donation) {
                            //Now get donor information from this donation ("customer" aka "donor")
                            $customer_id = give_get_payment_customer_id($donation->ID);
                            $customers  = new Give_Customer($customer_id);
                            $nameis = $customers->name;

                            $amt = get_post_meta($donation->ID, '_give_payment_total', false);
                            $donationAll = 0;
                            foreach ($amt as $key => $value) {
                              $donationAll = $donationAll + $value;
                            }
                            //Write a tmp array with name as key and donation as value
                            if (array_key_exists($nameis, $dtmp)) {
                              //name already exists -> add donation value
                              $dtmp[$nameis] = $dtmp[$nameis] + $donationAll;
                            } else {
                              //name is not in the array -> new array: key name -> donation
                              $dtmp[$nameis] = $donationAll;
                            }

                            $donors[] = $nameis;
                          }

                          foreach ($dtmp as $key => $value) {
                            //iterate the tmp array
                            echo "<tr class='select'>";
                            echo "<td align='left'>" . $key . "</td>";
                            echo "<td align='center'>" . $purchaseis = "$" . $value . "</td>";
                            echo "</tr>";
                          }

                          echo "</tbody>";
                          echo "</table>";
                        }
                        ?>
                  </div>


                  <div class="time-remaining">
                    <h5>Share With Your Friends</h5>
                    <div class="slinks">
                      <a onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>', 'Facebook Share', 'width=400,height=400')" target="popup" class="thisa" href="javascript:"> <i class="fab fa-facebook-square"></i> </a>
                      <a onclick="window.open('https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>', 'Twitter Share', 'width=400,height=400')" class="thisa" target="popup" href="javascript:"> <i class="fab fa-twitter-square"></i> </a>
                      <a onclick="window.open('https://www.linkedin.com/cws/share?url=<?php the_permalink(); ?>', 'Linked In Share', 'width=400,height=400')" class="thisa" target="popup" href="javascript:"> <i class="fab fa-linkedin"></i> </a>
                      <a onclick="window.open('https://plus.google.com/share?url=<?php the_permalink(); ?>', 'Google Plus Share', 'width=400,height=400')" class="thisa" target="_blank" href="javascript:"><i class="fab fa-google-plus-square"></i> </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<?php endwhile;
endif; ?>


<script>
  jQuery(document).ready(function() {
    var donationPercentage = jQuery('.give-progress-bar').attr('aria-valuenow');
    if (donationPercentage < 26) {
      jQuery(".goalcompletion").html('<img src="https://www.gesher-jds.org/wp-content/themes/gesher/img/goal1.png" class="img-responsive" />');
    } else if (donationPercentage > 25 || donationPercentage < 51) {
      jQuery(".goalcompletion").html('<img src="https://www.gesher-jds.org/wp-content/themes/gesher/img/goal2.png" class="img-responsive" />');
    } else if (donationPercentage > 50 || donationPercentage < 76) {
      jQuery(".goalcompletion").html('<img src="https://www.gesher-jds.org/wp-content/themes/gesher/img/goal3.png" class="img-responsive" />');
    } else if (donationPercentage > 75 || donationPercentage < 100) {
      jQuery(".goalcompletion").html('<img src="https://www.gesher-jds.org/wp-content/themes/gesher/img/goal4.png" class="img-responsive" />');
    } else if (donationPercentage == 100) {
      jQuery(".goalcompletion").html('<img src="https://www.gesher-jds.org/wp-content/themes/gesher/img/goal5.png" class="img-responsive" />');
    }
  });
</script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script>
  jQuery(document).ready(function() {
    var table = jQuery('#dtab').DataTable({
      "paging": false,
      "info": false,
      "scrollY": "400px",
      "scrollCollapse": true,
    });
    var trows = table.rows('.select').count();
    jQuery(".totalenteries").html(trows + ' DONORS DONATED TO THIS CAUSE');

    jQuery("#sample-donation").keyup(function() {
      var keyValue = jQuery(this).val() * 2;
      var keyValueOriginal = jQuery(this).val();
      console.log(keyValue);
      jQuery(".multiplyresult").html("$" + keyValue + ".00");



      if (jQuery('#give-amount').length > 0) {
        jQuery('#give-amount')
          .val(keyValueOriginal)
          .trigger('blur');
      }

      /*jQuery("#give-amount").attr("value" , keyValueOriginal + ".00");
      jQuery("#give-amount").attr("data-amount" , keyValueOriginal);
      jQuery(".give-final-total-amount").html(keyValueOriginal + ".00");
      jQuery(".give-final-total-amount").attr("data-total" , keyValueOriginal);
      jQuery("input[name=give-price-id]").val(0);*/
    });
    jQuery('.anchor2').click(function() {
      jQuery('#give-card-number-wrap-2676 input').removeAttr('required');
      jQuery('#give-card-cvc-wrap-2676 input').removeAttr('required');
      jQuery('#give-card-name-wrap-2676 input').removeAttr('required');
      jQuery('.card-expiration input').removeAttr('required');
      jQuery('#give_cc_fields-2676').hide();
    });
    jQuery(function($) {
      $(".give-donation-level-btn").on('click tap touchstart', function() {
        var amount = $(this).val();
        //var amountarr = amount.split(".");
        //amount = amountarr[0];
        $('#sample-donation').val(amount);
        var keyValue = $(this).val() * 2;
        var keyValueOriginal = $(this).val();
        console.log(keyValue);
        $(".multiplyresult").html("$" + keyValue + ".00");
        /*alert(keyValueOriginal);

        $("#give-amount").attr("value" , keyValueOriginal + ".00");
        $("#give-amount").attr("data-amount" , keyValueOriginal);
        $(".give-final-total-amount").html(keyValueOriginal + ".00");
        $(".give-final-total-amount").attr("data-total" , keyValueOriginal);*/
      });

    });
    jQuery(document).on('click', 'a[href^="#"]', function(event) {
      event.preventDefault();

      jQuery('html, body').animate({
        scrollTop: jQuery(jQuery.attr(this, 'href')).offset().top
      }, 500);
    });
    //jQuery('#give-donation-level-button-wrap').insertBefore('.donations');

  });
</script>

<script>
  // Set the date we're counting down to
  var countDownDate = new Date("<?php the_field('donation_timer'); ?>").getTime();

  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("days").innerHTML = "<b>" + days + "</b>" + " Days";
    document.getElementById("hours").innerHTML = "<b>" + hours + "</b>" + " Hours";
    document.getElementById("minutes").innerHTML = "<b>" + minutes + "</b>" + "  Mins";
    document.getElementById("seconds").innerHTML = "<b>" + seconds + "</b>" + " Sec";

    // If the count down is over, write some text 
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo").innerHTML = "EXPIRED";
    }
  }, 1000);
</script>

<script>
  jQuery("#sample-donation2").keyup(function() {
    var keyValue = jQuery(this).val() * 2;
    var keyValueOriginal = jQuery(this).val();
    console.log(keyValue);
    jQuery(".multiplyresult2").html("$" + keyValue + ".00");
    jQuery("#give-amount").attr("value", keyValueOriginal + ".00");
    jQuery("#give-amount").attr("data-amount", keyValueOriginal);
    jQuery(".give-final-total-amount").html(keyValueOriginal + ".00");
    jQuery(".give-final-total-amount").attr("data-total", keyValueOriginal);

    if (jQuery('#give-amount').length > 0) {
      jQuery('#give-amount')
        .val(keyValueOriginal)
        .trigger('blur');
    }

    /*jQuery("#give-amount").attr("value" , keyValueOriginal + ".00");
    jQuery("#give-amount").attr("data-amount" , keyValueOriginal);
    jQuery(".give-final-total-amount").html(keyValueOriginal + ".00");
    jQuery(".give-final-total-amount").attr("data-total" , keyValueOriginal);
    jQuery("input[name=give-price-id]").val(0);*/

  });
</script>
<style>
  ul#give-donation-level-button-wrap li:last-child {
    display: none;
  }
</style>

<?php get_footer(); ?>

Answer 1

Вам нужно обновить несколько вещей, чтобы он заработал:

Первое обновление:

 <a href="#myAnchor" rel="" id="anchor1">Donate Now, Pay Later</a>

до

 <a href="#myAnchor" rel="" id="payLater">Donate Now, Pay Later</a>

Затем присоедините кщелкните прослушиватель для элемента payLater id

jQuery("#payLater").click(function(){
  document.getElementById('give-gateway-offline-2727-1').click();
});

give-gateway-offline-2727-1 - это идентификатор радиовхода опции позже оплаты