Javascript — AJAX Post для нескольких форм

Question

Javascript — AJAX Post для нескольких форм

У меня есть список, каждая строка представляет собой форму с кнопкой отправки. Когда я отправляю форму, данные отправляются через почту и должны обновлять div с результатом. Но есть проблема при отправке сообщения, JavaScript не отправляет данные правильно.

Это индексный файл:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function() {
$(".notif-close").click(function(e) {
e.preventDefault();
var notif_id = $(".notif_id").val();
var data = 'notif_id='+ notif_id;
$.ajax({
type: "POST",
url: "post.php",
data: data,
beforeSend: function(send) {
$("#notif_box").fadeOut(400, function() {
$('.loader').fadeIn(50);
}
)},
success: function(html){ // this happen after we get result
$(".loader").fadeOut(50, function()
{
$("#notif_box").html(html).fadeIn(400);
$(".notif_id").val("");

});
return false;
}
});
});
});
</script>
</head>
<body>
<form method='post' action='post.php'>
<input type='hidden' id='notif_id' name='1' class='notif_id' value='1' />
<button type="submit" id="notif-close" class="notif-close">notif-close1</button>
</form>
<form method='post' action='post.php'>
<input type='hidden' id='notif_id' name='2' class='notif_id' value='2' />
<button type="submit" id="notif-close" class="notif-close">notif-close2</button>
</form>
<div class='notificationsblock' id='notif_box'>Result</div>
<span class='loader' style="display: none; position: absolute;">Please wait...</span>
</body>
</html>

И это post.php:

 <?
sleep(2);
print_r($_POST);
?>

Помоги мне.
Пожалуйста, скажите мне, что я делаю не так?

0

ajax forms javascript jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Попробуйте изменить

var notif_id = $(".notif_id").val();

в

var notif_id = $(this).parent().find(".notif_id").val();

Вы также можете попробовать изменить

var data = { 'notif_id' : notif_id }

У вас также есть идентификаторы: #notif_id, #notif_close, которые могут (и будут) вызывать ошибки и конфликты. Вы должны дать уникальные идентификаторы. Предоставление уникальных имен для элементов ввода и форм также является лучшей идеей.

1