Передать в контактную форму значение <button>

@artem99357 · Регистрация: 24.12.2019

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

Здравствуйте.
На сайте 10 товаров, у каждого из товаров есть кнопка, при нажании на которую всплывает окно с вормой, после заполнения значения отправляются на почту.
Для всех этих кнопок сделана одна форма, то-есть, на какую бы кнопку не нажал, передаётся один и тот же текст.
Можно ли как-то сделать, чтобы при нажатии на каждую кнопку, автоматически добавлялось своё значение?

Например:
<button data-toggle="modal" data-target="#feedback-form" type="submit" значение="1">Заказать</button>
На почту приходит заполненная форма:
Имя
Номер
И данное значение: значение="1"

<button data-toggle="modal" data-target="#feedback-form" type="submit" значение="2">Заказать</button>
На почту приходит заполненная форма:
Имя
Номер
И данное значение: значение="2"

Можно сделать для каждый кнопки свою, отдельную форму, но так не очень хорошо. Можно ли обойтись одной?

HTML5
1
2
3
4
5
6
7
8
9
<form class="form-header" id="form" method="post" name="form">
  <div class="form-group">
    <input class="form-control input-lg" name="name" id="name" type="text" placeholder="Ваше имя *" required>
    <input class="form-control input-lg" name="phone" id="phone" type="text" placeholder="Телефон для связи *" required>
  </div>
  <div class="form-group">
    <button class="btn"><span class="text-button">Отправить</span></button>
  </div>
</form>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
 
$recepient = "Почта";
$siteName = "Сайт";
 
$name = trim($_POST["name"]);
$phone = trim($_POST["phone"]);
$message = "Имя: $name \nТелефон: $phone";
 
$pagetitle = "Заявка с сайта \"$siteName\"";
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");
 
?>

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
$(document).ready(function() {
    $('form').submit(function() {
        var formID = $(this).attr('id');
        var formNm = $('#' + formID);
        $.ajax({
            type: 'POST',
            url: 'mail.php',
            data: formNm.serialize(),
            success: function(data) {
                $('.thank-you').fadeIn();
                $(this).find('input').val('');
                $('#form').trigger('reset');
            }
        });
        return false;
    });
});
$('.close-thank').click(function() {
    $('.thank-you').fadeOut();
});
$(document).mouseup(function(e) {
    var popup = $('.popup');
    if (e.target != popup[0] && popup.has(e.target).length === 0) {
        $('.thank-you').fadeOut();
    }
});
$(function($) {
    $('[name="phone"]').mask("+7(999) 999-9999");
});

@artem99357 · 30.12.2019, 15:37 **[ТС]**

Может пригодится кому.

Добавил кнопкам id

HTML5
1
2
3
4
5
<div class="buttons-parent">
  <button data-toggle="modal" data-target="#feedback-form" type="submit" id="button1">Отправить</button>
  <button data-toggle="modal" data-target="#feedback-form" type="submit" id="button2">Отправить</button>
  <button data-toggle="modal" data-target="#feedback-form" type="submit" id="button3">Отправить</button>
</div>

В саму форму добавил скрытое поле
<input type="hidden" name="but" id="input-type-hide" value="here">

HTML5
1
2
3
4
5
6
7
8
9
10
<form class="form-header" id="form" method="post" name="form">
  <div class="form-group">
    <input type="hidden" name="but" id="input-type-hide" value="here">
    <input class="form-control input-lg" name="name" id="name" type="text" placeholder="Ваше имя *" required>
    <input class="form-control input-lg" name="phone" id="phone" type="text" placeholder="Телефон для связи *" required>
  </div>
  <div class="form-group">
    <button class="btn"><span class="text-button">Отправить</span></button>
  </div>
</form>

В PHP добавил имя скрытого поля
$but = trim($_POST["but"]);

PHP
1
2
3
4
5
6
7
8
9
10
11
$recepient = "Почта";
$siteName = "Сайт";
 
$name = trim($_POST["name"]);
$phone = trim($_POST["phone"]);
$but = trim($_POST["but"]);
 
$message = "Имя: $name \nТелефон: $phone \nКнопка: $but";
$pagetitle = "Заявка с сайта \"$siteName\"";
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");
?>

И в JS добавил значение этих кнопок

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function (){
    // 1 кнопка
    $('.buttons-parent').on('click', '#button1', function() {
        $('#input-type-hide').val('Назание 1 кнопки');
    });
 
    // 2 кнопка
    $('.buttons-parent').on('click', '#button2', function() {
        $('#input-type-hide').val('Назание 2 кнопки');
    });
 
    // 3 кнопка
    $('.buttons-parent').on('click', '#button3', function() {
        $('#input-type-hide').val('Назание 3 кнопки');
    });
});

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .