HTML формы

Тема в разделе "Веб-дизайн", создана пользователем 31ReG, 11 сен 2008.

Статус темы:
Закрыта.
Модераторы: zek24
  1. 31ReG

    31ReG Создатель

    Регистр.:
    17 авг 2008
    Сообщения:
    11
    Симпатии:
    0
    у меня есть вопрос связанный с htlm формой вида select.
    вот простая форма select
    PHP:
    <SELECT NAME="selection"
    <
    OPTION VALUE="option1" checked>Вариант 1 
    <OPTION VALUE="option2">Вариант 2
    <OPTION VALUE="option3">Вариант 3 
    </SELECT>
    подскажите как мне сделать чтоб при выборе Варианта 2 у меня ниже было написано например: Вариант 2 выбирать временно нельзя.
     
  2. braindancer

    braindancer Создатель

    Регистр.:
    7 май 2007
    Сообщения:
    46
    Симпатии:
    8
    Вообще логичнее было бы просто добавить в вариант 2 аттрибут disabled="disabled" (см. http://www.w3schools.com/TAGS/tag_option.asp)

    А так JavaScriptом можно:


    <SELECT NAME="selection" onchange="if (document.getElementById('option2').selected) {document.getElementById('option2').selected=false;document.getElementById('option1').selected=true;alert('You can't select option 2 please choose another option!');}">
    <OPTION VALUE="option1" id="option1" checked>Вариант 1
    <OPTION VALUE="option2" id="option2">Вариант 2
    <OPTION VALUE="option3">Вариант 3
    </SELECT>

    вот, но не проверял :)
     
    sorcer и 31ReG нравится это.
  3. megadude

    megadude

    Регистр.:
    6 сен 2006
    Сообщения:
    184
    Симпатии:
    65
    У меня что-то не заработало :)
    Поэтому написал такое:

    Код:
      <script type="text/javascript">
        function checkSelected(id) {
          name = document.form.selection.options[id].text;
          document.getElementById("message").innerHTML = "You can't select <b>" + name + "</b> temporarily!";
        }
      </script>
    
      <form name="form">
        <select name="selection" onchange="checkSelected(document.form.selection.selectedIndex);">
          <option value="option1">Case 1</option>
          <option value="option2">Case 2</option>
          <option value="option3">Case 3</option>
        </select>
      </form>
    
      <div id="message"></div>
    Работает не только при выборе варианта №2, но и любого другого ;)
     
    31ReG нравится это.
  4. braindancer

    braindancer Создатель

    Регистр.:
    7 май 2007
    Сообщения:
    46
    Симпатии:
    8
    Поправил свой вариант :)))

    Код:
    <html>
    <head></head>
    <body>
    		
    <script type="text/javascript">
    				
        function handleOnChangeEvent() {
            var firstOption = document.getElementById('option1');
            var disabledOption =  document.getElementById('option2');
    	if (disabledOption.selected) {
    	    disabledOption.selected = false;
    	    firstOption.selected = true; 
    	    alert('You can\'t select option 2 please choose another option!');
    	}
        }
    </script>
    		
    <SELECT NAME="selection" onchange="handleOnChangeEvent()">
    <option VALUE="option1" id="option1" checked>Вариант 1</option>
    <option VALUE="option2" id="option2">Вариант 2</option>
    <option VALUE="option3">Вариант 3</option>
    </SELECT> 
    
    </body>
    </html>
    
     
    31ReG нравится это.
  5. 31ReG

    31ReG Создатель

    Регистр.:
    17 авг 2008
    Сообщения:
    11
    Симпатии:
    0
    megadude: а можеш написать такоеже ток чтоб сообщение выводилось только при выборе напимер второго варианта
     
  6. megadude

    megadude

    Регистр.:
    6 сен 2006
    Сообщения:
    184
    Симпатии:
    65
    HTML остается тот же самый, а в яваскрипт добавляется одно условие:

    Код:
      <script type="text/javascript">
        function checkSelected(id) {
          if (id == 1) {
            name = document.form.selection.options[id].text;
            document.getElementById("message").innerHTML = "You can't select <b>" + name + "</b> temporarily!";
          }
        }
      </script>
    id должно быть 1 для второго варианта, 2 - для третьего и т.д. потому как нумерация начинается с 0.

    Кстати - ты хочешь напрочь запретить выбирать Вариант 2(как в коде коллеги braindancer-a) или просто выводить сообщение о том, что его выбирать нельзя, как у меня? :))))
     
    31ReG нравится это.
  7. Jameson

    Jameson Читатель

    Заблокирован
    Регистр.:
    25 июн 2007
    Сообщения:
    406
    Симпатии:
    92
    Кстати, с точки зрения юзабилити (да и безопасности) лучше вообще к чертям убрать варианты, которые нельзя выбирать. Вот кликну правой клавишей по твоей странице и попрошу мой любимый браузер Опера джаваскрипты не выполнять на ней :)
     
  8. megadude

    megadude

    Регистр.:
    6 сен 2006
    Сообщения:
    184
    Симпатии:
    65
    Очень правильное замечание. :ay:
    Никогда не надо надеяться на яваскрипт - любые данные приходящие от юзеров ВСЕГДА надо проверять на серваке. ПХП никакие шаловливые ручки не отключат, кроме своих.
    Яваскрипт - это навесные понты :) Красиво, иногда удобно, но не более того.
     
Статус темы:
Закрыта.