提交表单而不加载div

Question

如果未加载 div，我正在努力输入表单，我正在尝试的是，如果选择了“B 级或以下”选项，那么表单应该能够提交，如果选择了“A 级”然后下一个要加载的 div，然后是要提交的表单，

这是我的 php 表单

<div class="box box-primary">
      <?php if (isset($_POST['status'])) { ?>
        <div id="file_updated_box">
          <div class="alert alert-info alert-dismissible file_updated">
            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
            <h4><i class="icon fa fa-check"></i><?php echo $_POST['status']; ?></h4>
          </div>
        </div>
      <?php } ?>
      <div class="box-header with-border">
        <h3 class="box-title">Enter IMEI</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form method="post" action="sonim_harvesting.php">
        <div class="box-body">
          <div class="row">
            <div class="form-group col-md-6">
              <label for="imeinum">Job IMEI</label>
              <input class="form-control" autofocus autocomplete="off" id="imeinum" name="imeinum" value="<?php if (isset($_POST['imeinum'])) {
                                                                                                            echo $_POST['imeinum'];
                                                                                                          } ?>" name="imeinum" placeholder="Enter IMEI" type="text">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label">Device Power ON:</label>
            <div>
              <div class="radio">
                <label>
                  <input name="device_power" value="YES" type="radio" class="radio" required>
                  YES
                </label>
              </div>
              <div class="radio">
                <label>
                  <input name="device_power" value="NO" required type="radio" class="radio">
                  NO
                </label>
              </div>


            </div>
          </div>
          <div class="form-group grade">
            <label class="control-label">Device Grade:</label>
            <div>
              <div class="radio">
                <label>
                  <input name="device_grade" id="GradeA" value="A" type="radio" class="radio" required>
                  Grade A
                </label>
              </div>
              <div class="radio">
                <label>
                  <input name="device_grade" value="B or Less" required type="radio" class="radio">
                  Grade B or Less
                </label>
              </div>


            </div>
          </div>
          <div class="form-group function" style="display:none">
            <label class="control-label">Is Display Functional? :</label>
            <div>
              <div class="radio">
                <label>
                  <input name="function" value="YES" type="radio" class="radio" required>
                  YES
                </label>
              </div>
              <div class="radio">
                <label>
                  <input name="function" value="NO" required type="radio" class="radio">
                  NO
                </label>
              </div>


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


        <!-- /.box-body -->
        <div class="box-footer">
          <input type="submit" class="btn btn-primary" name="jbSubmit" value="Submit" />
        </div>
      </form>
    </div>

这是我的js代码

  $(document).ready(function() {
  $('.grade').hide()
  $('.function').hide()

  $('input[type="radio"]').click(function() {
    $('.grade').show();
  });
  $('.grade').click(function() {
    if ($('#GradeA').is(":checked")) {
      $('.function').show()
    } else {

    }
  })



});

我可以用A级，但如果选择B级，我无法提交表格，请指教

Answer 1

这是因为带有name="function" 的无线电输入具有required 属性集。尽管不可见，但该表单仍要求填写此字段。

这里最简单的解决方案是删除required 属性或考虑将选项之一设置为默认checked。