Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

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


Web-программирование. Java Script(JS): Взаимодействие с пользователем. Объект Form. Продолжение.

 

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

Программные продукты:

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

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

 

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

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

 

Продолжаем изучать объект форм. Создадим файл action.html:

<html>

    <head>

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

    </head>

    <body>

        <h1>Вы нажали на кнопочку</h1>

    </body>

</html>

 

И файл index.html:

<html>

    <head>

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

    </head>

    <body>

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

            function my_on_click() {

               

            }

        </SCRIPT>

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

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

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

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

        </form>

    </body>

</html>

 

Обратите внимание, что мы у формы добавили атрибут action, который указывает, какой файл должен запуститься при нажатии на кнопку типа Submit. Давайте проверим. Запускаем файл, нажимаем на Submit:

Web-программирование. Java Script(JS): Взаимодействие с пользователем. Объект Form. Продолжение.

 

И видим результат:

 

Web-программирование. Java Script(JS): Взаимодействие с пользователем. Объект Form. Продолжение.

 

 

Если у нас предопределен метод OnClick этой кнопочки, то сначала сработает он. Но вот отказаться от исполнения action в этом обработчике OnClick Довольно такие сложно (если вообще возможно), поэтому в таких случаях лучше всего делать кнопку типа не submit, а button, и, в случае необходимости, вызывать submit явно, например вот так:

<html>

    <head>

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

    </head>

    <body>

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

            function my_on_click() {

                var 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="reset" value="Reset" name="ButtonCancel">

        </form>

    </body>

</html>

 

 

Обратите внимание, здесь мы используем свойство формы action,  в котором храниться путь к запускаемому файлу, а так же используем метод submit, который, по своей сути, является аналогом кнопочки submit. Таким образом, при нажатии на Submit (который теперь уже не submit,  а просто так назыывается) у нас будет выдано сообщение:

 

Web-программирование. Java Script(JS): Взаимодействие с пользователем. Объект Form. Продолжение.

 

При ответе "ОК" мы перейдем к файлу action.html, а при ответе "Отмена" ничего не произойдет.

 

У объекта form есть следующие свойства:

  • action - содержит имя скрипта(путь), запускающийся по кнопочке submit, значение атрибута "action".

  • method - метод вызова action: GET или POST.

  • encoding - метод кодирования, применяемый браузером для кодирования передаваемой информации.

  • target - имя фрейма, куда должен быть загружен ответ, если не задан, то пусто.

  • name - имя формы, заданное в атрибуте NAME.

  • elements - список элементов формы.

  • length - количество элементов формы

Кроме того, форма содержит два специфических метода:

  • submit - выполняющий действия, аналогичные кнопке Submit - запуск скрипта action.

  • reset - сброс формы, аналог кнопки reset, приводит все поля в исходное состояние.

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 


В избранное