Вход

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


artem99357
30.12.2019, 08:52
Здравствуйте.
Есть 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");
});

ksa
30.12.2019, 10:17
Можно ли как-то сделать, чтобы при нажатии на каждую кнопку, автоматически добавлялось своё значение?
Как вариант, в форму добавить скрытое поле и в него писать какое-то значение "из кнопки"... ;)

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

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

Спасибо

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

Спасибо

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

Добавил 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 кнопки');
});
});


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

laimas
30.12.2019, 16:02
не знаю, правильно ли всё, но работает

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