Как предотвратить отправку / возврат формы, когда выпадающие поля идентичны - PullRequest
1 голос
/ 11 апреля 2019

Я пытаюсь создать форму выбора предпочтений семинара - пользователи указывают, какие семинары они заинтересованы в посещении во время различных сессий на конференции. Поскольку мы используем алгоритм для назначения семинаров для людей на основе их предпочтений, мы хотим убедиться, что кто-то выберет 5 уникальных семинаров на сессию. Им разрешается выбирать один и тот же семинар, если он находится в разных сеансах, но не может иметь идентичные семинары, выбранные из раскрывающихся меню в каждом отдельном сеансе. Ни один из кодов, которые я пытался написать, не оказывает никакого влияния, и я не могу найти подходящий путь.

Я пытался создать оператор if x === y, который предотвратил бы отправку формы, а также сгенерировал объяснение после полей с ошибками, но безрезультатно. Я также борюсь с интеграцией этого в рамках FormAssembly, поскольку у меня нет доступа для редактирования необработанного HTML / активно развернутого Javascript, поэтому я попробовал маршрут protectDefault.

Это была моя последняя попытка:

$(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 (и т. Д.) Должны быть одинаковыми. В конце концов, я бы хотел, чтобы Первый Выбор не был идентичным как Второму, так и Третьему в Сессии 1.

1 Ответ

0 голосов
/ 11 апреля 2019

Я сделал это, единственное, что я изменил в HTML, - это то, что я добавил атрибут данных к опциям выбора.

Я никогда не отправляю форму в моем 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>
...