Форум

Dimikius · #1 (**permalink**) 12.09.2017, 21:14

Приветствую всех

Дано: Таблица с множеством строк. В каждой строке своя кнопка "записаться" по клику на которую открывается модальное окно с формой.

Задача: передать в форму, а именно в <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?
Заранее благодарен за направление

или решение

j0hnik · #2 (**permalink**) 12.09.2017, 22:24

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

так?

рони · #3 (**permalink**) 12.09.2017, 22:27

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 · #4 (**permalink**) 13.09.2017, 00:02

Вы оба, просто - Боги!

Но так как вариант Рони более понятен для меня, то использовал именно его!

Но Вам обоим - огромное спасибо, Вы очень сильно помогли!

Dimikius · #5 (**permalink**) 13.09.2017, 00:26

Вопрос в вдогонку, а как выбрать второй дочерний элемент? Взять из второй колонки данные и подставить во второе скрытое поле? Вместе с первым.

j0hnik · #6 (**permalink**) 13.09.2017, 00:40

Что за второй дочерний? в коде укажите

рони · #7 (**permalink**) 13.09.2017, 00:47

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

Dimikius · #8 (**permalink**) 13.09.2017, 00:57

Таблица:

<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=Понедельник, среда"">

Dimikius · #9 (**permalink**) 13.09.2017, 01:34

Рони, Вы - настоящий Бог!
Заказы принимаете?

j0hnik, не меньше Вам благодарен! Огромное Вам спасибо!

Форум

Справочник

Discord чат

Курсы javascript