Question

在此代码中，当我更改复选框的值（即，如果我单击credit card复选框）然后显示<div class="creditcard">时会发生什么，如果我单击paypal然后单击{{1} }显示。

现在，当我选择信用卡然后单击“提交”按钮时，表单将不提交。如果我选中<div class="paypal">复选框并单击“提交”按钮，则不会再发生任何事情。我不明白为什么。

无论我选择paypal复选框还是credit card，如何提交表单？

paypal

$(document).ready(function() {
  $('input.payment').on('change', function() {
    $('input.payment').not(this).prop('checked', false);
  });

  $("#credit").click(function() {
    if ($(this).is(":checked")) {
      $(".creditcard").show();
      $(".paypal").hide();
    } else {
      $(".creditcard").hide();
      $(".paypal").show();
    }
  });

  $("#paypal").click(function() {
    if ($(this).is(":checked")) {
      $(".paypal").show();
      $(".creditcard").hide();
    } else {
      $(".paypal").hide();
      $(".creditcard").show();
    }
  });
});

Answer 1

您应该使用单选按钮而不是复选框。我还清理了您的代码，以使用一个事件处理程序。

我也进行了更新，因此可以根据需要动态设置适当的字段。

$(document).ready(function() {
  $('input.payment').on('change', function() {
       $("input[name='cardNumber']").prop("required",false);
       $("input[name='paypal_email']").prop("required",false);
       $(".creditcard").hide();
       $(".paypal").hide();
       
     if($(this).val() == "PayPal"){
         $(".paypal").show();
         $("input[name='paypal_email']").prop("required",true);
     }
     else{
         $("input[name='cardNumber']").prop("required",true);
         $(".creditcard").show();
     }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
  <div class="col-lg-7 mb--20 float-left">
    <div class="form-group">
      <label for="fname">Full Name</label>
      <input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
    </div>
  </div>
  <div class="col-lg-5 float-right">
    <div class="row">
      <div class="col-12">
        <div class="checkout-cart-total">
          <div class="col-md-6">
            <input checked type="radio" id="credit" class="payment" name="mode" value="credit card">
            <label for="credit">Credit Card</label>
          </div>
          <div class="col-md-6">
            <input type="radio" id="paypal" class="payment" name="mode" value="PayPal">
            <label for="paypal">Paypal</label>
          </div>
          <div class="creditcard" style="display:block;">
            <div class="form-group">
              <label for="cardNumber">CARD NUMBER</label>
              <input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" value="" />
            </div>
          </div>
          <div class="paypal" style="display:none;">
            <div class="form-group">
              <label for="paypal_email">Email ID</label>
              <input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" />
            </div>
          </div>
          <button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
        </div>
      </div>
    </div>
  </div>
</form>

在php中更改复选框时表单未提交

1 个答案: