使用PHP切换文本框和选择框
Toggle between a textbox and a select using PHP
我有一个基本的客户信息表单,我想让它更具交互性。这个想法是,如果用户选择的国家不是美国或加拿大,状态选择将变成一个状态文本框。我确信这可以用PHP来完成,但使用jQuery有争议,但如果可能的话,我想避免使用它。下面是我的表单示例:
<tr>
<td>
<input name="city" type="text" id="city" value="<?= $this->aBillingProf['cCity']; ?>" />
</td>
<td>
<select name="state" id="state" style="width:218px;position:relative;top:-4px;">
<? $s = strlen($this->aBillingProf['cState']) == 2 ? strtoupper($this->aBillingProf['cState']) : strtoupper(stateTranslate($this->aBillingProf['cState']));
echo stateSelect('both',$s); ?>
</select>
<input name="state" type="text" id="state" value="<?= $this->aBillingProf['cState']; ?>" />
/*The Idea being only one of the above options is available depending on what is selected from the country select */
</td>
</tr>
<tr>
<td>
<label for="zip">Zip / Postal Code</label>
</td>
<td>
<label for="country">Country</label>
</td>
</tr>
<tr>
<td>
<input name="zip" type="text" id="zip" maxlength="6" value="<?= $this->aBillingProf['cZip']; ?>" />
</td>
<td>
<select name="country" id="country" style="width:218px;position:relative;top:-4px;">
<?= AffiliateStore::countrySelect($this->aBillingProf['cCountry']); ?>
</select>
<!-- <input type="text" name="country" id="country" value="<?= $this->aBillingProf['cCountry']; ?>" /> -->
</td>
</tr>
基本上我所做的就是添加一个包含我需要的输入的div。在本例中,我将为美国和加拿大州使用选择框,为其他州使用文本输入。使用CSS的display:none来折叠所有div,除了默认选择的国家/地区。
<div id="state_inputs">
<div id="us_states_div">
<!-- Select box for US states goes here -->
</div>
<div style="display:none" id="ca_states_div">
<!-- Select box for US states goes here -->
</div>
<div style="display:none" id="other_states_div">
<input type="text" name="other_states" />
</div>
</div>
现在假设国家的选择框的id为country_select:
<script>
document.getElementById("country_select").onchange = function() {
var country_select = document.getElementById("country_select");
var country = country_select.options[country_select.selectedIndex].text;
if(country == "USA") {
document.getElementById("us_states_div").style.display="block";
document.getElementById("ca_states_div").style.display="none";
document.getElementById("other_states_div").style.display="none";
} else if(country == "Canada") {
document.getElementById("us_states_div").style.display="none";
document.getElementById("ca_states_div").style.display="block";
document.getElementById("other_states_div").style.display="none";
} else {
document.getElementById("us_states_div").style.display="none";
document.getElementById("ca_states_div").style.display="none";
document.getElementById("other_states_div").style.display="block";
}
};
</script>
更新PHP以输出该标记后,在处理端只需查看所选国家,然后使用正确的状态输入中包含的值。
这不能只用PHP完成,因为它要求您使用客户端脚本来确定事件何时被触发。您可以使用PHP重新构建表单,但是,这需要从服务器重新加载。使用JavaScript来处理事件和更新表单要简单得多。
相关文章:
- 用于选择/文本框操作的JavaScript
- 以编程方式选择文本Mobile Safari
- Firefox输入可以't在选择文本时滚动
- 如何在javascript中取消选择文本框
- 如何在html中打印选择文本
- SVG元素——处理和选择文本
- 选择文本并添加到本地存储
- 选择“p文本jquery”
- 为什么火狐在我更改 innerHTML 时会选择文本
- 根据换行符选择文本
- 如何按从当前单词到段落中该句子(.)结尾的范围选择文本
- 单击按钮时选择文本
- JavaScript 触发器事件在 Android 上选择文本
- .val() 选择文本而不是值字符串,当网页动态编辑源 html
- 为什么不用特殊字符替换选择文本,以及如何删除此特殊字符
- 使用链接多次选择文本
- 使用jQuery在焦点上选择文本框是't在移动浏览器中工作
- Safari存在文本输入问题,用户输入时会选择文本,导致文本丢失
- Bootstrap下拉菜单-仅复选框不选择文本
- 使用.on的多个下拉菜单选择文本仅适用于第一个下拉菜单