Question

我有一个以select开头的表单。根据第一个选择（选择哪个报告）的选择，我需要更改表单提交的.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（＆＃39;全局＆＃39;配置选项）：

// 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);
});

这个选项很有意思，因为它可以让你定义所有不同的状态＆＃34;对于您的组件在一个地方，这对于可读性和维护是很好的，并且它使组件的实际更新像查找它应该具有的值一样简单。

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

选择决定要打开的表单操作

5 个答案: