drop-down-menu - 如何防止带有 display:none 的表单字段被提交

Question

我有一个注册表单，要求用户从下拉菜单中选择一个国家。

我有一些脚本，根据用户选择的国家/地区，显示特定的地区/州字段。

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

Answer 1

抱歉，尽管昨天几乎一整天都在搜索并且没有看到以下内容，但我的问题显然与这个问题非常相似： 防止提交 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>