仅发送不可见形式的数据答案

【问题标题】：Send data out of visible form only仅发送不可见形式的数据
【发布时间】：2017-02-06 01:25:11
【问题描述】：

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

$(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");
    }
  });

});

<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>

【问题讨论】：

首先您应该向我们提供您的无线电元素，然后您可以制作两个表格并在序列化过程中选择其中一个。您始终可以使用:visible 选择器仅获取可见元素（它可能与<form>-element 相同。
<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>
与@Daniel 的形式相同
这不是一种形式。表单首先是<form> 标签。

标签： javascript jquery html css radio-button

【解决方案1】：

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

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

【讨论】：

或者用:visible属性扩展选举器
@Daniel 你能举个例子吗？
检查我上面的答案。如果您需要，我将扩展我的代码示例。
@HamzaChoudary 很高兴为您提供帮助。

【解决方案2】：

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

$(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");
    }
  });

});

<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>

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

formObject.reset() 是 FORM-object 的 JS 方法

【讨论】：