如何限制在禁用的 HTML 输入对象上传递值以供 ColdFusion cfquery 处理？
我的 HTML/Web 编程技能几乎处于新手水平，我尝试对此进行一些搜索，但没有找到任何真正相关的东西。
下面我有一个代码示例，它使用一些 jQuery（我认为？基本上是 google 处理拼凑在一起的 - 我不知道 javascript 和 jQuery 之间的区别）来根据选择禁用/启用页面上的输入对象。我的目的是根据这些选择编译 ColdFusion cfquery，以编写比我们当前使用的查询更具体的查询。
请记住，我绝对想坚持使用 CF 来处理 SQL 方面的事情（基础设施已经在此处设置，我已经有一个应用程序可供参考，等等），仅发送启用的值进行处理的最佳实践方法是什么？我的想法是使用表单并在新窗口中打开，但我不知道如何仅提交“启用”的输入对象。我认为除此之外的潜在选项可能是在此页面上的所有数据上运行 cfquery 并使用“显示”按钮来缩小范围（效率低下，只想查询我想要的数据），或者找出一个提交禁用对象并为其分配一次性值的方法，该值可以在表单处理页面上忽略......但我希望一些忍者可以告诉我一种忍者方法来做到这一点。
=============
<script language="javascript">
$(function() {
var top_group_radio_buttons = $("#month_to_month, #specific_month");
var top_group_checkboxes = $("#group_time_focus_monthly, #group_time_focus_dow, #group_time_focus_hourly");
var group_by_dow_objects = $("#group_dow_sunday, #group_dow_monday, #group_dow_tuesday, #group_dow_wednesday, #group_dow_thursday, #group_dow_friday, #group_dow_saturday");
var group_by_hourly_objects = $("#group_hourly_1, #group_hourly_2, #group_hourly_3, #group_hourly_4, #group_hourly_5, #group_hourly_6, #group_hourly_7, #group_hourly_8, #group_hourly_9, #group_hourly_10, #group_hourly_11, #group_hourly_12, #group_hourly_13, #group_hourly_14, #group_hourly_15, #group_hourly_16, #group_hourly_17, #group_hourly_18, #group_hourly_19, #group_hourly_20, #group_hourly_21, #group_hourly_22, #group_hourly_23, #group_hourly_24");
var month_to_month_objects = $("#starting_month, #starting_year, #ending_month, #ending_year");
$(":radio").click(function(event) {
if (this.id == "group")
{
top_group_radio_buttons.removeAttr("disabled");
top_group_checkboxes.removeAttr("disabled");
if ($("#group_time_focus_dow").is(":checked"))
{
group_by_dow_objects.removeAttr("disabled");
}
if ($("#group_time_focus_hourly").is(":checked"))
{
group_by_hourly_objects.removeAttr("disabled");
}
if ($("#month_to_month").is(":checked"))
{
month_to_month_objects.removeAttr("disabled");
$("#annual_month").attr("disabled", true);
}
if ($("#specific_month").is(":checked"))
{
month_to_month_objects.attr("disabled", true);
$("#annual_month").removeAttr("disabled");
}
}
else if (this.id == "individual")
{
top_group_checkboxes.attr("disabled", true);
top_group_radio_buttons.attr("disabled", true);
group_by_dow_objects.attr("disabled", true);
group_by_hourly_objects.attr("disabled", true);
month_to_month_objects.attr("disabled", true);
$("#annual_month").attr("disabled", true);
}
else if (this.id == "specific_month")
{
month_to_month_objects.attr("disabled", true);
$("#annual_month").removeAttr("disabled");
}
else if (this.id == "month_to_month")
{
month_to_month_objects.removeAttr("disabled");
$("#annual_month").attr("disabled", true);
}
});
});
$(function() {
$(":checkbox").click(function(event) {
if (this.id == "group_time_focus_dow")
{
var dow_objects = $("#group_dow_sunday, #group_dow_monday, #group_dow_tuesday, #group_dow_wednesday, #group_dow_thursday, #group_dow_friday, #group_dow_saturday");
if($(this).is(":checked"))
{
dow_objects.removeAttr("disabled");
}
else
{
dow_objects.attr("disabled", true);
}
}
if (this.id == "group_time_focus_hourly")
{
var hourly_objects = $("#group_hourly_1, #group_hourly_2, #group_hourly_3, #group_hourly_4, #group_hourly_5, #group_hourly_6, #group_hourly_7, #group_hourly_8, #group_hourly_9, #group_hourly_10, #group_hourly_11, #group_hourly_12, #group_hourly_13, #group_hourly_14, #group_hourly_15, #group_hourly_16, #group_hourly_17, #group_hourly_18, #group_hourly_19, #group_hourly_20, #group_hourly_21, #group_hourly_22, #group_hourly_23, #group_hourly_24");
if($(this).is(":checked"))
{
hourly_objects.removeAttr("disabled");
}
else
{
hourly_objects.attr("disabled", true);
}
}
});
});
</script>
<input type=radio name="group_or_individual" id="individual" value="individual" checked>Individual Statistics
<br /> <hr />
<input type=radio name="group_or_individual" id="group" value="group">Group Statistics
<ul id="List1" style="list-style-type: none;">
<li>
<input type=radio name="comparison_interval" id="month_to_month" value="month_to_month" disabled checked>Consecutive Month-to-Month Comparison (ie, Jan 2011, Feb 2011, Mar 2011, etc)
</li>
<li>
<input type=radio name="comparison_interval" id="specific_month" value="specific_month" disabled>Specific Month in Previous Years (ie, Jan 2010, Jan 2011, Jan 2012, etc) <li /> <li />
</li>
<li>
Starting Year
<select name="starting_year" id="starting_year" disabled>
<option value="2010">2010
<option value="2011">2011
</select>
Starting Month
<select name="starting_month" id="starting_month" disabled>
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4" selected>Apr
<option value="5">May
<option value="6">Jun
<option value="7">Jul
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
</li>
<li>
Ending Year
<select name="ending_year" id="ending_year" disabled>
<option value="2010">2010
<option value="2011">2011
</select>
Ending Month
<select name="ending_month" id="ending_month" disabled>
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4" selected>Apr
<option value="5">May
<option value="6">Jun
<option value="7">Jul
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
</li>
<li>
Specific Month to be Compared Annually
<select name="annual_month" id="annual_month" disabled>
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">Apr
<option value="5">May
<option value="6">Jun
<option value="7">Jul
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
</li> <li />
<ul id="List2" style="list-style-type: none;"
<li>
<input type=checkbox name="group_time_focus_monthly" id="group_time_focus_monthly" disabled checked><label>Call Data By Month</label>
</li>
<li>
<input type=checkbox name="group_time_focus_dow" id="group_time_focus_dow" disabled><label>Call Data By Day of Week</label> <li />
<ul id="List3" style="list-style-type: none;">
<li>
<b>Include Days:</b>
</li>
<li> <input type=checkbox name="group_dow_sunday" id="group_dow_sunday" disabled checked> Sunday </li>
<li> <input type=checkbox name="group_dow_monday" id="group_dow_monday" disabled checked> Monday </li>
<li> <input type=checkbox name="group_dow_tuesday" id="group_dow_tuesday" disabled checked> Tuesday </li>
<li> <input type=checkbox name="group_dow_wednesday" id="group_dow_wednesday" disabled checked> Wednesday </li>
<li> <input type=checkbox name="group_dow_thursday" id="group_dow_thursday" disabled checked> Thursday </li>
<li> <input type=checkbox name="group_dow_friday" id="group_dow_friday" disabled checked> Friday </li>
<li> <input type=checkbox name="group_dow_saturday" id="group_dow_saturday" disabled checked> Saturday </li>
</ul>
</li>
<li>
<input type=checkbox name="group_time_focus_hourly" id="group_time_focus_hourly" disabled><label>Call Data By Hourly Interval</label> <li />
<ul id="List4" style="list-style-type: none;">
<li>
<b>Include Hourly Interval:</b>
</li>
<li> <input type=checkbox name="group_hourly_1" id="group_hourly_1" disabled checked> 12AM - 1AM <input type=checkbox name="group_hourly_13" id="group_hourly_13" disabled checked> 12PM - 1PM </li>
<li> <input type=checkbox name="group_hourly_2" id="group_hourly_2" disabled checked> 1AM - 2AM <input type=checkbox name="group_hourly_14" id="group_hourly_14" disabled checked> 1PM - 2PM </li>
<li> <input type=checkbox name="group_hourly_3" id="group_hourly_3" disabled checked> 2AM - 3AM <input type=checkbox name="group_hourly_15" id="group_hourly_15" disabled checked> 2PM - 3PM </li>
<li> <input type=checkbox name="group_hourly_4" id="group_hourly_4" disabled checked> 3AM - 4AM <input type=checkbox name="group_hourly_16" id="group_hourly_16" disabled checked> 3PM - 4PM </li>
<li> <input type=checkbox name="group_hourly_5" id="group_hourly_5" disabled checked> 4AM - 5AM <input type=checkbox name="group_hourly_17" id="group_hourly_17" disabled checked> 4PM - 5PM </li>
<li> <input type=checkbox name="group_hourly_6" id="group_hourly_6" disabled checked> 5AM - 6AM <input type=checkbox name="group_hourly_18" id="group_hourly_18" disabled checked> 5PM - 6PM </li>
<li> <input type=checkbox name="group_hourly_7" id="group_hourly_7" disabled checked> 6AM - 7AM <input type=checkbox name="group_hourly_19" id="group_hourly_19" disabled checked> 6PM - 7PM </li>
<li> <input type=checkbox name="group_hourly_8" id="group_hourly_8" disabled checked> 7AM - 8AM <input type=checkbox name="group_hourly_20" id="group_hourly_20" disabled checked> 7PM - 8PM </li>
<li> <input type=checkbox name="group_hourly_9" id="group_hourly_9" disabled checked> 8AM - 9AM <input type=checkbox name="group_hourly_21" id="group_hourly_21" disabled checked> 8PM - 9PM </li>
<li> <input type=checkbox name="group_hourly_10" id="group_hourly_10" disabled checked> 9AM - 10AM <input type=checkbox name="group_hourly_22" id="group_hourly_22" disabled checked> 9PM - 10PM </li>
<li> <input type=checkbox name="group_hourly_11" id="group_hourly_11" disabled checked> 10AM - 11AM <input type=checkbox name="group_hourly_23" id="group_hourly_23" disabled checked> 10PM - 11PM </li>
<li> <input type=checkbox name="group_hourly_12" id="group_hourly_12" disabled checked> 11AM - 12PM <input type=checkbox name="group_hourly_24" id="group_hourly_24" disabled checked> 11PM - 12AM </li>
</ul>
</li>
</ul>
</li>
</ul>
My HTML/web programming skills are pretty much at a newb level, and I've tried searching for a bit on this, but haven't found anything really relevant.
Below I have a sample of code that's using some jQuery (I think? Basically google treatment scraped together - I don't know the differences between javascript and jQuery) to disable/enable input objects on the page based on the choices. My intention is to compile a ColdFusion cfquery based off these selections to write more specific queries than the ones we're currently using.
Keeping in mind I definitely want to stick to CF for the SQL side of things (the infrastructure is already setup here, I have an app to reference already, etc), what's the best practice way to only send the enabled values through for processing? My thought was to use a form and open in new window, but I don't know how to submit only the 'enabled' input objects through. I figure potential options outside of that might be running the cfquery on all of the data on this page and having a "show" button that narrows things down (inefficient, would like to only query the data that I want), or figuring out a way to submit disabled objects with a throwaway value assigned to them that can be ignored on the form processing page....but I'm hoping some ninjas can tell me a ninja way to do it.
==============
<script language="javascript">
$(function() {
var top_group_radio_buttons = $("#month_to_month, #specific_month");
var top_group_checkboxes = $("#group_time_focus_monthly, #group_time_focus_dow, #group_time_focus_hourly");
var group_by_dow_objects = $("#group_dow_sunday, #group_dow_monday, #group_dow_tuesday, #group_dow_wednesday, #group_dow_thursday, #group_dow_friday, #group_dow_saturday");
var group_by_hourly_objects = $("#group_hourly_1, #group_hourly_2, #group_hourly_3, #group_hourly_4, #group_hourly_5, #group_hourly_6, #group_hourly_7, #group_hourly_8, #group_hourly_9, #group_hourly_10, #group_hourly_11, #group_hourly_12, #group_hourly_13, #group_hourly_14, #group_hourly_15, #group_hourly_16, #group_hourly_17, #group_hourly_18, #group_hourly_19, #group_hourly_20, #group_hourly_21, #group_hourly_22, #group_hourly_23, #group_hourly_24");
var month_to_month_objects = $("#starting_month, #starting_year, #ending_month, #ending_year");
$(":radio").click(function(event) {
if (this.id == "group")
{
top_group_radio_buttons.removeAttr("disabled");
top_group_checkboxes.removeAttr("disabled");
if ($("#group_time_focus_dow").is(":checked"))
{
group_by_dow_objects.removeAttr("disabled");
}
if ($("#group_time_focus_hourly").is(":checked"))
{
group_by_hourly_objects.removeAttr("disabled");
}
if ($("#month_to_month").is(":checked"))
{
month_to_month_objects.removeAttr("disabled");
$("#annual_month").attr("disabled", true);
}
if ($("#specific_month").is(":checked"))
{
month_to_month_objects.attr("disabled", true);
$("#annual_month").removeAttr("disabled");
}
}
else if (this.id == "individual")
{
top_group_checkboxes.attr("disabled", true);
top_group_radio_buttons.attr("disabled", true);
group_by_dow_objects.attr("disabled", true);
group_by_hourly_objects.attr("disabled", true);
month_to_month_objects.attr("disabled", true);
$("#annual_month").attr("disabled", true);
}
else if (this.id == "specific_month")
{
month_to_month_objects.attr("disabled", true);
$("#annual_month").removeAttr("disabled");
}
else if (this.id == "month_to_month")
{
month_to_month_objects.removeAttr("disabled");
$("#annual_month").attr("disabled", true);
}
});
});
$(function() {
$(":checkbox").click(function(event) {
if (this.id == "group_time_focus_dow")
{
var dow_objects = $("#group_dow_sunday, #group_dow_monday, #group_dow_tuesday, #group_dow_wednesday, #group_dow_thursday, #group_dow_friday, #group_dow_saturday");
if($(this).is(":checked"))
{
dow_objects.removeAttr("disabled");
}
else
{
dow_objects.attr("disabled", true);
}
}
if (this.id == "group_time_focus_hourly")
{
var hourly_objects = $("#group_hourly_1, #group_hourly_2, #group_hourly_3, #group_hourly_4, #group_hourly_5, #group_hourly_6, #group_hourly_7, #group_hourly_8, #group_hourly_9, #group_hourly_10, #group_hourly_11, #group_hourly_12, #group_hourly_13, #group_hourly_14, #group_hourly_15, #group_hourly_16, #group_hourly_17, #group_hourly_18, #group_hourly_19, #group_hourly_20, #group_hourly_21, #group_hourly_22, #group_hourly_23, #group_hourly_24");
if($(this).is(":checked"))
{
hourly_objects.removeAttr("disabled");
}
else
{
hourly_objects.attr("disabled", true);
}
}
});
});
</script>
<input type=radio name="group_or_individual" id="individual" value="individual" checked>Individual Statistics
<br /> <hr />
<input type=radio name="group_or_individual" id="group" value="group">Group Statistics
<ul id="List1" style="list-style-type: none;">
<li>
<input type=radio name="comparison_interval" id="month_to_month" value="month_to_month" disabled checked>Consecutive Month-to-Month Comparison (ie, Jan 2011, Feb 2011, Mar 2011, etc)
</li>
<li>
<input type=radio name="comparison_interval" id="specific_month" value="specific_month" disabled>Specific Month in Previous Years (ie, Jan 2010, Jan 2011, Jan 2012, etc) <li /> <li />
</li>
<li>
Starting Year
<select name="starting_year" id="starting_year" disabled>
<option value="2010">2010
<option value="2011">2011
</select>
Starting Month
<select name="starting_month" id="starting_month" disabled>
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4" selected>Apr
<option value="5">May
<option value="6">Jun
<option value="7">Jul
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
</li>
<li>
Ending Year
<select name="ending_year" id="ending_year" disabled>
<option value="2010">2010
<option value="2011">2011
</select>
Ending Month
<select name="ending_month" id="ending_month" disabled>
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4" selected>Apr
<option value="5">May
<option value="6">Jun
<option value="7">Jul
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
</li>
<li>
Specific Month to be Compared Annually
<select name="annual_month" id="annual_month" disabled>
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">Apr
<option value="5">May
<option value="6">Jun
<option value="7">Jul
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
</li> <li />
<ul id="List2" style="list-style-type: none;"
<li>
<input type=checkbox name="group_time_focus_monthly" id="group_time_focus_monthly" disabled checked><label>Call Data By Month</label>
</li>
<li>
<input type=checkbox name="group_time_focus_dow" id="group_time_focus_dow" disabled><label>Call Data By Day of Week</label> <li />
<ul id="List3" style="list-style-type: none;">
<li>
<b>Include Days:</b>
</li>
<li> <input type=checkbox name="group_dow_sunday" id="group_dow_sunday" disabled checked> Sunday </li>
<li> <input type=checkbox name="group_dow_monday" id="group_dow_monday" disabled checked> Monday </li>
<li> <input type=checkbox name="group_dow_tuesday" id="group_dow_tuesday" disabled checked> Tuesday </li>
<li> <input type=checkbox name="group_dow_wednesday" id="group_dow_wednesday" disabled checked> Wednesday </li>
<li> <input type=checkbox name="group_dow_thursday" id="group_dow_thursday" disabled checked> Thursday </li>
<li> <input type=checkbox name="group_dow_friday" id="group_dow_friday" disabled checked> Friday </li>
<li> <input type=checkbox name="group_dow_saturday" id="group_dow_saturday" disabled checked> Saturday </li>
</ul>
</li>
<li>
<input type=checkbox name="group_time_focus_hourly" id="group_time_focus_hourly" disabled><label>Call Data By Hourly Interval</label> <li />
<ul id="List4" style="list-style-type: none;">
<li>
<b>Include Hourly Interval:</b>
</li>
<li> <input type=checkbox name="group_hourly_1" id="group_hourly_1" disabled checked> 12AM - 1AM <input type=checkbox name="group_hourly_13" id="group_hourly_13" disabled checked> 12PM - 1PM </li>
<li> <input type=checkbox name="group_hourly_2" id="group_hourly_2" disabled checked> 1AM - 2AM <input type=checkbox name="group_hourly_14" id="group_hourly_14" disabled checked> 1PM - 2PM </li>
<li> <input type=checkbox name="group_hourly_3" id="group_hourly_3" disabled checked> 2AM - 3AM <input type=checkbox name="group_hourly_15" id="group_hourly_15" disabled checked> 2PM - 3PM </li>
<li> <input type=checkbox name="group_hourly_4" id="group_hourly_4" disabled checked> 3AM - 4AM <input type=checkbox name="group_hourly_16" id="group_hourly_16" disabled checked> 3PM - 4PM </li>
<li> <input type=checkbox name="group_hourly_5" id="group_hourly_5" disabled checked> 4AM - 5AM <input type=checkbox name="group_hourly_17" id="group_hourly_17" disabled checked> 4PM - 5PM </li>
<li> <input type=checkbox name="group_hourly_6" id="group_hourly_6" disabled checked> 5AM - 6AM <input type=checkbox name="group_hourly_18" id="group_hourly_18" disabled checked> 5PM - 6PM </li>
<li> <input type=checkbox name="group_hourly_7" id="group_hourly_7" disabled checked> 6AM - 7AM <input type=checkbox name="group_hourly_19" id="group_hourly_19" disabled checked> 6PM - 7PM </li>
<li> <input type=checkbox name="group_hourly_8" id="group_hourly_8" disabled checked> 7AM - 8AM <input type=checkbox name="group_hourly_20" id="group_hourly_20" disabled checked> 7PM - 8PM </li>
<li> <input type=checkbox name="group_hourly_9" id="group_hourly_9" disabled checked> 8AM - 9AM <input type=checkbox name="group_hourly_21" id="group_hourly_21" disabled checked> 8PM - 9PM </li>
<li> <input type=checkbox name="group_hourly_10" id="group_hourly_10" disabled checked> 9AM - 10AM <input type=checkbox name="group_hourly_22" id="group_hourly_22" disabled checked> 9PM - 10PM </li>
<li> <input type=checkbox name="group_hourly_11" id="group_hourly_11" disabled checked> 10AM - 11AM <input type=checkbox name="group_hourly_23" id="group_hourly_23" disabled checked> 10PM - 11PM </li>
<li> <input type=checkbox name="group_hourly_12" id="group_hourly_12" disabled checked> 11AM - 12PM <input type=checkbox name="group_hourly_24" id="group_hourly_24" disabled checked> 11PM - 12AM </li>
</ul>
</li>
</ul>
</li>
</ul>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你那里有的东西会很好用。禁用的表单字段不会在表单提交时发送。
需要非常小心的一件事是，仅仅因为前端有 javascript 正在尽其所能阻止事情发生，您的服务器端代码仍然需要假设所有即将发生的事情都是敌对的，并且需要检查所有输入以确保它们有效。
What you have there would work fine. Disabled form fields don't get sent on form-submit.
One thing to be VERY careful of is that, just because you have javascript on the front-end that is doing what it can to prevent things from coming through, your server-side code still needs to assume that everything coming to is is hostile and needs to check all inputs to make sure they are valid.
最好完全不使用 JavaScript 编写代码，并仅使用 ColdFusion 验证所有输入。一旦运行良好，然后并且只有到那时，添加您的 JS 验证。
JS 验证永远不应该单独使用，或者被认为是可靠的（在安全意义上）。就像上面有人说的； JS / jQuery 更多的是为了方便用户，因为它可以快速提示出了什么问题，而无需重新加载/发出另一个页面请求。
Javascript 是浏览器代码，而 jQuery 是一个基于 Javascript 构建的框架，它使事情变得更容易 - 就像您的例子中的表单验证一样。
如果某个字段位于页面中并且提交了表单，则所有字段（无论其状态如何）都将被提交。验证表单输入可以做的最好的事情是检查字符串长度是否大于 0 或您获得的数据类型（例如字符串或数字）。
祝你好运！
It is good practice to write your code using no JavaScript at all, and to validate all inputs using ColdFusion only. Once that is working well, THEN and only then, add your JS validation.
JS validation should NEVER be used alone, or be considered to be reliable (in a security sense). Like someone said above; JS / jQuery is more for the convenience of the user as it gives a quick hint at what went wrong without having to reload / make another page request.
Javascript is browser code, and jQuery is a framework built on Javascript that makes things a little easier - like in your case, form validation.
If a field is in the page and the form is submitted, then all fields, regardless of their status will be submitted. The best thing you can do to validate form inputs is to check things like length of the string is greater than 0 or the kind of datatype you're getting like a string or a number.
Good luck!