#jquery #html #coldfusion
#jquery #HTML #coldfusion
Вопрос:
Мои навыки HTML / веб-программирования в значительной степени находятся на уровне newb, и я попытался немного поискать по этому вопросу, но не нашел ничего действительно важного.
Ниже у меня есть пример кода, который использует какой-то jQuery (я думаю? В основном обработка Google была скомпонована — я не знаю различий между javascript и jQuery), чтобы отключить / включить объекты ввода на странице на основе вариантов. Я намерен скомпилировать ColdFusion cfquery на основе этих выборок для написания более конкретных запросов, чем те, которые мы используем в настоящее время.
Имея в виду, что я определенно хочу придерживаться CF для SQL-стороны вещей (инфраструктура здесь уже настроена, у меня уже есть приложение для ссылки и т.д.), каков наилучший практический способ отправлять только разрешенные значения для обработки? Моей мыслью было использовать форму и открыть в новом окне, но я не знаю, как отправлять только «включенные» объекты ввода через. Я полагаю, что возможными вариантами помимо этого могут быть запуск cfquery для всех данных на этой странице и наличие кнопки «показать», которая сужает круг задач (неэффективно, хотелось бы запрашивать только те данные, которые я хочу), или поиск способа отправки отключенных объектов с присвоенным им одноразовым значением, которое можно игнорировать на странице обработки формы …. но я надеюсь, что некоторые ниндзя могут подсказать мне способ ninja для этого .
==============
<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 - 1AMamp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;<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 - 2AMamp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;<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 - 3AMamp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;<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 - 4AMamp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;<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 - 5AMamp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;<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 - 6AMamp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;<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 - 7AMamp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;<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 - 8AMamp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;<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 - 9AMamp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;<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 - 10AMamp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;<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 - 11AMamp;nbsp;amp;nbsp;amp;nbsp;<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 - 12PMamp;nbsp;amp;nbsp;amp;nbsp;<input type=checkbox name="group_hourly_24" id="group_hourly_24" disabled checked> 11PM - 12AM </li>
</ul>
</li>
</ul>
</li>
</ul>
Комментарии:
1. Вот пример того, что вы опубликовали: jsfiddle.net/cdeszaq/p3WT3
Ответ №1:
То, что у вас есть, будет работать нормально. Отключенные поля формы не отправляются при отправке формы.
Одна вещь, с которой следует быть ОЧЕНЬ осторожным, заключается в том, что только потому, что у вас есть javascript во внешнем интерфейсе, который делает все возможное, чтобы предотвратить прохождение чего-либо, ваш серверный код по-прежнему должен предполагать, что все, что поступает в is, является враждебным и нуждается в проверке всех входных данных, чтобы убедиться, что они действительны.
Комментарии:
1. Что ж, это упрощает задачу! Да, хороший момент… Я хочу выполнить больше отслеживания ошибок, но я не уверен, на какой стороне я это сделаю — с помощью функции отправки jQuery на интерфейсной стороне (или чего-то подобного, пока выполнено минимальное чтение), или больше на серверной части, или обоих, если необходимо.
2. @pojonak — Вам ВСЕГДА нужно выполнять всю необходимую проверку ошибок на серверной части. Проверка ошибок во внешнем интерфейсе в основном предназначена для удобства пользователя, поскольку тогда им не придется ждать обхода сервера в оба конца.
Ответ №2:
Рекомендуется писать свой код вообще без использования JavaScript и проверять все входные данные только с помощью ColdFusion. Как только это сработает хорошо, ТОГДА и только тогда добавьте свою проверку JS.
Проверка JS НИКОГДА не должна использоваться отдельно или считаться надежной (в смысле безопасности). Как кто-то сказал выше; JS / jQuery больше для удобства пользователя, поскольку он дает быстрый намек на то, что пошло не так, без необходимости перезагружать / делать другой запрос страницы.
Javascript — это код браузера, а jQuery — это фреймворк, построенный на Javascript, который немного упрощает работу — например, в вашем случае проверку формы.
Если поле находится на странице и форма отправлена, то будут отправлены все поля, независимо от их статуса. Лучшее, что вы можете сделать для проверки входных данных формы, это проверить такие вещи, как длина строки больше 0 или тип данных, который вы получаете, например, строку или число.
Удачи!