Передать содержимое tr в value в form
Приветствую всех :dance:
Дано: Таблица с множеством строк. В каждой строке своя кнопка "записаться" по клику на которую открывается модальное окно с формой. Задача: передать в форму, а именно в <input type="hidden" name="data_start" value=""> содержимое ячейки из той же строки, в которой нажата кнопка вызова окна. Пример: нажимаем на кнопку #button_apply_1, получаем в форме value="12.09.2017" Таблица:
<table>
<tr>
<td id="start_1">12.09.2017</td>
<button id="button_apply_1" class="schedule__apply">Записаться
</button>
</td>
</tr>
<tr>
<td id="start_2">13.09.2017</td>
<td>
<button id="button_apply_2" class="schedule__apply">Записаться
</button>
</td>
</tr>
</table>
Форма:
<form class="overlay-form">
<input type="hidden" name="data_start" value="">
<input name="name" placeholder="Ф.И.О." required="true" type="text"/>
<input name="tel" type="tel" placeholder="ТЕЛЕФОН" required="true"/>
<button class="overlay-form__apply">Записаться</button>
</form>
Таблица генерируется php и заначения ID постоянно меняются button_apply_1(2,3 и т.д.) Вопрос: как это реализовать с помощью jQuery? Заранее благодарен за направление :haha: или решение :help: |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td id="start_1">12.09.2017</td>
<td>
<button id="button_apply_1" class="schedule__apply">Записаться
</button>
</td>
</tr>
<tr>
<td id="start_2">13.09.2017</td>
<td>
<button id="button_apply_2" class="schedule__apply">Записаться
</button>
</td>
</tr>
</table>
<form class="overlay-form">
<input type="hidden" name="data_start" value="">
<input name="name" placeholder="Ф.И.О." required="true" type="text"/>
<input name="tel" type="tel" placeholder="ТЕЛЕФОН" required="true"/>
<button class="overlay-form__apply">Записаться</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
$('.schedule__apply').click(function(){
$('input[name="data_start"]').val($(this).parent().prev().text());
});
});
</script>
</body>
</html>
так? |
Dimikius,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.overlay-form{
display: none;
min-width: 100px;
min-height: 100px;
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("tr").each(function(indx, tr){
$(".schedule__apply",tr).click(function( event ) {
$(".overlay-form").show().find('[name="data_start"]').val($(":first",tr).text())
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td id="start_1">12.09.2017</td>
<td>
<button id="button_apply_1" class="schedule__apply">Записаться
</button>
</td>
</tr>
<tr>
<td id="start_2">13.09.2017</td>
<td>
<button id="button_apply_2" class="schedule__apply">Записаться
</button>
</td>
</tr>
</table>
<form class="overlay-form">
<input type="hidden" name="data_start" value="">
<input name="name" placeholder="Ф.И.О." required="true" type="text"/>
<input name="tel" type="tel" placeholder="ТЕЛЕФОН" required="true"/>
<button class="overlay-form__apply">Записаться</button>
</form>
</body>
</html>
|
Вы оба, просто - Боги!
Но так как вариант Рони более понятен для меня, то использовал именно его! Но Вам обоим - огромное спасибо, Вы очень сильно помогли! |
Вопрос в вдогонку, а как выбрать второй дочерний элемент? Взять из второй колонки данные и подставить во второе скрытое поле? Вместе с первым.
|
Что за второй дочерний? в коде укажите
|
Dimikius,
$(function() {
$("tr").each(function(indx, tr){
$(".schedule__apply",tr).click(function( event ) {
var form = $(".overlay-form").show();
form.find('[name="data_start"]').val($("td:eq(0)",tr).text());
form.find('[name="data_finish"]').val($("td:eq(1)",tr).text());
});
});
});
|
Таблица:
<table>
<tr>
<td>12.09.2017</td>
<td>Понедельник, среда</td>
<td>
<button class="schedule__apply">Записаться
</button>
</td>
</tr>
<tr>
<td>13.09.2017</td>
<td>Суббота</td>
<td>
<button class="schedule__apply">Записаться
</button>
</td>
</tr>
</table>
Форма:
<form class="overlay-form">
<input type="hidden" name="data_start" value="">
<input type="hidden" name="day" value="">
<input name="name" placeholder="Ф.И.О." required="true" type="text"/>
<input name="tel" type="tel" placeholder="ТЕЛЕФОН" required="true"/>
<button class="overlay-form__apply">Записаться</button>
</form>
По клику на "записаться" в первой строке получаем в форме: <input type="hidden" name="data_start" value="12.09.2017"> <input type="hidden" name="day" value=Понедельник, среда""> |
Рони, Вы - настоящий Бог!
Заказы принимаете? ;) j0hnik, не меньше Вам благодарен! Огромное Вам спасибо! |
| Часовой пояс GMT +3, время: 23:54. |