Обращение к элементам формы из JavaScript

@Pasha-1990 · Регистрация: 09.04.2011

Студворк — интернет-сервис помощи студентам

Добрый вечер. У меня такая проблема. Занимаюсь с формами. Страница наполнена различными элементами:текстовое поле,флажки,радиопереключатель,выпадающи е списки,кнопка-очистить форму,выпадающий список и текстовая область. Вот в эту текстовую область нужно после заполнения формы и нажатии кнопки поместить всю информацию.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
<head>
<script>
aaa=' '
</script>
</head>
<body>
 
<form name="f1">
 
<b>Введите Ваше имя</b>   <input type="text" name ="fio" value=" "size="30"><br>
<br><b>Ваш пол</b> <br>
<input type="radio"name="r1">мужской<br>
<input type="radio"name="r1" checked>жeнский<br><br>
 
Ваш статус</br>
<select name="st1" size=1>
<option>ученик
<option>студент
<option>специалист
<option>безработный
</select><br><br>
За какую(-ие) команду(-ы) Вы болеете???<br>
<input type="checkbox" name="w">CSKA<br>
<input type="checkbox" name="w">MU<br>
<input type="checkbox" name="w">Real<br>
<input type="checkbox" name="w">Milan<br><br>
Ваша информация о себе<br>
<textarea cols=100 rows=10></textarea><br><br>
 
<input type="submit"value="принять">
<input type="reset" name="reset" value="Очистить"> 
</form>
<script>
function qwe()
{
(idx=document.f1.st1.selectedIndex)
 a=document.f1.st1.option[idx].text
}
</script>
</body>
</html>

я так понимаю,что нужно прописать функцию после формы,чтобы обратиться к элементу формы,затем функцию для кнопки,чтобы эта кнопка отправляла инфо в текстовую область? только какая там функция должна быть?

@Опан · 13.10.2011, 23:56

Вот Вам простой пример этих функций:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form name=myform>
<input type=text name=textbox>
<a href=# onClick=otpravka()>Отправить</a>
<a href=# onClick=ochistka()>Очистить</a>
</form>
<div id=textovaya_oblast></div>
<script>
 
function otpravka(){ // отправляем содержимое поля для ввода в текстовую область.
 document.getElementById('textovaya_oblast').innerHTML=document.myform.textbox.value;
}
 
function ochistka(){ //чистим всё.
 document.myform.textbox.value=""; //чистим поле для ввода.
 document.getElementById('textovaya_oblast').innerHTML=""; //чистим текстовую область.
}
 
</script>

Внедрите это в Ваш код.

@Vicont · 14.10.2011, 00:39

Pasha-1990, При оформлении кода, пожалуйста, используйте соответствующие теги.
Вот код: (Вставьте его между тегами head)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    <script type="text/javascript">
        // Сбор данных из формы
        function mixtureDate(){
          //Строка с данными
          var data = "";
          //Список команд
          var teams = "";
          // Счетчик команд
          var counter_team = 0;
          //Обращение к форме по ее идентификатору
          var form = document.getElementById('f1');  
          //Получение массива всех элементов input формы
          var mas_input = form.getElementsByTagName("input");
          
          //Перебор всех элементов input
          for(i=0; i<mas_input.length; i++)
          {
            if(mas_input[i].type == 'text')
                data += "Ваши ФИО: " + mas_input[i].value +"\n";
            if (mas_input[i].type == 'checkbox' && mas_input[i].checked)
            {
                 teams += mas_input[i].value + " ";
                 counter_team++;
            }
            if (mas_input[i].type == 'radio' && mas_input[i].checked)
                data += "Ваш пол:  "+mas_input[i].value+"\n";
          }
          
          //Массив элементов выпадающего списка
          var mas_option = document.getElementsByTagName('select')[0];
          data += "Ваш статус:  "+mas_option.options[mas_option.selectedIndex].text +"\n";
     
          if (counter_team)
            if (counter_team > 1)
                data += "Болеете за команды:  "+teams+"\n";
            else
                data += "Болеете за команду:  "+teams+"\n";
    
          //Вываод данных в текстовое поле
          document.getElementById("result").innerHTML = data;
          //Для предотвращения отправки данных формы на сервер
          return false; 
        }
    </script>

Вот HTML код (немного видоизменен)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Vicont</title>
        <!--
            Сюда вставьте скрипт
        -->
</head>
<body>
    <form id="f1" onsubmit="return mixtureDate()">
        <b>Введите Ваше имя</b> <input type="text" name ="fio" id ="fio" value=" "size="30"/><br/><br/>
        <b>Ваш пол</b><br/>
                <input type="radio" name="r1" value="мужской" />мужской<br/>
                <input type="radio" name="r1" checked="checked" value="жeнский"/>жeнский<br/><br/>
        Ваш статус<br/>
            <select name="st1" size="1">
                <option>ученик</option>
                <option>студент</option>
                <option>специалист</option>
                <option>безработный</option>
            </select><br/><br/>
            
        За какую(-ие) команду(-ы) Вы болеете???<br/>
        <input type="checkbox" name="w[]" value="CSKA" />CSKA<br/>
        <input type="checkbox" name="w[]" value="MU" />MU<br/>
        <input type="checkbox" name="w[]" value="Real" />Real<br/>
        <input type="checkbox" name="w[]" value="Milan" />Milan<br/><br/>
        
        Ваша информация о себе<br/>
        <textarea cols="100" rows="10" id="result"></textarea><br/><br/>
 
        <input type="submit" value="принять"/>
        <input type="reset" name="reset" value="Очистить"/> 
    </form>
</body>

@Ципихович Эндрю · 14.10.2011, 20:41

Vicont, опробовал Ваш код, на арабском

))
êàêóþ(-èå) êîìàíäó(-û) Âû áîëååòå
???

@Vicont · 14.10.2011, 21:08

Ну недавно перешел на новый редактор phpDesigner, кодировку забываю менять на utf-8

@Pasha-1990 · 21.10.2011, 15:10 **[ТС]**

Сообщение от Vicont

JavaScript
1
2
data += "Ваши ФИО: " + mas_input[i].value +"\n";
if (mas_input[i].type == 'checkbox' && mas_input[i].checked)

+"\n" - объясните пожалуйста,что такое?

Vovan-VE · 21.10.2011, 16:10

Сообщение от Pasha-1990

"\n" - объясните пожалуйста,что такое?

Последовательность \n означает символ новой строки:

JavaScript
1
alert("foo\nbar\nlol");

@Pasha-1990 · 22.10.2011, 11:09 **[ТС]**

JavaScript
1
2
    
        function mixtureDate()

А что за функция-то такая?

@Vicont · 22.10.2011, 14:58

Просто название функции, она "собирает" все даные из формы.

@Pasha-1990 · 22.10.2011, 15:06 **[ТС]**

Сообщение от Vicont

Просто название функции, она "собирает" все даные из формы.

так если я ее переименую,то программа не работает.

Vovan-VE · 22.10.2011, 16:39

Сообщение от Pasha-1990

так если я ее переименую,то программа не работает.

А в этом месте её вызов тоже поправили?

Сообщение от Vicont

HTML5
1
<form id="f1" onsubmit="return mixtureDate()">

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .

@Ципихович Эндрю 1709 / 578 / 74 Регистрация: 10.04.2009 Сообщений: 9,297
	14.10.2011, 20:41
	Vicont, опробовал Ваш код, на арабском )) êàêóþ(-èå) êîìàíäó(-û) Âû áîëååòå ??? 0

@Vicont front-end developer 284 / 275 / 39 Регистрация: 31.08.2010 Сообщений: 577 Записей в блоге: 1
	14.10.2011, 21:08
	Ну недавно перешел на новый редактор phpDesigner, кодировку забываю менять на utf-8 0

@Vicont front-end developer 284 / 275 / 39 Регистрация: 31.08.2010 Сообщений: 577 Записей в блоге: 1
	22.10.2011, 14:58
	Просто название функции, она "собирает" все даные из формы. 0