Как предотвратить отправку поля формы с display:none

У меня есть форма регистрации, которая просит пользователей выбрать страну из выпадающего меню.

У меня есть скрипт, который, в зависимости от страны, выбранной пользователем, отображает определенное поле региона/штата.

$("#Country").change(function() { 
    
		if ( $(this).val() == "GB") {
			$("#RegionsUS").hide();
			$("#RegionsOTHER").hide();
			$("#RegionsUK").show();
		}
		else if ( $(this).val() == "US") {
			$("#RegionsUS").show();
			$("#RegionsOTHER").hide();
			$("#RegionsUK").hide();
		}
		else {
			$("#RegionsOTHER").show();
			$("#RegionsUS").hide();
			$("#RegionsUK").hide();
		}
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>

<select name="Country" id="Country" class="form-control" required>
<option selected>Please select</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="FR">France</option>
</select>              

<input type="text" id="RegionsOTHER" name="Region" class="form-control" placeholder="Region/State" maxlength="50">

<select id="RegionsUS" name="Region" class="form-control" style="display:none;">
<option value="Alabama">Alabama</option>
</select>

<select id="RegionsUK" name="Region" class="form-control" style="display:none;">
<option value="England">England</option>
<option value="Scotland">Scotand</option>
</select>

</form>

Проблема в том, что при отправке формы отправляются все три поля региона, несмотря на то, что два из них всегда скрыты.

Как предотвратить отправку скрытых полей вместе с формой?

Спасибо. Нью-Джерси


drop-down-menu country
person NathonJones    schedule 06.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Извините, несмотря на то, что вчера я искал почти весь день и не видел следующего, мой вопрос, очевидно, очень похож на этот вопрос: Предотвращение отправки поля HTML-формы

Итак, я отредактировал свою функцию и HTML следующим образом:

$("#Country").change(function() { 
    
		if ( $(this).val() == 425) {
			$("#RegionsUS").hide();
			document.getElementById('RegionsUS').disabled = true;
			$("#RegionsOTHER").hide();
			document.getElementById('RegionsOTHER').disabled = true;
			$("#RegionsUK").show();
			document.getElementById('RegionsUK').disabled = false;
		}
		else if ( $(this).val() == 426) {
			$("#RegionsUS").show();
			document.getElementById('RegionsUS').disabled = false;
			$("#RegionsOTHER").hide();
			document.getElementById('RegionsOTHER').disabled = true;
			$("#RegionsUK").hide();
			document.getElementById('RegionsUK').disabled = true;
		}
		else {
			$("#RegionsOTHER").show();
			document.getElementById('RegionsOTHER').disabled = false;
			$("#RegionsUS").hide();
			document.getElementById('RegionsUS').disabled = true;
			$("#RegionsUK").hide();
			document.getElementById('RegionsUK').disabled = true;
		}
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>

<select name="Country" id="Country" class="form-control" required>
<option selected>Please select</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="FR">France</option>
</select>              

<input type="text" id="RegionsOTHER" name="Region" class="form-control" placeholder="Region/State" maxlength="50">

<select id="RegionsUS" name="Region" class="form-control" style="display:none;" disabled="disabled">
<option value="Alabama">Alabama</option>
</select>

<select id="RegionsUK" name="Region" class="form-control" style="display:none;" disabled="disabled">
<option value="England">England</option>
<option value="Scotland">Scotand</option>
</select>

</form>

person NathonJones    schedule 07.11.2018