[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Прорисовка компонент
Форум PHP программистов > JavaScript
Aleksey
18.04.2011 - 02:31
Здравствуйте!
Вопрос у меня несколько дурацкий, но тем не менее как его в поисковик забить, я не знаю, потому решил спросить тут.
В общем задача у меян такая. Есть, например, на форме 3 текстовых поля (Фамилия, Имя, Отчество) и есть один чекбокс (Домашний адрес).
Если этот чекбокс активирован, то ниже него пусть прорисуется еще одно текстовое поля для ввода дом. адреса.
Вроде бы задача простая, но как вбить в поисковить - не знаю и сам в яваскрипте не силен.
Подскажите как такое сделать!



Спустя 13 минут, 24 секунды (18.04.2011 - 01:45) waldicom написал(а):
CSS
display: none
display: block

Спустя 20 часов, 56 минут, 8 секунд (18.04.2011 - 22:41) Aleksey написал(а):
waldicom, а на примере простом можете показать?

Спустя 18 минут, 19 секунд (18.04.2011 - 22:59) Snus написал(а):
Aleksey
<br /><input type="text" value="ФИО" />
<br /><input type="checkbox" onChange="document.getElementById('addr').style.display = this.checked ? 'block' : 'none'" />
<br /><textarea style="display: none;" id="addr">Адрес</textarea>

Спустя 2 часа, 45 минут, 16 секунд (19.04.2011 - 01:44) Aleksey написал(а):
Snus, благодарю! smile.gif
Но вот только в IE почему-то не работает...
Точнее работает, только вот так:
Я нажимаю на чекбокс - ничего не происходит, а потом просто в области окна браузера мышкой еще раз ткну - этот текстария появляется...

Спустя 7 минут, 51 секунда (19.04.2011 - 01:52) inpost написал(а):
Aleksey
Попробуй поменять местами: != ? 'none' : 'block'

Спустя 9 часов, 16 минут, 58 секунд (19.04.2011 - 11:09) Aleksey написал(а):
inpost, попробовал - нуль эмоций вообще...

Спустя 6 минут, 56 секунд (19.04.2011 - 11:16) sergeiss написал(а):
Замени событие "onchange" на "onclick" и всё должно будет заработать. А содержимое оставь то же, что и было написано.
ОнКлик срабатывает при отпускании кнопки мышки, а ОнЧендж - по разному в разных браузерах (что ты и увидел живьём).

Спустя 1 день, 12 часов, 31 минута, 37 секунд (20.04.2011 - 23:48) Aleksey написал(а):
sergeiss, точно!)
Спасибо!

Спустя 3 дня, 20 часов, 39 минут, 19 секунд (24.04.2011 - 20:27) Aleksey написал(а):
Вопрос из той же серии.
Есть Селект с 3-мя вариантами выбора. Куда мне такого же плана событие (про которое тут писали) влепить, чтобы прорисоввывался конкретный ДИВ ?

Тип документов 
<select name='type_doc' style='width:123px;'>
     <option value='in_doc'>Входящие</option>
     <option value='out_doc'>Исходящие</option>
     <option value='inside_doc'>Внутренние</option>
</select><br><br>

<div id='block_in' style="display:block;">
     <input type='text' name='date_begin' size=15 tabindex="2" value="входящий">
     <input type="submit" name="submit" value="Поиск" title='Найти документы'>
 </div>
 <div id='block_out' style="display:none;">
     <input type='text' name='date_begin' size=15 tabindex="2" value="исходящий">
     <input type="submit" name="submit" value="Поиск" title='Найти документы'>
</div>
<div id='block_inside' style="display:none;">
    <input type='text' name='date_begin' size=15 tabindex="2" value="внутренний">
    <input type="submit" name="submit" value="Поиск" title='Найти документы'>
</div>

Спустя 1 час, 22 минуты, 14 секунд (24.04.2011 - 21:49) inpost написал(а):
Aleksey
тут скорее всего onChange на select, проверяй, какой сейчас выбран.

Спустя 1 час, 38 минут, 31 секунда (24.04.2011 - 23:28) Aleksey написал(а):
пример бы smile.gif

Спустя 1 день, 13 часов, 43 минуты, 11 секунд (26.04.2011 - 13:11) djar написал(а):
Подскажите, как сделать практически то же самое, только чтобы объект отображался/скрывался по нажатию на ссылку, ну и ещё текст самой ссылки тоже менять.
Получилось сделать отображение по нажатию на ссылку:

<a href="#sqlcode" onclick="document.getElementById('sqlcode').style.display = this.href ? 'block' : 'none'">
Показать/Скрыть</a>
<a name="sqlcode">
<pre class="code" id="sqlcode" style="display: none;">
...
</pre>
</a>
Ещё бы скрывать:) Ну и текст ссылки менять.

Спустя 37 минут, 9 секунд (26.04.2011 - 13:48) djar написал(а):
Разобрался сам. Подумал головой немного и разобрался)
Сделал две ссылки, одна "Показать", вторая "Скрыть", которая по умолчанию скрыта. По нажатию на первую - показываю <div> и вторую ссылку и скрываю первую, по нажатию на вторую ссылку - скрываю див и вторую ссылку и показываю первую smile.gif Ну и изменил display: block на display: inline. Интересная штука яваскрипт.

Спустя 3 дня, 7 часов, 32 минуты, 44 секунды (29.04.2011 - 21:21) Aleksey написал(а):
Господа, а если там делать не чекбокс, а радиогруппу?
Делаю по аналогии, как Snus подсказал, не пашет как надо. Тут надо уже логику писать или же можно какой-то одной строчкой, типа:
onClick="document.getElementById('block_1').style.display = this.checked ? 'block' : 'none' "


?
А то тут ОНКлик не работает как надо: при выборе 1-го и 2-го варианта должен блок 1 рисоваться, а при выборе 3-го варианта 2-й блок. Так вот если я прям подряд буду тыкать на них: 1-й, 2-й и 3-й, то в итоге будут 2 блока отображены...
Т.е я про то, что тут надо уже логику писать как таковую, или не обязательно?

<FORM>
      <input type="radio" name="group" value="rep_1"  tabindex="12" style="margin-left:0px;"
              onClick="document.getElementById('block_1').style.display = this.checked ? 'block' : 'none'">
      Справка о выполнении поручений<br> 
      
      <input type="radio" name="group" value="rep_2"  tabindex="13" style="margin-left:0px;" 
              onClick="document.getElementById('block_1').style.display = this.checked ? 'block' : 'none'">
      Сводка о задержанных поручениях с грифом ВК (по исполнителям)<br>                
      
      <input type="radio" name="group" value="rep_3"  tabindex="14" style="margin-left:0px;" 
              onClick="document.getElementById('block_2').style.display = this.checked ? 'block' : 'none'">
       Сводка о неисполненных поручениях с грифом ВК<br><br><br>
       
       
      <div id='block_1' style="display:none;">
        Текст 1<input type='text' name='date_begin' size=15 tabindex="2" value="раз">
        <select name="type_print_2"><option value="word">MS Word</option><option value="excel">MS Excel</option></select>  
        <input type="submit" name="submit_2" value="Сформировать" title='Сформировать отчёт'>
      </div>
     
      <div id='block_2' style="display:none;">
        Текст 2<input type='text' name='date_rep' size=15 tabindex="2" value="два">

        <select name="type_print_3"><option value="word">MS Word</option><option value="excel">MS Excel</option></select>  
        <input type="submit" name="submit_3" value="Сформировать" title='Сформировать отчёт'>
      </div>            
</FORM>

Спустя 2 часа, 52 минуты, 40 секунд (30.04.2011 - 00:13) Aleksey написал(а):
Я вот так сделал, но может как-то можно проще?

<script language="JavaScript">
function Click()
{
    var r_1 = document.getElementById("rep_1").checked;
    var r_2 = document.getElementById("rep_2").checked;
    var r_3 = document.getElementById("rep_3").checked;
	
    if(r_1 || r_2)
    {
	document.getElementById('block_1').style.display = 'block';
	document.getElementById('block_2').style.display = 'none';
    }
    if(r_3)
    {
	document.getElementById('block_2').style.display = 'block';
	document.getElementById('block_1').style.display = 'none';
    }
}
</script>

<FORM>
      <input type="radio" name="group" value="rep_1" id="rep_1" tabindex="12" style="margin-left:0px;"
              onClick="Click()">
      Справка о выполнении поручений<br> 
      
      <input type="radio" name="group" value="rep_2" id="rep_2" tabindex="13" style="margin-left:0px;" 
              onClick="Click()">
      Сводка о задержанных поручениях с грифом ВК (по исполнителям)<br>                
      
      <input type="radio" name="group" value="rep_3"id="rep_3" tabindex="14" style="margin-left:0px;" 
              onClick="Click()">
      Сводка о неисполненных поручениях с грифом ВК<br><br><br>
       
       
      <div id='block_1' style="display:none;">
        Текст 1<input type='text' name='date_begin' size=15 tabindex="2" value="раз">
        <select name="type_print_2"><option value="word">MS Word</option><option value="excel">MS Excel</option></select>  
        <input type="submit" name="submit_2" value="Сформировать" title='Сформировать отчёт'>
      </div>
     
      <div id='block_2' style="display:none;">
        Текст 2<input type='text' name='date_rep' size=15 tabindex="2" value="два">

        <select name="type_print_3"><option value="word">MS Word</option><option value="excel">MS Excel</option></select>  
        <input type="submit" name="submit_3" value="Сформировать" title='Сформировать отчёт'>
      </div>            
</FORM>
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.