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

Здравствуйте.
Есть 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"

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


HTML

<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

$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");
 
?>

JS

$(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");
});

Как вариант, в форму добавить скрытое поле и в него писать какое-то значение "из кнопки"... ;)

$('form').submit(function(event) {
тогда
event.preventDefault(); - вместо return false;
event.originalEvent.explicitOriginalTarget - это кнопка, name ее имя, value значение.

Спасибо

Спасибо

Может пригодится, Сделал так:

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

<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">

<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"]);

$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 добавил

$(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 кнопки');
    });
});

не знаю, правильно ли всё, но работает.

Просто создаете лишнее и не нужное.