На странице есть одинаковые формы(по структуре), но в с разными значениями. Не выходит корректно отправить в ajax!?

Question

[lilikon]

Есть страница с редактированием, на ней имеется список, при клике на список открывается форма с нужными данными.




При нажатие на редактировать, ДОЛЖНО: отправить данные через ajax и обновить их в базе.
Все формы имеют одинаковые значение
часть кода:

<form id='edit' class='edit{$i}' method='post' enctype='multipart/form-data'>
<p class='control-label'>Название</p>
<div class='col-sm-6'>
<input type='text' class='i_txt' id='name' name='name' required='required' value='{$edit['name']}' autocomplete='off'>
</div>
<p class='control-label'>Ссылка</p>
<div class='col-sm-6'>
<input type='text' class='i_txt' id='link' name='link' value='{$edit['link']}' autocomplete='off'>
</div>
<p class='control-label'>Описание</p>
<div class='col-sm-6' style='margin-bottom: 15px;'>
<textarea name='editor{$i}' id='editor1' class='editor1'>{$edit['description']}</textarea>
<script type='text/javascript' >
CKEDITOR.replace( 'editor{$i}' );
</script>
</div>
<input type='hidden' id='user' name='user' value='{$user}' disabled='disabled'>
<input type='hidden' id='id' name='id' value='{$edit['id']}' disabled='disabled'>
<div class='btn_area'><input type='submit' value='Редактировать' /><a class='load hiden'>Загрузка</a></div>
</form>

Код ajax:

$(document).ready(function () {
	for (var i = 0; i < 99999; i++) {
		$(".edit" + i).submit(function(){
			event.preventDefault();
			for (instance in CKEDITOR.instances)
				CKEDITOR.instances[instance].updateElement();
			var formValid = true;			
			var v1 = $("#name").val();
			var v2 = $("#link").val();
			var v3 = $(".editor1").val();
			var v4 = $("#section").val();
			var v5 = $("#user").val();
			var v6 = $("#id").val();
			var formData = new FormData();
			formData.append('v1', v1);
			formData.append('v2', v2);
			formData.append('v3', v3);
			formData.append('v4', v4);
			formData.append('v5', v5);
			formData.append('v6', v6);
			$.ajax({
				beforeSend: function(){
					$('.btn_area input').addClass('hiden');
					$('.load').removeClass('hiden');
				},
				type:'POST',
				url: '../edit.php',
				data: formData,
				contentType: false,
				processData: false,
				cache: false,
				success: function (data) {
					var $data =  JSON.parse(data);
					$('#error').text('');
					if ($data.result == "success") {
						$('#edit').hide();
						$('#msgSubmit').removeClass('hidden');
						$('.errormsg').css("visibility", "hidden");
					} else {
						$('#edit').hide();
						$('#error').removeClass('hidden');
						$('.errormsg').css("visibility", "visible");
						$('#error').text($data.error);
					}
				},
				complete: function(){
					setTimeout(function() {
						$('#edit').show();
						$('#msgSubmit').addClass('hidden');
						$('#error').addClass('hidden');
						$('.btn_area input').removeClass('hiden');
						$('.load').addClass('hiden');
					}, 3000);						
				},
				error: function (request) {
					$('#error').text('Произошла ошибка ' + request.responseText + ' при отправке данных.');
				}
			});				
		});
	}
	});

Обработчик смысла нет показывать, он корректно работает, и пишет в базу, проблема вот в чем:
при попытки отправить первую форму она оправляется как надо, и пишется в базу
а при попытки редактирования уже второй или других форм и отправки их, браузер передает данные из первой формы,

цикл for поставил для попытки хоть как то что бы работало, но нечего не работает

во втором цикле названия разные, так как я пытался изменить, а потом уже сделал скрин

Прошу Вашей помощи, заранее благодарю!

Comments

[Александр Шаповал]

Попробуйте смотреть в сторону не индивидуального класса (.edit) а индивидуального идентификатора (#edit)

[lilikon]

Александр Шаповал: добавить в форму id='edit{$i}'
а в запросе сделать $("#edit" + i)
Вы это имеете ввиду? и так же через цикл запустить?
Если да то итог такой же, почему то каждая последующая форма, даже если она имеет id='edit5' или id='edit7' они все равно передают лишь данные с первой формы id='edit1'
и не могу не как сделать что бы каждая передавала свои данные =(

Answer 1

[Алексей]

Скорее всего проблема в этом:
<form id='edit'
ID на странице должен быть уникальным, а у вас несколько ID c одинаковыми именами.

Comments

[lilikon]

пробовал и менять ид ставить так
итог был тем же: почему то каждая последующая форма, даже если она имеет id='edit5' или id='edit7' они все равно передают лишь данные с первой формы id='edit1'

[Алексей]

lilikon:
Ну вы же берете данные всегда из одного источника:

var v1 = $("#name").val();
      var v2 = $("#link").val();
      var v3 = $(".editor1").val();
      var v4 = $("#section").val();
      var v5 = $("#user").val();
      var v6 = $("#id").val();

[lilikon]

AlexMaxTM: огромное спасибо, а я чет копал не там где надо было)

var v1 = $(this).find("#name").val();
			var v2 = $(this).find("#link").val();
			var v3 = $(this).find(".editor1").val();
			var v4 = $(this).find("#section").val();
			var v5 = $(this).find("#user").val();
			var v6 = $(this).find("#id").val();

сделал так и все заработало)
Еще раз спасибо)

[lilikon]

AlexMaxTM: можете еще подсказать вот с чем:
везде стоит ckeditor, когда делал его на странице с одной формой возникла проблема что приходилось дважды нажимать отправить что бы он передал данные, решил это вот этим кодом:

for (instance in CKEDITOR.instances)
				CKEDITOR.instances[instance].updateElement();

теперь проблема вернулась, данный код стоит в скрипте, но как понимаю не работает, приходится нажимать два раза на редактировать и лишь со второго раза приходят данные, можете подсказать как это исправить?

[Алексей]

Ну если бы я исправлял, то для начала бы я убрал всё это:

for (var i = 0; i < 99999; i++) {
    $(".edit" + i).submit(function(){

Вы создаете 10 тысяч функций обработки форм, хотя достаточно всего одну универсальную функцию обработки всех форм:

$( 'form' ).submit(function( event ) {
  event.preventDefault();
  $.ajax( {
	type: "POST",
	url: '../edit.php',
	data: form.serialize(),
	success: ....
	.....
  });
	
return false;

});

// или

$( 'form' ).on( 'submit', function( event ) {
  event.preventDefault();
  $.ajax( {
	type: "POST",
	url: '../edit.php',
	data: form.serialize(),
	success: ....
	.....
  });

return false;
  
});