选择决定要打开的窗体操作

Question

我有一个以选择开头的表单。根据第一个选择(选择哪个报告)的选择，我需要更改表单提交到.cfm的操作路径。有人可以协助我如何做到这一点吗？我对任何正确的方式持开放态度，无论是HTML，ColdFusion还是jQuery(Javascript)。

所以从选择开始：

<select class="form-control" id="reporttype" name="reporttype"> 
<option value="" selected="selected">Select Report</option>
<option id ="checklistreports" value="checklistreports" >Checklist Stats</option>
<option id ="locationreports" value="locationreports" >Location Stats</option>
</select>

如果选择#checklistreports，则应<form name="generatereport" method="post" action="_checklists_queries.cfm">表单

但如果选择#locationreports，则应<form name="generatereport" method="post" action="_location_queries.cfm">形式

任何这方面的帮助将不胜感激。

我试图在 CF 中的 IF 语句中做，但不幸的是它让我卡住了，没有结果。

Answer 1

可以使用.change处理程序来更改窗体的action属性。

$("#reporttype").change(function() {
if ($(this).val() == "checklistreports") {
$("form[name=generatereport]").attr("action", "_checklists_queries.cfm");
} else {
$("form[name=generaterport]").attr("action", "_location_queries.cfm");
}
});

Answer 2

我建议只在选项的值中指示表单的操作值。

$('#reporttype').change(function(){
form_action = $(this).val();
$('form').attr('action', form_action);
$('span').text(form_action);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="reporttype" name="reporttype"> 
<option value="" selected="selected">Select Report</option>
<option value="_checklists_queries.cfm" >Checklist Stats</option>
<option value="_location_queries.cfm" >Location Stats</option>
</select>

<form name="generatereport" method="POST" action="#">
<p>This forms action value is <span>#</span></p>
</form>

Answer 3

你总是可以用ColdFusion来完成这一切。 简单多了。 这是一种方法。

formPage
<form action = "action.cfm" method="post">
<select name="pageToInclude">
<option value="locationQueries.cfm">Location</option>
rest of form.
action.cfm
<cfinclude template = "#form.pageToInclude#">

Answer 4

您已经有一个可接受的答案，但我想为您选择的答案提出一个稍微干净的解决方案，以及替代方案：

选项 #1(内联和清洁)：

// Cache the selector for better reuse.
var form = $("form[name=generatereport]");
$("#reporttype").change(function() {
var action = $(this).val() === 'checklistreports' ? '_checklists_queries.cfm' : '_location_queries.cfm';
form.attr('action', action);
});

上面的选项只是您选择的答案的更紧凑版本，但利用选择器缓存，这对性能有好处。

选项#2("全局"配置选项)：

// Cache the selector
var form = $('form[name=generatereport]');
// Now you can define the variable states for your app.
var config = {
checklistreports: {
action: '_checklists_queries.cfm'
},
locationreports: {
action: '_location_queries.cfm'
}
};
// Updating is trivial
$('#reporttype').change(function() {
var selected = $(this).val();
form.attr('action', config[selected].action);
});

此选项很有趣，因为它允许您在一个地方定义组件的所有不同"状态"，这对于可读性和维护非常有用，并且它使组件的实际更新就像查找它应该具有的值一样简单。

Answer 5

如果表单包含不同的元素，您可以使用 css 和 onchange 处理程序隐藏表单 选择取消隐藏正确的表单。

.html：

<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option value="checklistreports" >Checklist Stats</option>
<option value="locationreports" >Location Stats</option>
</select>
<form method="post" action="_location_queries.cfm" id="locationreports" style="display: none;">
<input type="text" name="location" placeholder="location">
</form>
<form method="post" action="_checklists_queries.cfm" id="checklistreports" style="display: none;">
<input type="text" name="location" placeholder="checklist">
</form>

.js：

var locationReport = document.getElementById("locationreports");
var checklistReport = document.getElementById("checklistreports");
function onChangeForm(e) {
if (e.target.value === "locationreports") {
locationReport.style.display = "block";
checklistReport.style.display = 'none';
} else {
checklistReport.style.display = "block";
locationReport.style.display = "none";
}
}
document.getElementById("reporttype").onchange = onChangeForm;

JSFIDDLE 示例