Блог

Главная - Вопросы по программированию - Как предотвратить ошибку отправки / возврата формы, когда выбранные поля выпадающего списка идентичны

Как предотвратить ошибку отправки / возврата формы, когда выбранные поля выпадающего списка идентичны

#javascript #form-submit

#javascript #форма-отправить

Вопрос:

Я пытаюсь создать форму выбора предпочтений семинара — пользователи указывают, какие семинары они заинтересованы в посещении во время различных сессий на конференции. Поскольку мы используем алгоритм для назначения людям семинаров на основе их предпочтений, мы хотим убедиться, что кто-то выбирает 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 (и т.д.) должны быть одинаковыми. В конце концов, я бы хотел, чтобы первый вариант не был идентичен второму и третьему вариантам в сеансе 1.

Комментарии:

1. Я думаю, что одним из способов было бы создать пустой массив onsubmit, а затем выполнить итерацию по всем значениям и сохранить их все в массиве. В цикле вы можете проверить, есть ли это значение уже в массиве, если это так, это означает, что оно выбрало одно и то же дважды

2. Это не то, что вы предложили, но что-то еще, что я тоже пробовал. В настоящее время возится с пустым массивом… document.getElementById("4734014").submit(); { function compareSubmit() { var one= document.getElementByID("tfa_4"); var onecomp= getElementByID(one).value.innerHTML; var two= document.getElementByID("tfa_13"); var twocomp= getElementByID(one).value.innerHTML; if (onecomp == twocomp ){ $("#tfa_4").after("<p>Please choose each workshop only once per Session.</p>"); }else{ return false; } } };

3. Вы сравниваете значения val(), которые различаются для каждого параметра выбора, поэтому они никогда не скажут вам, что они одинаковые

4. Я вижу. Я пытался заставить его вызывать значение innerHTML или, другими словами, текст внутри самого меню для сравнения.

Ответ №1:

Я попробовал, единственное, что я изменил в 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>