Заполнение первого поля формы при нажатии на ссылку

@4umYOUser · Регистрация: 18.05.2010

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

Нужен самый простейший скрипт для такой задачи: на странице несколько блоков, каждый имеет ссылку например Заказать. При нажатии скажем на ссылку первого блока человек должен перейти на страницу contacts.html с формой обратной связи, в которой уже будет заполнено первое поле в соответствии с выбраной ссылкой.

Например:
index.html

HTML5
1
2
3
4
5
6
7
8
<div>
    <div class="name">Товар 1</div>
    <a href="contacts.html">Заказать</a>
</div>
<div>
    <div class="name">Товар 2</div>
    <a href="contacts.html">Заказать</a>
</div>

contacts.html

HTML5
1
2
3
4
5
<form>
<input id="first_field" type="text" />
<input type="text" />
<input type="submit" />
</form>

При нажатии скажем на ссылку в блоке Товар 1 посетитель попадает на страницу contacts.html где в
первом поле будет уже написано "Товар 1". При этом он должен иметь возможность вручную ввести
другой текст в первое поле, т.е. заполненное поле НЕ должно быть неактивным

@ostgals · 30.09.2010, 15:05

HTML5
1
2
3
4
5
6
7
8
<div>
    <div class="name">Товар 1</div>
    <a href="contacts.html?field=tovar1">Заказать</a>
</div>
<div>
    <div class="name">Товар 2</div>
    <a href="contacts.html?field=tovar2">Заказать</a>
</div>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!-- contacts.html -->
<form>
<input id="first_field" type="text" />
<input type="text" />
<input type="submit" />
</form>
 
<script type="text/javascript">
<!--//
    document.forms[0].first_field.value = location.search.replace(/[\?&]field=(.+?)&?/, '$1');
//-->
</script>

@4umYOUser · 30.09.2010, 15:18 **[ТС]**

ostgals спасибо, все работает, но вместо tovar1 и tovar2 в ссылках будет текст на украинском

я сохранил обе страницы в утф-8, добавил также

HTML5
1
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

но при переходе на страницу контактс в первом поле все равно абракадабра, как решить проблему с кодировкой?

@ostgals · 30.09.2010, 15:54

Сообщение от 4umYOUser

но при переходе на страницу контактс в первом поле все равно абракадабра

Это вполне естественно.

У меня есть два варианта решения, но для начала хочу знать, где вы храните названия всех товаров?

@4umYOUser · 30.09.2010, 15:58 **[ТС]**

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

где вы храните названия всех товаров

никакой базы нет (если имеется ввиду), в базах ни разбираюсь, товаров будет немного, поэтому буду вставлять в каждую ссылку

HTML5
1
2
<a href="contacts.html?field=Товар1">Заказать</a>
<a href="contacts.html?field=Товар2">Заказать</a>

@ostgals · 30.09.2010, 16:25

Ладно. Вот вам самое лучшее решение:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
// goods.js
 
// своеобразная база товаров
// { id_товара: название_товара, ... }
 
goods = {
    tovar1: 'Отличный товар раз',
    tovar2: 'Отличный товар два',
    usluga: 'Медвежья услуга (недорого)',
    super1: 'Суперавтобус от Львовского АЗ'
};

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
<!-- стартовая страница -->
<script type="text/javascript" src="goods.js"></script>
 
<div id="good_list"></div>
 
<script type="text/javascript">
<!--//
    for (var id in goods)
    {
        var good = document.createElement('div');  // общий div для товара
        
        var desc = document.createElement('div');  // div для описания товара
        desc.innerHTML = goods[id];
        
        var link = document.createElement('a');    // ссылка "Заказать"
        link.href = "contacts.html?id=" + id;
        link.innerHTML = 'Заказать';
        
        good.appendChild(desc);
        good.appendChild(link);
        
        document.getElementById('good_list').appendChild(good);
    }
//-->
</script>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- contacts.html -->
<script type="text/javascript" src="goods.js"></script>
 
<form>
<input id="first_field" type="text" />
<input type="text" />
<input type="submit" />
</form>
 
<script type="text/javascript">
<!--//
    document.forms[0].first_field.value = goods[location.search.replace(/[\?&]id=(.+?)&?/, '$1')];
//-->
</script>

Добавлено через 3 минуты
Немного пояснений:

В goods.js создается простенькая текстовая БД товаров. id_товара должно состоять из латинских букв и цифр, а название может содержать что угодно, даже HTML.
В перспективе в такую простенькую БД можно даже добавить и другую инфу по товарам (например, цену).

Стартовая страница теперь генерирует список товаров на основе БД в goods.js такой же структуры как в оригинале.

contacts.html работает по старому, "выцепляя" id_товара из адресной строки.

@4umYOUser · 30.09.2010, 16:46 **[ТС]**

не знаю, но у меня теперь нет ничего на стартовой, пуста абсолютно...

@ostgals · 30.09.2010, 16:51

Сорри, да. Замените стартовую на:

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
<!-- стартовая страница -->
<script type="text/javascript" src="goods.js"></script>
 
<div id="good_list"></div>
 
<script type="text/javascript">
<!--//
    window.onload = function ()
    {
        for (var id in goods)
        {
            var good = document.createElement('div');  // общий div для товара
            
            var desc = document.createElement('div');  // div для описания товара
            desc.innerHTML = goods[id];
            
            var link = document.createElement('a');    // ссылка "Заказать"
            link.href = "contacts.html?id=" + id;
            link.innerHTML = 'Заказать';
            
            good.appendChild(desc);
            good.appendChild(link);
            
            document.getElementById('good_list').appendChild(good);
        }
    }
//-->
</script>

@4umYOUser · 30.09.2010, 18:06 **[ТС]**

большое спасибо, теперь все отлично

Добавлено через 1 час 7 минут
отлично, но не совсем...
товары с линками должны быть в отдельных дивах как я писал вначале, а сейчас они выводятся одним списком в good_list
нужно чтобы был ряд блоков, например с class="item" и в каждый выводился отдельный товар и ссылка на контактс

самый первый вариант впрочем целиком подходит, с кодировкой только что делать

@ostgals · 30.09.2010, 19:44

Сообщение от 4umYOUser

товары с линками должны быть в отдельных дивах как я писал вначале, а сейчас они выводятся одним списком в good_list

Неправда. После генерации, каждый товар расположен в отдельном блоке. В Javascript этот блок проходит под именем good. Ему можно спокойно назначить атрибут class. После 12-ой строки вставьте:

JavaScript
1
good.className = 'item';

Добавлено через 3 минуты

Сообщение от 4umYOUser

самый первый вариант впрочем целиком подходит, с кодировкой только что делать

Можно использовать функции encodeURI() и decodeURI(), но код получится слишком громоздкий и малопонятный.

Добавлено через 17 минут
Вот вам в качестве доказательства сгенерированный код:

HTML5
1
<div id="good_list"><div class="item"><div>Отличный товар раз</div><a href="contacts.html?id=tovar1">Заказать</a></div><div class="item"><div>Отличный товар два</div><a href="contacts.html?id=tovar2">Заказать</a></div><div class="item"><div>Медвежья услуга (недорого)</div><a href="contacts.html?id=usluga">Заказать</a></div><div class="item"><div>Суперавтобус от Львовского АЗ</div><a href="contacts.html?id=super1">Заказать</a></div></div>

@4umYOUser · 30.09.2010, 20:46 **[ТС]**

товар расположен в отдельном блоке

да, я потом уже увидел, пардон
но вот если хочу добавить в такой блок картинку товара и еще текст какой то, дописываю их в ту базу, то потом при нажатии на ссылку Заказать в первом поле формы после названия товара идет тег картинки или дива с текстом, можно так чтобы в поле только название было?

@ostgals · 30.09.2010, 21:14

Сообщение от 4umYOUser

но вот если хочу добавить в такой блок картинку товара и еще текст какой то, дописываю их в ту базу, то потом при нажатии на ссылку Заказать в первом поле формы после названия товара идет тег картинки или дива с текстом, можно так чтобы в поле только название было?

Можно.
Чуток тзменим БД, добавив для каждого товара поле image, где будет храниться путь к изображению товара:

JavaScript
1
2
3
4
5
6
7
8
9
10
// goods.js
 
// своеобразная база товаров
 
goods = {
    tovar1: { name: 'Отличный товар раз', image: '/images/tovar1.jpg' },
    tovar2: { name: 'Отличный товар два', image: '/images/tovar2.jpg' },
    usluga: { name: 'Медвежья услуга (недорого)', image: '/images/usl.png' },
    super1: { name: 'Суперавтобус от Львовского АЗ', image: '/images/avtobus.gif' } // в последней строчке запятую не ставим!
};

По своему усмотрению меняем HTML, который будет внутри блока с описанием товара. Я для примера сделал так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 // скрипт в основной странице
window.onload = function ()
{
    for (var id in goods)
    {
        var good = document.createElement('div');  // общий div для товара
        good.className = 'item';
        
        var desc = document.createElement('div');  // div для картинки и описания товара
        desc.innerHTML = '<img src="' + goods[id].image + '" />' + goods[id].name;
        
        var link = document.createElement('a');    // ссылка "Заказать"
        link.href = "contacts.html?id=" + id;
        link.innerHTML = 'Заказать';
        
        good.appendChild(desc);
        good.appendChild(link);
        
        document.getElementById('good_list').appendChild(good);
    }
}

И в contacts.html выводим поле name:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- contacts.html -->
<script type="text/javascript" src="goods.js"></script>
 
<form>
<input id="first_field" type="text" />
<input type="text" />
<input type="submit" />
</form>
 
<script type="text/javascript">
<!--//
    var id = location.search.replace(/[\?&]id=(.+?)&?/, '$1');
    document.forms[0].first_field.value = goods[id].name;
//-->
</script>

@4umYOUser · 30.09.2010, 21:39 **[ТС]**

Сообщение от 4umYOUser

еще текст какой то

т.е. может быть картинка, а может и текст, вобщем что написать вместо image: в скрипте goods.js чтобы дальше между запятыми можно было вставить <div> и </div>, а между дивами уже все что угодно (картинки, тексты...)

@ostgals · 30.09.2010, 22:03

Ну, ладно... Можно так:

JavaScript
1
2
3
4
5
6
7
8
9
10
// goods.js
 
// своеобразная база товаров
 
goods = {
    tovar1: { name: 'Отличный товар раз', html: '<img src="/images/tovar1.jpg" /> и еще <b>какой-то</b> текст' },
    tovar2: { name: 'Отличный товар два', html: 'Картинки нет, но есть описание этого <span style="color: red">замечательного</span> товара' },
    usluga: { name: 'Медвежья услуга (недорого)', html: '<img src="/images/usl.png" alt="Только картинка" />' },
    super1: { name: 'Суперавтобус от Львовского АЗ', html: '(нет данных)' } // в последней строчке запятую не ставим!
};

и так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
window.onload = function ()
{
    for (var id in goods)
    {
        var good = document.createElement('div');  // общий div для товара
        good.className = 'item';
        
        var desc = document.createElement('div');  // div для картинки и описания товара
        desc.innerHTML = goods[id].name + '<br />' + goods[id].html;
 
        // иными словами в desс.innerHTML можно пихать любой HTML, какой понравится
        
        var link = document.createElement('a');    // ссылка "Заказать"
        link.href = "contacts.html?id=" + id;
        link.innerHTML = 'Заказать';
        
        good.appendChild(desc);
        good.appendChild(link);
        
        document.getElementById('good_list').appendChild(good);
    }
}

Свойство name товара в БД должно быть обязательно (т.е. не стоит стремиться от него избавиться), чтобы у нас было доступно значение для вставки в поле на странице contacts.html

@4umYOUser · 17.11.2010, 12:53 **[ТС]**

ostgals, такой вариант все же не подходит
нужно чтобы содержимое хтмл индексировалось поисковиками, а если оно прописано в скрипте, то это невозможно
есть ли еще варианты для решения данной задачи?

Новые блоги и статьи Все статьи Все блоги /
Новый 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. . .

@4umYOUser 28 / 28 / 4 Регистрация: 18.05.2010 Сообщений: 266
	30.09.2010, 16:46 [ТС]
	не знаю, но у меня теперь нет ничего на стартовой, пуста абсолютно... 0

@4umYOUser 28 / 28 / 4 Регистрация: 18.05.2010 Сообщений: 266
	30.09.2010, 18:06 [ТС]
	большое спасибо, теперь все отлично Добавлено через 1 час 7 минут отлично, но не совсем... товары с линками должны быть в отдельных дивах как я писал вначале, а сейчас они выводятся одним списком в good_list нужно чтобы был ряд блоков, например с class="item" и в каждый выводился отдельный товар и ссылка на контактс самый первый вариант впрочем целиком подходит, с кодировкой только что делать 0

@4umYOUser 28 / 28 / 4 Регистрация: 18.05.2010 Сообщений: 266
	17.11.2010, 12:53 [ТС]
	ostgals, такой вариант все же не подходит нужно чтобы содержимое хтмл индексировалось поисковиками, а если оно прописано в скрипте, то это невозможно есть ли еще варианты для решения данной задачи? 0