Question

我正在尝试创建“研讨会首选项选择”表单-用户指出在会议的各个会议期间他们有兴趣参加哪些研讨会。由于我们使用一种算法根据人员的喜好分配人员讲习班，因此我们要确保每个会话中有人选择5个唯一讲习班。如果在不同的会议中，他们可以选择相同的工作坊，但不能从每个单独的会议的下拉菜单中选择相同的工作坊。我尝试编写的代码都没有任何影响，而且我不知道要采用的适当方法。

我试图创建一个if x === y语句，该语句将阻止表单提交，并在有罪字段之后生成一个解释，但无济于事。我也很难将其集成到FormAssembly的范围内，因为我无权编辑原始HTML /主动部署的Javascript，这就是为什么我尝试了preventDefault路由的原因。

这是我最近的尝试：

$(document).ready(function () {

    $("#4734014").submit(function (event) {
        var submit = true;

        termsIsChecked = 
        sOneFirst = $("#tfa_4").val();
        sOneSecond = $("tfa_13").val();

        if (sOneFirst === SOneSecond) {
            $("#tfa_4").after("<p>Please choose each workshop only once per Session.</p>");
            submit = false;
        }

        if (submit === false) {
            event.preventDefault();
        }
    });
});

这是我一直在使用的测试表格： https://www.tfaforms.com/4734014

以上代码仅在会话1的“第一选择”和“第二选择”相同时才尝试阻止表单提交。等级1和等级2（等）应允许相同。最终，我希望在会议第一场比赛中不要让第一选择与第二选择和第三选择相同。

Answer 1

我给了它一个镜头，我在HTML中修改的唯一一件事就是在selects选项中添加了数据属性。

我从不通过JS发送表单，而是当用户两次选择相同的内容时在控制台中抛出一条消息。

这是它的工作方式：在提交表单时，我为每个字段集创建一个空数组，然后为每个字段集中的每个选择创建一个空数组，然后检查所选选项是否已经在该数组中：如果没有，一切都很好，我将当前所选选项存储在其中，否则意味着用户已经选择了该选项，我抛出一个错误。

希望它会有所帮助。

$("form").on("submit", function(e) {
	e.preventDefault();
  var $sections = $("fieldset.section");
  $sections.each(function(i) {
  	var $selects = $(this).find("select");
    var selectedValues = [];
    $selects.each(function(s) {
    	var value = $(this).find("option:selected").attr('data-value');
      if(value !== undefined) {
      	if(selectedValues.indexOf(value) > -1) {
      		console.log("Error, value already selected")
     	 } else {
      		selectedValues.push(value);
     	 }
      }
    });
  });
});

form {
  margin-bottom: 80px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="https://www.tfaforms.com/responses/processor" class="hintsBelow labelsAbove" id="4734014" role="form">
<fieldset id="tfa_8" class="section">
<legend id="tfa_8-L">Session 1<br></legend>
<div id="tfa_37" class="section inline group">
<div class="oneField field-container-D    " id="tfa_4-D">
<label id="tfa_4-L" class="label preField reqMark" for="tfa_4">First Choice<br></label><br><div class="inputWrapper"><select id="tfa_4" name="tfa_4" title="First Choice" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_5" id="tfa_5" class="" data-value="choice-a">Choice A</option>
<option value="tfa_6" id="tfa_6" class="" data-value="choice-b">Choice B</option>
<option value="tfa_7" id="tfa_7" class="" data-value="choice-c">Choice C</option></select></div>
</div>
<div class="oneField field-container-D    " id="tfa_29-D">
<label id="tfa_29-L" class="label preField reqMark" for="tfa_29">Rating 1<br></label><br><div class="inputWrapper"><select id="tfa_29" name="tfa_29" title="Rating 1" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_34" id="tfa_34" class="">Highest</option>
<option value="tfa_35" id="tfa_35" class="">Medium</option>
<option value="tfa_36" id="tfa_36" class="">Lowest</option></select></div>
</div>
</div>
<div id="tfa_54" class="section inline group">
<div class="oneField field-container-D    " id="tfa_13-D">
<label id="tfa_13-L" class="label preField reqMark" for="tfa_13">Second Choice<br></label><br><div class="inputWrapper"><select id="tfa_13" name="tfa_13" title="Second Choice" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_14" id="tfa_14" class="" data-value="choice-a">Choice A</option>
<option value="tfa_15" id="tfa_15" class="" data-value="choice-b">Choice B</option>
<option value="tfa_16" id="tfa_16" class="" data-value="choice-c">Choice C</option></select></div>
</div>
<div class="oneField field-container-D    " id="tfa_42-D">
<label id="tfa_42-L" class="label preField reqMark" for="tfa_42">Rating 2<br></label><br><div class="inputWrapper"><select id="tfa_42" name="tfa_42" title="Rating 2" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_43" id="tfa_43" class="">Highest</option>
<option value="tfa_44" id="tfa_44" class="">Medium</option>
<option value="tfa_45" id="tfa_45" class="">Lowest</option></select></div>
</div>
</div>
<div id="tfa_55" class="section inline group">
<div class="oneField field-container-D    " id="tfa_21-D">
<label id="tfa_21-L" class="label preField reqMark" for="tfa_21">Third Choice<br></label><br><div class="inputWrapper"><select id="tfa_21" name="tfa_21" title="Third Choice" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_22" id="tfa_22" class="" data-value="choice-a">Choice A</option>
<option value="tfa_23" id="tfa_23" class="" data-value="choice-b">Choice B</option>
<option value="tfa_24" id="tfa_24" class="" data-value="choice-c">Choice C</option></select></div>
</div>
<div class="oneField field-container-D    " id="tfa_50-D">
<label id="tfa_50-L" class="label preField reqMark" for="tfa_50">Rating 3<br></label><br><div class="inputWrapper"><select id="tfa_50" name="tfa_50" title="Rating 3" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_51" id="tfa_51" class="">Highest</option>
<option value="tfa_52" id="tfa_52" class="">Medium</option>
<option value="tfa_53" id="tfa_53" class="">Lowest</option></select></div>
</div>
</div>
</fieldset>
<fieldset id="tfa_84" class="section">
<legend id="tfa_84-L">Session 2<br></legend>
<div id="tfa_85" class="section inline group">
<div class="oneField field-container-D    " id="tfa_86-D">
<label id="tfa_86-L" class="label preField reqMark" for="tfa_86">First Choice<br></label><br><div class="inputWrapper"><select id="tfa_86" name="tfa_86" title="First Choice" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_87" id="tfa_87" class="" data-value="choice-a">Choice A</option>
<option value="tfa_88" id="tfa_88" class="" data-value="choice-b">Choice B</option>
<option value="tfa_89" id="tfa_89" class="" data-value="choice-c">Choice C</option></select></div>
</div>
<div class="oneField field-container-D    " id="tfa_90-D">
<label id="tfa_90-L" class="label preField reqMark" for="tfa_90">Rating 1<br></label><br><div class="inputWrapper"><select id="tfa_90" name="tfa_90" title="Rating 1" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_91" id="tfa_91" class="">Highest</option>
<option value="tfa_92" id="tfa_92" class="">Medium</option>
<option value="tfa_93" id="tfa_93" class="">Lowest</option></select></div>
</div>
</div>
<div id="tfa_94" class="section inline group">
<div class="oneField field-container-D    " id="tfa_95-D">
<label id="tfa_95-L" class="label preField reqMark" for="tfa_95">Second Choice<br></label><br><div class="inputWrapper"><select id="tfa_95" name="tfa_95" title="Second Choice" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_96" id="tfa_96" class="" data-value="choice-a">Choice A</option>
<option value="tfa_97" id="tfa_97" class="" data-value="choice-b">Choice B</option>
<option value="tfa_98" id="tfa_98" class="" data-value="choice-c">Choice C</option></select></div>
</div>
<div class="oneField field-container-D    " id="tfa_99-D">
<label id="tfa_99-L" class="label preField reqMark" for="tfa_99">Rating 2<br></label><br><div class="inputWrapper"><select id="tfa_99" name="tfa_99" title="Rating 2" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_100" id="tfa_100" class="">Highest</option>
<option value="tfa_101" id="tfa_101" class="">Medium</option>
<option value="tfa_102" id="tfa_102" class="">Lowest</option></select></div>
</div>
</div>
<div id="tfa_103" class="section inline group">
<div class="oneField field-container-D    " id="tfa_104-D">
<label id="tfa_104-L" class="label preField reqMark" for="tfa_104">Third Choice<br></label><br><div class="inputWrapper"><select id="tfa_104" name="tfa_104" title="Third Choice" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_105" id="tfa_105" class="" data-value="choice-a">Choice A</option>
<option value="tfa_106" id="tfa_106" class="" data-value="choice-b">Choice B</option>
<option value="tfa_107" id="tfa_107" class="" data-value="choice-c">Choice C</option></select></div>
</div>
<div class="oneField field-container-D    " id="tfa_108-D">
<label id="tfa_108-L" class="label preField reqMark" for="tfa_108">Rating 3<br></label><br><div class="inputWrapper"><select id="tfa_108" name="tfa_108" title="Rating 3" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_109" id="tfa_109" class="">Highest</option>
<option value="tfa_110" id="tfa_110" class="">Medium</option>
<option value="tfa_111" id="tfa_111" class="">Lowest</option></select></div>
</div>
</div>
</fieldset>
<div class="actions" id="4734014-A"><input type="submit" data-label="Submit" class="primaryAction" id="submit_button" value="Submit"></div>
<div style="clear:both"></div>
<input type="hidden" value="675-5f6788ccfe08d81db14e4237e150e28a" name="tfa_dbCounters" id="tfa_dbCounters" autocomplete="off"><input type="hidden" value="4734014" name="tfa_dbFormId" id="tfa_dbFormId"><input type="hidden" value="" name="tfa_dbResponseId" id="tfa_dbResponseId"><input type="hidden" value="eb5a2798b7c6daacfd3a4578060050f6" name="tfa_dbControl" id="tfa_dbControl"><input type="hidden" value="1554993064" name="tfa_dbTimeStarted" id="tfa_dbTimeStarted" autocomplete="off"><input type="hidden" value="7" name="tfa_dbVersionId" id="tfa_dbVersionId"><input type="hidden" value="" name="tfa_switchedoff" id="tfa_switchedoff">
</form>

下拉字段选择相同时如何防止表单提交/返回错误

1 个答案: