仅以可见形式发送数据

Question

我有两个包含相同输入字段的div。当我在两个div字段中输入vales时，所有值都会被提交。我想要的是，只有所选div的值（使用单选按钮）才能通过。任何帮助将不胜感激： - ）

＆＃13;

＆＃13;

$(document).ready(function() {

  console.log('called');

  $('input[type=radio][name=cancel_policy]').change(function() {
    if (this.value == '0') {
      $("#fixedPolicyDiv").css("display", "block");
      $("#percentagePolicyDiv").css("display", "none");
      $("#percentagePolicyDiv").get(0).reset();

    } else if (this.value == '1') {
      $("#fixedPolicyDiv").css("display", "none");
      $("#fixedPolicyDiv").get(0).reset();
      $("#percentagePolicyDiv").css("display", "block");
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<label class="custom-control custom-control-primary custom-radio">
  <input class="custom-control-input" type="radio" name="cancel_policy" value="0"> <span class="custom-control-indicator"></span>
  <span class="custom-control-label">Fixed price</span> 
</label>

<label class="custom-control custom-control-primary custom-radio">
  <input class="custom-control-input" type="radio" name="cancel_policy" value="1"> <span class="custom-control-indicator"></span>
  <span class="custom-control-label">Percentage wise</span> 
</label>

<div id="fixedPolicyDiv" style="display:none;">
  <div class="form-group">
    <div class="col-lg-11 col-lg-offset-1">
      <div class="table-responsive">
        <table class="table" id='cancel_tbl'>
          <tr>
            <td width='30%'>Days</td>
            <td width='30%'>Amount</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>
              <input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
            </td>
            <td>
              <input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation amount" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
            </td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td colspan="6" align="center">
              <input type="button" value="Add More" id="cancel_addmorebtn1" class="btn btn-outline-info">
            </td>
          </tr>
        </table>

      </div>
    </div>
  </div>
</div>


<div id="percentagePolicyDiv" style="display:none;">
  <div class="form-group">
    <div class="col-lg-11 col-lg-offset-1">
      <div class="table-responsive">
        <table class="table" id='cancel_tb2'>
          <tr>
            <td width='30%'>Days</td>
            <td width='30%'>Percentage</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>
              <input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
            </td>
            <td>
              <input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation percentage" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
            </td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td colspan="6" align="center">
              <input type="button" value="Add More" id="cancel_addmorebtn2" class="btn btn-outline-info">
            </td>
          </tr>
        </table>

      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将disabled属性添加到您不想发送的输入中。 例如：

$("#percentagePolicyDiv").find('input').prop('disabled');

Answer 2

如果reset()不仅是您接受的JS方法，我们可以通过设置输入字段的值来实现：

＆＃13;

＆＃13;

$(document).ready(function() {

  console.log('called');

  $('input[type=radio][name=cancel_policy]').change(function() {
    if (this.value == '0') {
      $("#percentagePolicyDiv").find('input').val('');

      $("#fixedPolicyDiv").css("display", "block");
      $("#percentagePolicyDiv").css("display", "none");

    } else if (this.value == '1') {

      $("#fixedPolicyDiv").find('input').val('');

      $("#fixedPolicyDiv").css("display", "none");
      $("#percentagePolicyDiv").css("display", "block");
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<label class="custom-control custom-control-primary custom-radio">
  <input class="custom-control-input" type="radio" name="cancel_policy" value="0"> <span class="custom-control-indicator"></span>
  <span class="custom-control-label">Fixed price</span> 
</label>

<label class="custom-control custom-control-primary custom-radio">
  <input class="custom-control-input" type="radio" name="cancel_policy" value="1"> <span class="custom-control-indicator"></span>
  <span class="custom-control-label">Percentage wise</span> 
</label>

<div id="fixedPolicyDiv" style="display:none;">
  <div class="form-group">
    <div class="col-lg-11 col-lg-offset-1">
      <div class="table-responsive">
        <table class="table" id='cancel_tbl'>
          <tr>
            <td width='30%'>Days</td>
            <td width='30%'>Amount</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>
              <input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
            </td>
            <td>
              <input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation amount" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
            </td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td colspan="6" align="center">
              <input type="button" value="Add More" id="cancel_addmorebtn1" class="btn btn-outline-info">
            </td>
          </tr>
        </table>

      </div>
    </div>
  </div>
</div>


<div id="percentagePolicyDiv" style="display:none;">
  <div class="form-group">
    <div class="col-lg-11 col-lg-offset-1">
      <div class="table-responsive">
        <table class="table" id='cancel_tb2'>
          <tr>
            <td width='30%'>Days</td>
            <td width='30%'>Percentage</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>
              <input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
            </td>
            <td>
              <input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation percentage" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
            </td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td colspan="6" align="center">
              <input type="button" value="Add More" id="cancel_addmorebtn2" class="btn btn-outline-info">
            </td>
          </tr>
        </table>

      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

否则，您应该为<form>元素实现所需的ID。

formObject.reset（）是FORM-object的JS方法