How can I restrict passing values on disabled HTML input objects for processing by a ColdFusion cfquery?
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开发者_如何学Go="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>
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.
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!
加载中,请稍侯......
精彩评论