Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.09.2017, 21:14
Новичок на форуме
Отправить личное сообщение для Dimikius Посмотреть профиль Найти все сообщения от Dimikius
 
Регистрация: 05.02.2015
Сообщений: 5

Передать содержимое tr в value в form
Приветствую всех

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

Задача: передать в форму, а именно в <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?
Заранее благодарен за направление или решение
Ответить с цитированием
  #2 (permalink)  
Старый 12.09.2017, 22:24
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 13.09.2017, 00:02
Новичок на форуме
Отправить личное сообщение для Dimikius Посмотреть профиль Найти все сообщения от Dimikius
 
Регистрация: 05.02.2015
Сообщений: 5

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

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

Но Вам обоим - огромное спасибо, Вы очень сильно помогли!
Ответить с цитированием
  #5 (permalink)  
Старый 13.09.2017, 00:26
Новичок на форуме
Отправить личное сообщение для Dimikius Посмотреть профиль Найти все сообщения от Dimikius
 
Регистрация: 05.02.2015
Сообщений: 5

Вопрос в вдогонку, а как выбрать второй дочерний элемент? Взять из второй колонки данные и подставить во второе скрытое поле? Вместе с первым.
Ответить с цитированием
  #6 (permalink)  
Старый 13.09.2017, 00:40
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Что за второй дочерний? в коде укажите
Ответить с цитированием
  #7 (permalink)  
Старый 13.09.2017, 00:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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());
});
});
});
Ответить с цитированием
  #8 (permalink)  
Старый 13.09.2017, 00:57
Новичок на форуме
Отправить личное сообщение для Dimikius Посмотреть профиль Найти все сообщения от Dimikius
 
Регистрация: 05.02.2015
Сообщений: 5

Таблица:
<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=Понедельник, среда"">
Ответить с цитированием
  #9 (permalink)  
Старый 13.09.2017, 01:34
Новичок на форуме
Отправить личное сообщение для Dimikius Посмотреть профиль Найти все сообщения от Dimikius
 
Регистрация: 05.02.2015
Сообщений: 5

Рони, Вы - настоящий Бог!
Заказы принимаете?
j0hnik, не меньше Вам благодарен! Огромное Вам спасибо!

Последний раз редактировалось Dimikius, 13.09.2017 в 01:37.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как передать данные из одинаковых форм php скрипту через AJAX? griga999 AJAX и COMET 28 10.10.2016 06:09
JS&PHP: можно ли передать значение переменной через XMLHttpRequest? -_Gleb_- AJAX и COMET 1 14.07.2016 08:45
передать содержимое div Dux Общие вопросы Javascript 1 30.08.2013 08:37
Не отображается содержимое последующих вкладок APdesign Общие вопросы Javascript 4 17.07.2013 09:54
Как выводить на печать содержимое нужного Div-а? sarik Общие вопросы Javascript 9 04.03.2013 14:02