Форма select с элементом по умолчанию переданным из javascript
Здравствуйте,
очень прошу помочь. Пишу web конфигуратор для микроконтроллера на котором поднят web сервер с файловой системой. не ругайте если что в JS делаю первые шаги. Как при открытии страницы передать в html ранее сохраненное пользователем на сервере значение (это должно быть значение по умолчанию) для формы select. Пользователь при необходимости выбирает новое и нажимает подтвердить. <div> <select name = Sample_Rate size=1 id="Sample_Rate"> <option VALUE="0">5</option> <option VALUE="1">10</option> <option VALUE="2">20</option> </select> </div> <div> <button id="systemSubmitButton">Submit</button> </div> |
Это должен делать сервер, отдавая страницу - сравнивать ранее полученное значение со значениями выводимых в html опций, и если равны, то добавлять опции selected.
|
То есть сервер сам должен сгенерировать html документ?
Сейчас он готовый лежит в файловой системе. |
А кто его должен генерировать? В любом случае сервер что-то должен отдать на запрос клиента. Пусть это будет чистый js сценарий, который уже на клиенте построит список и отметит выбранную опцию. Но кто принимает выбор пользователя и где его хранит чтобы потом его отметить при запросе клиента?
У вас должна быть форма, а не список с кнопкой submit. Если форму отправлять методом GET, то в файле можно разместить js-сценарий, который примет параметры, отметит выбранную опцию и вернет страницу клиенту. Что и как у вас работает не понятно, что значит ранее сделанный выбор сохраненный на сервере тоже темный лес. Чтобы сохранить на сервере нужен серверный язык, он у вас есть? |
ранее сделанный выбор это сохраненные фо флеш и считанные переменные в программе на си)))
И эта программа в том числе может обрабатывать поступающие от скрипта запросы. Хотелось бы чтобы скрипт получил нужные данные и нарисовал соответствующий список типа select |
Ну так пишите на си в файл ваш, по минимуму это может быть запись значения некой переменной, по которому js на клиенте при получении страницы отметит выбранную опцию. Либо на си отдавайте ваш html файл, в котором опции списка формируются выводом в цикле, с отметкой выбранного как было сказано выше. Что вы способны сделать на си в своем файле - записать/изменить некую строку или более сложное, формирование списка в цикле?
|
а можно сделать скрипт который нарисует список с выбранным параметром, который передаст сервер?
|
У меня просто около сотни параметров
|
Цитата:
|
я так понимаю что ajax есть
|
Json тоже но чтобы его прилепить ещё неделя уйдет
|
по крайней мере я реализовал на js передачу id нажатой кнопки в программу на си
ajax({ method: 'PATCH', url: '/api/mod', data: data }); |
Вот пример со списком, который на этой странице:
<html>
<head>
<meta charset="utf-8">
<title>Настройки</title>
<script src="http://domain_name/config.js"></script>
</head>
<body>
<form>
<div>
<select name="Sample_Rate">
<option value="0">5</option>
<option value="1">10</option>
<option value="2">20</option>
</select>
</div>
<div>
<button>Submit</button>
<div>
</form>
<script>
<script>
document.querySelector('[value="'+Sample_Rate+'"]').selected = true;
</script>
</script>
</body>
</html>
Переменная Sample_Rate имеет значение ранее выбранной в списке (то что в контроллере) и наряду с другими переменными конфигурации находится в подключаемом файле config.js. Его структура проста:
var Sample_Rate = 1,
имя следующего параметра = значение параметра,
и т.д.
При каждом выборе пользователя и передачи формы серверу весь выбор нужно записывать в этот файл в соответствующие переменные. Можно поступить и проще - если форма отправляется методом GET, то записывать в этот файл только строку параметров запроса, то что после ?. Скрипт в файле с формой разберет эту строку и уже после разбора будет оперировать полученными значениями. То есть от вас нужно только перезаписывать файл config.js при каждом получении формы, правда серверу обязательно нужно проверять что прислали, если только у вас не защищенный вход. |
Цитата:
|
Спасибо за пример, получилось его применить. Остается при включении процессора читать флеш и генерить файл с переменными вида
var Sample_Rate = 1, и т.д. Для меня это приемлемо. |
У меня в принципе везде выпадающие списки select так что особо проверять нечего. Сервер поднимается на точке доступа к которой подключается клиент по ssid и pass и делает настройки.
В принципе есть пару текстовых полей с адресами, вот на них хорошо бы поставить проверку на валидность, вроде я видел примеры на JS. |
Цитата:
В основном файле с формой разбиваете эту строку получая все нужное, и затем устанавливаете в форме. |
Цитата:
Цитата:
|
Ну да, фильтр на "базар" не помешает
|
Цитата:
Цитата:
Но учтите, все что проверяется на клиенте, это все для "хороших парней" на клиенте, а для сервера пустой звук, а крайним то всегда будет сервер. |
как взять со скрипта значение для поля input
<div> <span>Can ID (HEX):</span> <input maxlength="8" size="6" id="Can_ID" > </div> <script> xxxxxxxxxxxxxxxxxxxx </script> в скрипте написано var Can_IDs = 400; |
Can_ID.value = 400; |
почему то не получается ограничить ввод по количеству символов
<div> <span>Can ID (HEX):</span> <input type="text" id="Can_ID" onkeyup="var yratext=/['А-я','G-z','\s']/; if(yratext.test(this.value)) alert('Invalid value (valid: A,B,C,D,E,F,1,2,3,4,5,6,7,8,9,0)')" size="6"> </div> <script> Can_ID.value = Can_IDs; if ('+CanFrame_Typ+'=="Std") Can_ID.maxlength = "4"; if ('+CanFrame_Typ+'=="Ext") Can_ID.maxlength = "8"; </script> ------------------------------------------------------------- var CanFrame_Typ = "Ext"; var Can_IDs = "400"; |
<input maxlength="8" size="6" id="Can_ID" >
var Can_IDs = 400; Уже плохо. И взаимодействие клиента с сервером тайна покрытая мраком. Ajax? Да возможно, но это только в случае если изменение каждого параметра есть отдельный запрос. Можно в таком случае и установки контроллера запрашивать ajax запросом, при этом файл переменных в общем-то не нужен, тем более что все настройки пишутся в контроллер. В этом случае поля могут не иметь имен. Но в начале темы фигурирует submit, а это означает, что сначала выбрали, затем отправили весь выбор. Карячится при этом собирая поля по их ID, ну если охота заморачиваться, то можно. Но куда проще естественный путь - получить форму и отправить. Имена полей (если интерфейс оправдывает, то их ID) должны быть связаны с переменными так, чтобы с параметрами и полями формы можно было работать анонимно. Вы ведь сотню параметров хотите определить, что каждый Can_ID ручками связывать с каждым Can_ID? И это при том, что поля формы это коллекция, и в этой коллекции не так и много типов, которые различаются способом установки значений - selected, checked, value. Если при этом именовать поля с префиксами, которые будут определять группу типов полей, то хоть для нескольких сотен параметров их установка, это один цикл, максимум 10 строк кода. |
Ну у меня всё побито на вкладки. Максимум 5 форм с ID на вкладке и кнопка submit.При нажатии submit планировал переписывать область флеш и перегенирировать файл с переменными
|
Ну так форма отправляется естественным путем, а естественный путь, это поле формы должно иметь имя, иначе на сервер такое поле не передается. Вы же снабдили поля ID, а значит все придется описывать, причем все именуется так, что черт ногу сломит - переменные параметров никак не связаны с полями формы.
|
Имена у них будут одинаковые. Если интересно почитайте про nvs flash у ESP32. Там сохраняются как раз пары НАЗВАНИЕ .. ЗНАЧЕНИЕ
Подскажите всё же почему мой код не работает в плане параметра maxlength |
Во-первых выбрасывайте из атрибутов полей " if(yratext.test(this.value)) alert('Invalid value...". Во-вторых шаблон рег. выражения для проверки хранить в атрибуте pattern, и вместо js-кода в атрибутах определять сценарий - при отправлении формы проверить ввод, если определен pattern, значит рег выражением по этому шаблону. Поведение такого поля при некорректном вводе может определяться и стилями. И вообще, параметры могут быть различными (говорилось же о списках), и если это для себя, то может проще определить допустимые наборы, а свободный ввод, это типа для url.
Очень сложно что-то советовать, когда не видно концепции, а есть какие-то куски не понятно чего и для чего. ;) |
Установка Can_ID.maxlength = "4"; должна работать?
синтаксис правильный? |
<style>
.maxlen:invalid {
color: #f00
}
.maxlen:valid {
color: #444;
}
</style>
<input class="maxlen" pattern="[A-F\d]{1,6}" />
|
Цитата:
|
Цитата:
<script> Can_ID.value = Can_IDs; </script> |
Всё получилось, спасибо
|
Цитата:
Я теряю ход мысли, дальнейшее похоже на куски вырванные из контекста. :) Когда-то я вплотную занимался микроконтроллерами, имеется в виду Atmel, Microchip и т.п. Сейчас очень редко, когда нужно что-то для себя сделать. А контроллер, это цифровой автомат, выполняющий то, что предписано, изменили предписание, изменилось поведение. Я пишу либо на ассемблере, либо на си, при этом я могут портам назначить имена. Если я хочу управлять этими портами через интерфейс (форму), то мне выгодно имена этих портов связать так, что и программа на JS была не костылем с «ручной сборкой и установкой» параметров, а таким же цифровым автоматом. То есть, если речь о пяти формах, то один и тот же автомат обеспечивает работу со всеми формами, а как поступать с полями в той или иной форме, это будет предписано через атрибуты, группы имен классов, имена и т.п. Этого у вас нет. Более того, maxlength, это параметр, определяющий максимальную длину значения. Почему он изменяется динамически? Если это необходимо, то почему это не является частью задачи «js-автомата» и выглядит как одна из ручных операций среди сотни? Если я пишу интерфейс к своему контроллеру, доступ к нему имею только я, значит достаточно определить границы наборов ввода и выбора, причем многое может контролироваться не активным сценарием, а непосредственно браузером. Моей же главной задачей будет проверка на сервере – любое пришедшее поле не входящее в ожидаемый набор или же любое значение поля, которое не в границах допустимого, означает, что форма левая. Более что-то сказать еще я не могу, ибо не видно протокола, по которому обменивается клиент-сервер, как определяется параметр -> сопутствующее поле формы -> значение. Показываются куски непонятные и практически несвязуемые. :) Цитата:
|
А можно сделать чтобы в зависимости от выбранного значения в предыдущем selectE
<select name ="CanFrame_Type" id="CanFrame_Type"> <option value="Std">Std</option> <option value="Ext">Ext</option> </select> </div> тут менялось количество доступных для ввода символов 1-4 или 1-8 <style> .maxlen:invalid { color: #f00 } .maxlen:valid { color: #444; } </style> <input class="maxlen" pattern="[A-F\d]{1,6}" /> |
Можно, но почему при этом значения опций имеет не 4 и 8, а Std и Ext? Что проще - взять значение списка применяя его как параметр для поля формы или по строковому значению списка где-то выковырять сопутствующее цифровое значение, которое уже применить как параметр к полю формы?
У вас и с переменными так - у них одни имена, а поля для которых они определены вообще по иному дразнятся. Это не программа, это пятнашки, где вы вынуждены сами каждую руками двигать. ;) |
Допустим что у вас Ajax. В этом случае отправить форму, это ее сериализация (если JQ, то ее методы) или FormData(текущая форма). В любом случае поля формы должны иметь имена. Если имена полей это имена переменных, а форм несколько, то выгоден JSON:
//это установки контроллера и данные по формам
var data = {'#as1': [ //для одной формы
{'Sample_Rate': 1},
{'Sample_Volume': 2}
], '#as2': [ //для другой формы
{'var_Rate': 2},
{'var_Volume': 2}
]};
//как отметить выбор в формах
$.each(data, function(frm, opt) { //обходим объект
frm = document.querySelector(frm); //получили форму
$.each(opt, function(i, d) { //устанавливаем значения/выбор в полях
var name = Object.keys(d); //имя поля/параметра
frm[name].querySelector('[value="'+d[name]+'"]').selected = true; //установка
})
})
Если форма имеет флажки, радио кнопки, текстовые поля, то можно сгруппировать такие поля префиксами в именах, например списки, это sel_, флажки и кнопки, это chk_, val_ текстовое поле. Проверяя префикс имени можно определить действие, то есть для списка это найти соответствующий опшен, выбрав его, для флажков отметить/выбрать как checked, а для текстовых полей установить значение. То есть без всяких заморочек не оперируя явно именами. Всякие управляющие конструкции, типа как при изменении в списке изменить параметр поля, можно конечно и ID.параметр = IDs. А что если таких конструкций не одна? Допустим имеется ряд параметров длина значений которых может динамически изменяться. Следовательно нужно описать один обработчик для всех таких изменений. При этом длина параметра может задаваться как атрибутом maxlength, так и быть параметром рег. выражения. Значит нужно определить для обработчика элемент, в котором изменяется параметр, и где он находится. Сделать это можно просто через атрибут, который также будет служить селектором для установки обработчика:
<form>
<select data-max="max1,attr">
<option value="4">Short</option>
<option value="8">Long</option>
</select>
<input name="max1" maxlength="4" />
<select data-max="max2,reg">
<option value="4">Short</option>
<option value="8">Long</option>
</select>
<input name="max2" pattern="\d{1,4}" />
</form>
<script>
$('[data-max]').change(function() { //обработчик изменения параметров полей
var max = this.getAttribute('data-max').split(','), //элемент и место параметра
elm = this.form[max[0]]; //сам элемент
if(max[1]=='attr') elm.setAttribute('maxlength', this.value); //изменение параметра заданное атрибутом
else elm.pattern = elm.pattern.replace(/\d(?=\})/, this.value) //изменение параметра шаблона рег. выражения
})
</script>
|
Не хочу плодить темы. Ещё вопрос. Есть возможность вывести на страницу содержимое папки на сервере папка /logs/ в папке файлы с расширением .log
Чтобы нажав на файл он скачался. |
Если каталог не закрыт для прямого доступа, не запрещен листинг файлов в нем и он не имеет индексного файла, то запрос к этому каталогу в браузере и выведет список его файлов. Выбирайте, скачивайте. Но такой каталог и его файлы будут доступны всем.
|
Сорри, не могу никак найти команду для вывода листинга((
|
| Часовой пояс GMT +3, время: 17:16. |