Как запретить отображение поля формы: ни одно не было отправлено - PullRequest
Новая
       17

Как запретить отображение поля формы: ни одно не было отправлено

0 голосов
/ 06 ноября 2018

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

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

$("#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>

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

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

Спасибо. NJ

1 Ответ

0 голосов
/ 07 ноября 2018

Извините, несмотря на то, что вчера почти весь день искал и не видел следующего, мой вопрос, очевидно, очень похож на этот вопрос: Запрет отправки поля формы 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>
...