时间戳

首页 > 解决方案 > 单选按钮不提交与数字字段存在

html - 单选按钮不提交与数字字段存在

问题描述

我正在尝试创建一个简单的 Web 表单，该表单由几个复选框按钮和一个数字字段组成。它是通过一个按钮提交的。由于某种原因，当数字输入框出现时，表单将提交 0.00。如果我在数字字段中输入一些内容，它将传递我输入的任何内容，但如果我选择其中一个数字并将输入字段留空，它会提交 0.00。我似乎无法弄清楚为什么。

如果我删除代码，一切正常。

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="paypal">
      <div class="donation_container">
        <input name="cmd" type="hidden" value="_donations"> 
        <input name="business" type="hidden" value="info@***.org"> 
        <input name="item_name" type="hidden" value="Donation">
        <input name="no_shipping" type="hidden" value="1"> 
        <input name="no_note" type="hidden" value="1"> 
        <input name="currency_code" type="hidden" value="USD"> 
        <input name="tax" type="hidden" value="0.00"> 
        <input name="lc" type="hidden" value="US"> 
        <input name="bn" type="hidden" value="PP-DonationsBF"> 
        <div class="donate_call_to_action">
          <div class="donate_call_to_action_text">Become ***
          </div>
        </div>
        <div class="donation_buttons">
          <label class="donation_label"> 
            <input name="amount" type="checkbox" value="1000.00">
            <div>$1000</div>
          </label>
          <label class="donation_label">
            <input name="amount" type="checkbox" value="500.00">
            <div>$500</div>
          </label>
          <label class="donation_label">
            <input name="amount" type="checkbox" value="100.00">
            <div>$100</div>
          </label>
          <label class="donation_label">
            <input name="amount" type="checkbox" value="50.00">
            <div>$50</div>
          </label>
          <div class="custom_donation">
            <i>$</i>
            <input name="amount" type="number">
          </div>
        </div>
      </div>
      <div class="donation_button">
        <button type="submit" formmethod="post" class="btn btn-primary" alt="PayPal - The safer, easier way to pay online!" name="submit">Donate</button> 
        <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt="" width="1" height="1" border="0">
      </div>
    </form>

更新：

事实证明，我只能提交一个带有 name=amount 属性的值，一次。输入 type=number 字段和复选框会导致捐赠按钮提交多个“金额”。即使输入框是空的，它也会提交一个空值，例如，amount=50.00&amount= 解决方法是一个小jQuery，关闭输入字段的name属性。如果输入字段为 0 或值的长度为 0，则脚本将去掉 name 属性。

<script>
      (function ($) {
        $(document).ready(function() {
          	$( "form" ).submit(function( event ) {
    			    alert($(this).serialize());
    			    event.preventDefault();
  			    });
        });
        $("#other_amount").removeAttr("name"); //on load, remove the name attribute. Default action.
        $( "#other_amount" ).blur(function() {
        	if(($(this).val().length == "0") || ($(this).val() == "0")){
          		$(this).removeAttr("name");
            } else {
            	$(this).attr("name", "amount");
            }
        });
      })(jQuery);
</script>

标签： htmlformscheckboxinputpaypal

解决方案

您的数字字段amount与复选​​框具有相同的名称。将数字字段的名称更改为唯一的名称。

<input name="othername" type="number">

编辑

我添加了一些 jquery，因此您可以看到它正在提交复选框和数字字段值。您提供的代码中一定有其他未显示的内容。

$(document).ready(function() {
   $( "form" ).submit(function( event ) {
    alert($(this).serialize());
    event.preventDefault();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="paypal">
  <div class="donation_container">
    <input name="cmd" type="hidden" value="_donations"> 
    <input name="business" type="hidden" value="info@***.org"> 
    <input name="item_name" type="hidden" value="Donation">
    <input name="no_shipping" type="hidden" value="1"> 
    <input name="no_note" type="hidden" value="1"> 
    <input name="currency_code" type="hidden" value="USD"> 
    <input name="tax" type="hidden" value="0.00"> 
    <input name="lc" type="hidden" value="US"> 
    <input name="bn" type="hidden" value="PP-DonationsBF"> 
    <div class="donate_call_to_action">
      <div class="donate_call_to_action_text">Become ***
      </div>
    </div>
    <div class="donation_buttons">
      <label class="donation_label"> 
        <input name="amount" type="checkbox" value="1000.00">
        <div>$1000</div>
      </label>
      <label class="donation_label">
        <input name="amount" type="checkbox" value="500.00">
        <div>$500</div>
      </label>
      <label class="donation_label">
        <input name="amount" type="checkbox" value="100.00">
        <div>$100</div>
      </label>
      <label class="donation_label">
        <input name="amount" type="checkbox" value="50.00">
        <div>$50</div>
      </label>
      <div class="custom_donation">
        <i>$</i>
        <input name="other_amount" type="number">
      </div>
    </div>
  </div>
  <div class="donation_button">
    <button type="submit" formmethod="post" class="btn btn-primary" alt="PayPal - The safer, easier way to pay online!" name="submit">Donate</button> 
    <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt="" width="1" height="1" border="0">
  </div>
</form>

推荐阅读