表单事件更改不适用于下拉列表选择
Form event onChange not working on dropdown selection
我有一个表单可以完美运行,并根据单选按钮更改表单的操作:
<form name="form1" method="post" action="[[base_urlnt]]/electricity-rate-plans">
<input type="radio" name="energy" value="electricity" checked>
<label for="electricity">Electricity</label>
<input type="radio" name="energy" value="gas" onChange="if(this.checked){document.forms[0].action='[[base_urlnt]]/natural-gas-rate-plans'}">
<label for="gas">Natural Gas</label>
<input name="service_zip_5" type="text" id="search" placeholder="Enter ZIP Code"><button type="submit" class="bigButton">Get Rates</button>
</form>
我想做同样的事情,但是通过使用onChange而不是单选按钮,而是使用如下所示的下拉列表来更改另一个表单上的操作。我做错了什么?
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service">
<option value="Electricity" selected="selected">Electricity</option>
<option value="Gas" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/natural-gas-plans'}">Natural Gas</option>
<option value="Dual" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/dual-fuel-plans'}">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode">
<button type="submit" id="submit">Get Started</button>
</form>
我试过了 onChange="if(this.checked)首先是认为既然它是一个选择,它应该在 onChange="if(this.selected),但两者都不起作用。这不是一个函数吗?
您需要稍微更改一下。
您的 onchange 事件应绑定到选择选项而不是单个选项。
我还在每个选项中添加了一个属性"data-url",以存储需要添加到表单操作中的 url。
然后,javascript 函数可以使用此"data-url"属性来更新表单操作。这也意味着您不必在所有 onchange 属性中重复相同的代码。您可以调用一个提取相应"数据 url"的函数。
见 - http://jsfiddle.net/williamtdavies/8kxzaquw/
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service" onChange="changeFormAction(this);">
<option value="Electricity" data-url="[[base_url]]alberta/electricity-plans">Electricity</option>
<option value="Gas" data-url="[[base_url]]alberta/natural-gas-plans">Natural Gas</option>
<option value="Dual" data-url="[[base_url]]alberta/dual-fuel-plans">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode"/>
<button type="submit" id="submit">Get Started</button>
</form>
<script>
function changeFormAction(elem){
document.forms[0].action = elem.options[elem.selectedIndex].getAttribute("data-url");
}
</script>
相关文章:
- 如何使用jQuery选择下拉列表的值
- 选择的下拉列表:使search_contains同时适用于所有下拉列表
- 如何使用 jquery 检查该值是否存在于带有标签的 select2 下拉列表中:true
- 使用jquery如何自动删除下拉列表中的第一个空白选项(如果它依赖于另一个选项)
- 如何修改代码以将其应用于三个下拉列表?(Jquery)
- 设置值时,语义UI下拉列表滞后于整个UI
- 如何使我的动态下拉列表也依赖于父下拉列表
- 如何将函数应用于下拉列表
- 专注于引导下拉列表
- 如何从下拉列表中选择等效于 AngularJS 中的 ng 模型的数据
- 引导下拉列表永久显示 - 不特定于按钮单击
- 更改一个下拉列表的值依赖于另一个下拉列表
- 在PHP和jQuery中,使一个下拉列表依赖于另一个下拉列表
- 在没有jQuery用于选择所有下拉列表的情况下,相当于$(“select”)
- 一个下拉列表的内容依赖于另一个下拉列表
- 一个下拉列表依赖于另一个
- 创建两个依赖于第一个的下拉列表
- 如何将样式应用于剑道下拉列表中的一个元素
- 有什么更好的方法来创建适用于多行的下拉列表
- 依赖于jQuery的下拉列表