選擇決定以哪種形式開始動作

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

如果表單包含differents元素，您可以用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

Answer 5

你已經有一個公認的答案，但我想提出一個稍微清潔的解決方案給你選擇的答案，以及替代方案：

選項＃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); 
}); 

此選項是有趣的，因爲它可以讓你在一個地方，這是很好的定義都不同的「狀態」爲組件可讀性和維護性，它使組件的實際更新變得像查找它應該具有的值一樣簡單。