表单 - 下拉列表中的先前所选值到电子邮件
Form - previous selected value in dropdown posts to email
我创建了一个新表单。尽管onchange"systemUpdate"看起来工作正常,但在提交表单后,它会发布到电子邮件,并且电子邮件显示以前选择的选项值,这些值在提交表单之前已更改和更新。
例如,用户选择 selectedIndex == 1,选项值"PS/2 连接"(#Wyse_Terminaldiv),然后改变主意并选择 selectedIndex == 2 并提交,"PS/2 连接"仍显示在电子邮件中。
如何清除以前选择的选项值,以便它们不会最终出现在电子邮件中?有合理数量的代码,所以只包含相关的脚本和html
function systemUpdate(detail) {
if (detail.selectedIndex == 0) {
$("#Option_Terminal").hide();
$("#Wyse_Terminal select").removeAttr("class");
$("#Wyse_LaptopDesktop").hide();
$("#Wyse_LaptopDesktop select").removeAttr("class");
$("#HP_Terminal").hide();
$("#HP_Terminal select").removeAttr("class");
} else if (detail.selectedIndex == 1) {
$("#Wyse_Terminal").show();
$("#Wyse_Terminal select").addClass("required");
$("#Wyse_LaptopDesktop").show();
$("#Wyse_LaptopDesktop select").addClass("required");
$("#HP_Terminal").hide();
$("#HP_Terminal select").removeAttr("class");
} else if (detail.selectedIndex == 2) {
$("#Wyse_Terminal").hide();
$("#Wyse_Terminal select").removeAttr("class");
$("#Wyse_LaptopDesktop").show();
$("#Wyse_LaptopDesktop select").addClass("required");
$("#HP_Terminal").hide();
$("#HP_Terminal input").removeAttr("class");
} else if (detail.selectedIndex == 3) {
$("#Wyse_Terminal").hide();
$("#Wyse_Terminal select").removeAttr("class");
$("#Wyse_LaptopDesktop").hide();
$("#Wyse_LaptopDesktop select").removeAttr("class");
$("#HP_Terminal").show();
$("#HP_Terminal select").addClass("required");
}}
<form method="POST" title="myForm" id="myForm" name="myForm" action="emailTemplate.php">
<fieldset>
<legend>Select Your System</legend>
<p><label>Please select your system</label>
<select id="select_system" name="select_system" class="required" onchange="systemUpdate(this);">
<option value="">Select...</option>
<option value="Wyse Terminal">Wyse Terminal</option>
<option value="Laptop/Desktop">Laptop/Desktop</option>
<option value="HP Terminal">HP Terminal</option>
</select> *
<p><img style="width: 611px;"src="images/systemtype.jpg"/></p>
</p>
<br />
<div id="Wyse_Terminal">
<p><label>Please select connection type</legend>
<select id="Connection_Type" name="Connection_Type" class="required">
<option value="">Select...</option>
<option value="PS/2 connections">PS/2 connections</option>
<option value="USB connections">USB connections</option>
</select> *
<p><img style="width: 611px;"src="images/mouse.png"/></p>
</p>
</div>
<br />
<div id="Wyse_LaptopDesktop">
<p><label>Select items required</label>
<select id="Items_Required" name="Items_Required" class="required">
<option value="">Select...</option>
<option value="Keyboard and Mouse ($60)">Keyboard and Mouse ($60)</option>
<option value="Keyboard only ($40)">Keyboard only ($40)</option>
<option value="Mouse only ($20)">Mouse only ($20)</option>
</select> *
</p>
</div>
<div id="HP_Terminal">
<p><label>If HP Terminal</label>
<select id="HPTerminal" name="HPTerminal" class="required">
<option value="">Select...</option>
<option value="Wireless Keyboard and Mouse ($60)">Wireless Keyboard and Mouse ($60)</option>
</select> *
</p>
</div>
</fieldset>
<fieldset id="yourDetails">
</fieldset>
<p class="submit"><input class="button" onClick="return checkTicked();" name="Submit" type="submit" value="Submit"></p>
感谢您帮助新手!
试试这个
function systemUpdate(detail) {
if (detail.selectedIndex == 0) {
$("#Option_Terminal").hide();
$("#Option_Terminal").val("");
$("#Wyse_Terminal select").removeAttr("class");
$("#Wyse_LaptopDesktop").hide();
$("#Wyse_LaptopDesktop").val("");
$("#Wyse_LaptopDesktop select").removeAttr("class");
$("#HP_Terminal").hide();
$("#HP_Terminal").val("");
$("#HP_Terminal select").removeAttr("class");
} else if (detail.selectedIndex == 1) {
$("#Wyse_Terminal").show();
$("#Wyse_Terminal select").addClass("required");
$("#Wyse_LaptopDesktop").show();
$("#Wyse_LaptopDesktop select").addClass("required");
$("#HP_Terminal").hide();
$("#HP_Terminal").val("");
$("#HP_Terminal select").removeAttr("class");
} else if (detail.selectedIndex == 2) {
$("#Wyse_Terminal").hide();
$("#Wyse_Terminal").val("");
$("#Wyse_Terminal select").removeAttr("class");
$("#Wyse_LaptopDesktop").show();
$("#Wyse_LaptopDesktop select").addClass("required");
$("#HP_Terminal").hide();
$("#HP_Terminal").val("");
$("#HP_Terminal input").removeAttr("class");
} else if (detail.selectedIndex == 3) {
$("#Wyse_Terminal").hide();
$("#Wyse_Terminal").val("");
$("#Wyse_Terminal select").removeAttr("class");
$("#Wyse_LaptopDesktop").hide();
$("#Wyse_LaptopDesktop").val("");
$("#Wyse_LaptopDesktop select").removeAttr("class");
$("#HP_Terminal").show();
$("#HP_Terminal select").addClass("required");
}}
相关文章:
- 如何使用jQuery选择下拉列表的值
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- Javascript按钮下拉列表
- jQuery表单添加不适用于下拉列表
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 禁用jQuery中的下拉列表
- 如何在按钮中显示下拉列表中选定的元素
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 如何使用PHP和JS级联三个下拉列表
- 如何在使用剑道 MVVM 下拉列表时强制选择第一项
- 语义ui如何使用javascript启用或禁用下拉列表
- 无法使用PHP动态设置下拉列表中的值
- 如何根据对具有多行的先前列表的选择来动态加载下拉列表
- 下拉列表在使用z索引放置在前面后停止工作
- 从多维嵌套json数组创建下拉列表
- 如何在剑道下拉列表中按文本和值搜索
- jQuery检查自定义Google电子表格页面上输入和下拉列表的更改
- <a>超文本电子邮件链接的标签.JS搞砸了我的下拉列表,因为它是基于<a>标签
- 根据下拉列表值删除字段RSS 0回复以电子邮件订阅
- 表单 - 下拉列表中的先前所选值到电子邮件