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

@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, такой вариант все же не подходит
нужно чтобы содержимое хтмл индексировалось поисковиками, а если оно прописано в скрипте, то это невозможно
есть ли еще варианты для решения данной задачи?

Новые блоги и статьи Все статьи Все блоги /
Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .

@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