Форум

Булат Азат улы · #1 (**permalink**) 02.09.2017, 21:53

Здравствуйте. Помогите пожалуйста сделать выборку элемента, используя $(this). Вот код HTML:

<form id='f1'>
	<textarea name='name1-1' id='id1-1' class='class1'></textarea>
	<textarea name='name1-2' id='id1-2' class='class1'></textarea>
	<p><input type='reset' value='Очистить' class='inputBT'><input type='submit' value='Сохранить' name='name1' id='BT1' class='inputBT JTInput'></p>
</form>
<form id='f2'>
	<textarea name='name2-1' id='id2-1' class='class1'></textarea>
	<textarea name='name2-2' id='id2-2' class='class1'></textarea>
	<p><input type='reset' value='Очистить' class='inputBT'><input type='submit' value='Сохранить' name='name2' id='BT2' class='inputBT JTInput'></p>
</form>

Нужно выбрать текстовые поля относительно нажатой кнопки (.JTInput). Пробовал и prev, prevAll, parent и другие ($(this).prevAll(".class1")) - не могу выбрать.

Эти формы я отправляю с помощью Аякс, и таких форм у меня почти десять. Не хочу для каждого отдельную функцию делать (точнее уже сделал - но код получился очень не красивый и громоздкий). Хочу одну универсалую функцию сделать, чтобы при нажатии на кнопку автоматом выбирались нужные объекты.

Помогите пожалуйста, кто знает.

рони · #2 (**permalink**) 02.09.2017, 22:28

Булат Азат улы,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$(".JTInput").on("click", function(event) {
event.preventDefault();
var data = $(this.form).serialize();
alert(data);
})
});
  </script>
</head>

<body>
<form id='f1'>
  <textarea name='name1-1' id='id1-1' class='class1'></textarea>
  <textarea name='name1-2' id='id1-2' class='class1'></textarea>
  <p><input type='reset' value='Очистить' class='inputBT'><input type='submit' value='Сохранить' name='name1' id='BT1' class='inputBT JTInput'></p>
</form>
<form id='f2'>
  <textarea name='name2-1' id='id2-1' class='class1'></textarea>
  <textarea name='name2-2' id='id2-2' class='class1'></textarea>
  <p><input type='reset' value='Очистить' class='inputBT'><input type='submit' value='Сохранить' name='name2' id='BT2' class='inputBT JTInput'></p>
</form>


</body>
</html>

void() · #3 (**permalink**) 02.09.2017, 23:01

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Пример</title>
</head>
<body>

	<form id='f1'>
		<textarea name='name1-1' id='id1-1' class='class1'></textarea>
		<textarea name='name1-2' id='id1-2' class='class1'></textarea>
		<p><input type='reset' value='Очистить' class='inputBT'>
			<input type='submit' value='Сохранить' name='name1' id='BT1' class='inputBT JTInput'></p>
		</form>
		<form id='f2'>
			<textarea name='name2-1' id='id2-1' class='class1'></textarea>
			<textarea name='name2-2' id='id2-2' class='class1'></textarea>
			<p><input type='reset' value='Очистить' class='inputBT'>
				<input type='submit' value='Сохранить' name='name2' id='BT2' class='inputBT JTInput'></p>
			</form>

			<script>
				window.onload = function(){
					var button = document.querySelectorAll('.JTInput');
					for(var i = 0; i < button.length; i++){
						button[i].onclick = searchForm;
					}
					function searchForm(){
						var res = this.form;
						alert(res.id);
					}
				}
			</script>

		</body>
		</html>

Булат Азат улы · #4 (**permalink**) 03.09.2017, 11:18

рони,
Спасибо!

Форум

Справочник

Discord чат

Курсы javascript