提交表单而不加载div

Question

如果div未加载，我正在努力进入表单，我正在尝试的是如果选项"Grade B或Less"被选中，那么表格应该可以提交，如果"成绩"，然后是下一个要加载的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。