| |
|
|
| | Всем привет. Моя логика заточена под РНР и MySQL, поэтому в JS мне тяжело.
Поставил себе задачу.
При вводе в поле input (если на этом поле нет блокировки) значения, должно блокироваться поле select, при удалении текста из input есдественно disabled селекта должно сбросится.
и тоже самое наоборот, при выборе любого значения кроме значения по умолчанию select (если оно не блокировано), блокируется input и соответственно при выборе дефолтного значения input должен разблокироваться.
В идеале конечно наделить функцию универсальностью, чтобы количество блокируемых не ограничивалось двумя полями и их типом, но пока хочу сделать как написано в задании.
Пробовал начинать учить JS "с первой страницы" книг, но просто растворяюсь, хочу попробовать заход со стороны практики :)
вот форма:
echo "<form action='' method='POST'>
<p>Введите название фирмы или выбирите из списка</p>
<p>Новая фирма: <input type='text' name='firm' value='' /></p>
<p>Фирма из БД: ";
if(mysql_num_rows($res)>0){
echo "<select name='fsel' id='fsel' size='1'>
<option selected value=''>выбирайте</option>";
while($m=mysql_fetch_assoc($res)){
echo "<option value='$m[f_id]'>$m[f_name]</option>";
}
}else{
echo "<select disabled name='fsel' size='1'>
<option selected value=''>Фирмы не найдены</option>";
}
echo "</select></p>
<p>Укажите сумму: <input type='text' name='sum[]' value='' /></p>
<p>Укажите сумму: <input type='text' name='sum[]' value='' /></p>
<p>Укажите сумму: <input type='text' name='sum[]' value='' /></p>
<p><input type='submit' name='go' value='Добавить запись в БД' /></p>
</fopm>";
|
кому интересно вот тема с полным скриптом в конце темы | |
| |
|
|
| |
|
|
| |
для: Valick
(23.12.2012 в 13:34)
| | | запустите свой файл в браузере, скопируйте браузерный исходный код и выложите его здесь
тогда поможем | |
| |
|
|
| |
|
|
| |
для: ЯСА
(23.12.2012 в 13:38)
| | |
<form action='' method='POST'>
<p>Введите название фирмы или выбирите из списка</p>
<p>Новая фирма: <input type='text' name='firm' value='' /></p>
<p>Фирма из БД: <select name='fsel' id='s1' size='1'>
<option selected value=''>выбирайте</option>
<option value='1'>Маргарита</option></select></p>
<p>Укажите сумму: <input type='text' name='sum[]' value='' /></p>
<p>Укажите сумму: <input type='text' name='sum[]' value='' /></p>
<p>Укажите сумму: <input type='text' name='sum[]' value='' /></p>
<p><input type='submit' name='go' value='Добавить запись в БД' /></p>
</fopm>
|
отличий мало, база пустая, а форма генериться автоматически, сейчас добавлю в базу фирмы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример страницы</title>
</head>
<body>
<p><a href='?action=crbase'>создать базу данных</a></p>
<form action='' method='POST'>
<p>Введите название фирмы или выбирите из списка</p>
<p>Новая фирма: <input type='text' name='firm' value='' /></p>
<p>Фирма из БД:
<select name='fsel' id='s1' size='1'>
<option selected value=''>выбирайте</option>
<option value='1'>Маргарита</option>
<option value='2'>Рога и копыта</option>
<option value='3'>Строймонтажсервис</option>
</select></p>
<p>Укажите сумму: <input type='text' name='sum[]' value='' /></p>
<p>Укажите сумму: <input type='text' name='sum[]' value='' /></p>
<p>Укажите сумму: <input type='text' name='sum[]' value='' /></p>
<p><input type='submit' name='go' value='Добавить запись в БД' /></p>
</fopm>
</body>
</html>
|
тут еще один нюанс, при совершенно пустой базе будет <select name='fsel' id='s2' size='1'> сразу блокированный селект, и при очистке input disable уже не должен сбрасываться
я так понимаю событие должно быть onfocus
на отключенный элемент я так понимаю onfocus уже не сработает? | |
| |
|
|
| |
|
|
| |
для: Valick
(23.12.2012 в 13:43)
| | | значит как-то так?
<input type='text' name='firm' id='f1' onfocus='kacheli(s1)' value='' /> | |
| |
|
|
| |
|
|
| |
для: Valick
(23.12.2012 в 14:16)
| | | [пустое value и type="text" указывать вовсе не обязательно, они по-умолчанию таковые]
итак, для
<input name='firm' id='f1' /> и <select name='fsel' id='s1' size='1'>
можно сделать следующее:
1) по onfocus в инпуте включаем таймер, который периодически проверяет наличие/отсутствие значения у инпута и, соответственно, делает селект c id="s1" недоступным/доступным
2) по onblur таймер выключаем
3) так как при пустой базе у вас изменится id у селекта на "s2", то, значит, в п. 1 надо включать проверку наличия тега с id="s1"
для упрощения кода используем то, что при указании валидного значения для id во всех браузерах автоматически создаётся объект с именем == этому значению id
[в скобках отмечу, что именно ПОЭТОМУ надо давать валидные значения для id, а именно - содержащие латинские буквы любого регистра, арабские цифры и символ подчёркивания, причём начинаться id должно с буквы
и именно ПОЭТОМУ значения id должны быть уникальными на странице не только в HTML-коде, но и в скрипте, т.е. если уж дал какому-то тегу id="abcd", то более это abcd нигде использовать не надо - ни как имя переменной/объекта/функции, ни как имя класса, ни как name какого-нить тега]
...
<input name='firm' id='f1' onfocus="kacheli (this)" onblur="clearInterval (TMR)" />
...
<select name='fsel' id='s1' size='1' onchange="this.form.firm.disabled = this.selectedIndex">
<script>
function kacheli (x)
{
if (x) this.FRM = x.form; this.TMR = setInterval (function ()
{if (s1) FRM.fsel.disabled = (FRM.firm.value.length)}, 100);
}
</script>
|
скриптовой блок можете поместить либо в хедере страницы (между <head> и </head>)
либо в любом месте страницы после закрывающего тега формы </form> | |
| |
|
|
| |
|
|
| |
для: ЯСА
(23.12.2012 в 14:47)
| | | Спасибо большое за лекцию об id! | |
| |
|
|
| |
|
|
| |
для: ЯСА
(23.12.2012 в 14:47)
| | | ЯСА, спасибо.
value в последствии будут заполнены, если возникнет необходимость изменить или дополнить значения формы после валидации на сервере.
про text не знал, спасибо.
в коде почти разобрался, добавил второй параметр для передачи id блокируемого элемента
но не совсем понятно как проходит проверка длины данных инпута, на счет этого погуглю
я так понимаю для селекта такой код уже не проканает, да и события там onchange и onreset соответственно скорее всего.
про именование id помню еще с первого обращения к книгам, но вот наступает какой-то момент и все стопориться :)
скрипт предпочитаю в хедере для порядка, если логика не требует конкретного места, ну до таких логик я еще не добирался. | |
| |
|
|
| |
|
|
| |
для: Valick
(23.12.2012 в 15:39)
| | | про селект ничего не понял - для него скрипт я же написал
onchange="this.form.firm.disabled = this.selectedIndex"
или не увидели?
-------
кстати, исправьте мою ошибку
вместо if (s1) пропишите if (typeof s1 != 'undefined') | |
| |
|
|
| |
|
|
| |
для: ЯСА
(23.12.2012 в 15:41)
| | | Извините, а что происходит в недрах памяти с элементами, id которых не указан явно? Им что-то присваивается? И возможно ли узнать, что именно?
Спасибо. | |
| |
|
|
| |
|
|
| |
для: Deed
(23.12.2012 в 15:47)
| | | 1. всякий HTML-тег на странице - это объект
2. как только в процессе загрузки файла очередной тег прочитан и разобран парсером, в динамической объектной модели (DOM) СРАЗУ появляется новый объект, причём он сразу занимает своё место в иерархии
причём тег ещё может не успеть отобразился на странице, но через DOM к нему уже есть доступ
3. DOM - это, грубо говоря, некая таблица, условно напоминающая вид проводника Windows и где каждый объект (HTML-тег), имеющий дочерние теги, представлен как "папка", а не имеющий - как файл
т.е. сразу видно - кто во что входит
4. и СРАЗУ же пополняются все DHTML-коллекции для всех уже имеющихся в DOM объектов
5. обращение к любому объекту из DOM происходит по его месту в DOM
потому что в DOM на самой "верхней ступеньке" находится "папка" window, в неё ниже ступенькой входит папка document, а через два эти объекта всегда можно обратиться к любому объекту, в них входящие
6. кроме того, в DOM есть и ещё один "зарезервированный" в DOM объект - это тело документа (тег <body>)
кстати, даже если вы в коде <body></body> вовсе не пропишете - он будет создан автоматически, перед первым не-"хедерным" тегом ("хедерными" являются только те, что должны быть между <head> и </head>: <Base>, <Link>, <Script>, <Head>, <Meta>, <Style>, <Isindex>, <NextID>, <Title>)
проверьте на примере - тега <body> нет, он ещё не закрыт (и никогда не будет закрыт), а ко второму <span>'у уже можно обратиться и именно через объект body
<span>bla</span>
<span>bla_bla</span>
<script>alert (document.body.getElementsByTagName ('span') [1].innerHTML)</script>
<span>bla_bla_bla</span>
|
7. каждому объекту (HTML-тегу) сразу же по помещении его в DOM прописываются абсолютно ВСЕ его предустановленные свойства и атрибуты: и те, которые указаны в HTML-коде, и те, которые не прописаны - независимо от того, имеют ли они дефолтные значения или не имеют
и все доступные для этого тега события тоже прописываются - значением для них является функция null
т.е. если вы напишете просто <b></b>, то в DOM'e для него СРАЗУ и АВТОМАТИЧЕСКИ появятся и атрибут CLASS=""(свойство className=""), и атрибут DIR="ltr" (свойство dir="ltr"), и свойство offsetWidth="фактическая ширина", и событие onclick=null... и ещё много-много чего
8. причём с появлением каждого нового тега в DOM всем предыдущим объектам "перепрописываются" их свойства - для первого <span>'a из предыдущего примера сначала свойство nextSibling будет равен null, а после появления второго <span>'a у первого изменится nextSibling - он станет ссылкой на второй <span>
так что первое слово в DOM - "динамическая" - оно оправдывает себя ещё в процессе загрузки страницы
9. атрибуты и свойства тегов - это разные вещи
атрибут - это всегда ещё и свойство объекта и принимать может значения только трёх типов: Nubmer, Boolean или String
а вот свойство - это не всегда атрибут, и принимать может значение любого типа
10. id - это всего лишь атрибут (оно же - свойство) любого тега
если id не указан в HTML-коде, то у объекта будет прописано id="" (пустая строка) | |
| |
|
|
| |
|
|
| |
для: ЯСА
(23.12.2012 в 16:36)
| | | Спасибо большущее! Вы так все хорошо объяснили, что я буквально увидел структуру DOM перед глазами!
С Наступающим Вас! Здоровья и счастья!! | |
| |
|
|
| |
|
|
| |
для: ЯСА
(23.12.2012 в 15:41)
| | | хм, и правда не увидел про селект))
ошибку исправлю, но вроде и так работает, сейчас убегаю, позже разберусь в разнице | |
| |
|
|
|
| |
|
|
| |
для: Deed
(23.12.2012 в 15:11)
| | | спасибо, изучу | |
| |
|
|
