选择决定打开哪个表单操作

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 example