Все выпуски  

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

Интернет магазин.

В платном разделе

В бесплатном разделе

 

WEB-программирование: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Флажки и переключатели"

 

 

Исходники к уроку можно скачать здесь.

Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы раздела "Пишем Easy CMS") и  Разработка сервиса сайта на PHP на примере партнерской программы).

 

Продолжим изучать элементы диалога. Сегодня изучим флажок и переключатели. Для начала давайте рассмотрим пример:

 

<html>

    <head>

        <title>Урок 110. Java Script (JS): взаимодействие с пользователем</title>

    </head>

    <body>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function my_on_click() {

                var flag=true;

                if(myform.checkboxDemo.checked) {

                    flag=confirm("Вы действительно хотите запустить "+document.myform.action+"?");

                }

                if(flag) {

                    document.myform.submit();

                }      

            }

        </SCRIPT>

        <form name="myform" action="action.html">

            Введите что нибудь: <input type="text" name="TextBox" size="20">

            <input type="button" value="Submit" name="ButtonOk" onClick="my_on_click()">

            Запрашивать подтверждение запуска скрипта<input type="checkbox" name="checkboxDemo">

            <input type="reset" value="Reset" name="ButtonCancel">

        </form>

    </body>

</html>

 

Эта программа при нажатии кнопочки "Submit" будет спрашивать, запустить ли скрипт, если установлена галочка "Запрашивать подтверждение запуска скрипта":

 

WEB-программирование: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Флажки и переключатели"

 

 

Как видим, с флажками работать точно так же, как и с кнопками, только проверить, включен ли флажок, нужно через свойство checked.

 

А вот тот же самый пример, но с использование радиокнопок:

<html>

    <head>

        <title>Урок 110. Java Script (JS): взаимодействие с пользователем</title>

    </head>

    <body>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function my_on_click() {

                var flag=true;

                if(myform.radioDemo[0].checked) {

                    flag=confirm("Вы действительно хотите запустить "+document.myform.action+"?");

                }

                if(flag) {

                    document.myform.submit();

                }      

            }

        </SCRIPT>

        <form name="myform" action="action.html">

            Введите что нибудь: <input type="text" name="TextBox" size="20">

            <input type="button" value="Submit" name="ButtonOk" onClick="my_on_click()"><br>

            <input type="radio" name="radioDemo" checked>Запрашивать подтверждение запуска скрипта<br>

            <input type="radio" name="radioDemo">Запусть скрипт сразу<br>

            <input type="reset" value="Reset" name="ButtonCancel">

        </form>

    </body>

</html>

 

Вид будет совершенно другой:

WEB-программирование: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Флажки и переключатели"

 

Обратите внимание, что если у радиобуттонов одинаковые имена, то доступ к свойству checked происходит через индекс. Если использовать несколько радиокнопок с одним именем, и несколько с другим, например, вот так:

        <form name="myform" action="action.html">

            Введите что нибудь: <input type="text" name="TextBox" size="20">

            <input type="button" value="Submit" name="ButtonOk" onClick="my_on_click()"><br>

            <input type="radio" name="radioDemo" checked>Запрашивать подтверждение запуска скрипта<br>

            <input type="radio" name="radioDemo">Запусть скрипт сразу<br>

            <input type="radio" name="radioDemo1" value=0>Другое<br>

            <input type="radio" name="radioDemo1" value=1>Другое 1<br>

            <input type="radio" name="radioDemo1" value=2>Другое 2<br>

            <input type="reset" value="Reset" name="ButtonCancel">

        </form>

 

 

то они будут выбираться независимо:

 

WEB-программирование: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Флажки и переключатели"

 

С уважением, Шуравин Александр, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.


В избранное