Достать значения input'ov

[Vladislav]

Здравствуйте, совсем недавно начал изучать js, так что я еще совсем чайник.

Сейчас на сайте делаю что-то вроде стены как ВК, так вот на этой стене есть 10 блоков с сообщениями, структура каждого блока следующая:

<div id='block'>
<input type='hidden' value='$id_message' id='id_mes'>
<textarea rows='1' placeholder='Оставить комментарий..' id='com'</textarea>
<input type='submit' value='Комментировать' class='button_comment' id='submit'>
<div></div>
</div>

Первый инпут скрыт, в него php код вставляет id сообщения к которому идет комментарий. То есть, например пользователь комментирует 5-ый комментарий, то в первый инпут в id пойдет цыфра 5.

Весь код php работает замечательно, но нужно сделать чтобы еще работало на ajax'e. Для этого есть такой код:

$(function(){
   $("#submit").click(function(){
      var com=$("#com").val();
      var id_mes=$("#id_mes").val();
      $.ajax({....

И вот тут уже у меня нечего не получается, проблема в том что я не знаю как вытащить данные именно из того блока по которому кликнули. Этот код работает только с первым комментарием, видимо js обнаруживает все данные у первого комментария и дальше "искать" не хочет.

Мне нужно написать корректно код, чтобы вытаскивались данные именно из того блока комментариев по которому было нажато, как это сделать, помогите пожалуйста! Уже неделю не могу разобраться... пробовал и this писать... все-равно не получается.

[Deff]

вот на этой стене есть 10 блоков с сообщениями,

Vladislav,
Приведите HTML для двух блоков, (*пока не понял различия

[danik.js]

id - Identificator - Идентификатор - идентифицировать - уникальность.
У вас же нет никакой уникальности

[danik.js]

<form>
<div id='block'>
<input type='hidden' value='$id_message' id='id_mes' name='id_mess'>
<textarea rows='1' placeholder='Оставить комментарий..' id='com' name='comment'></textarea>
<input type='submit' value='Комментировать' class='button_comment' id='submit'>
<div></div>
</div>
</form>

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(".button_comment").click(function(e){
        var data = $(this.form).serialize();
        var url = 'comment/add'
        $.ajax({
            url: url,
            data: data,
            complete: function(){}
        });
        alert(data);
        e.preventDefault();
    });
</script>

[Vladislav]

а как сделать уникальность? если мне нужно дать все кнопкам одинаковый id, чтобы работать через js.

[danik.js]

мне нужно дать все кнопкам одинаковый id, чтобы работать через js

Это как:
"Мне нужно дать всем своим детям одинаковые имена, чтобы было удобнее обращаться к ним"

Vladislav, не могли бы вы приоткрыть слегка свои глаза и взгянуть на предлагаемый мною код? Особенно нужно напрячься и разглядеть 12-ю строчку.

[Vladislav]

Это как:
"Мне нужно дать всем своим детям одинаковые имена, чтобы было удобнее обращаться к ним"

Vladislav, не могли бы вы приоткрыть слегка свои глаза и взгянуть на предлагаемый мною код? Особенно нужно напрячься и разглядеть 12-ю строчку.

Простите. Не заметил, что вы написали. Объясните пожалуйста, что вы подключили в 10ой строчке или вы просто для примера подключили это?

Потом я не могу понять, зачем буква "е", в конце 12-ой строчке.
И еще:

var data = $(this.form).serialize();
var url = 'comment/add'

Что за переменные вы тут создаете, почитал про serialize ("В Javascript можно сериализовать данные и получить сериализованную строку точь в точь как в PHP."), но опять же не понял что это. Может быть все данные с этой формы заносятся в переменную data?

А вторая переменная url зачем была создана?


Извините за нубство, пожалуйста разъясните) Я хочу понять это.

[danik.js]

вы подключили в 10ой строчке

Это библиотека jQuery конечно же. Подключена с CDN (Content Delivery Network) jQuery

зачем буква "е"

В обработчик события передается объект (событие). Содержит координаты места клика, состояние клавиш Shift, Ctrl и тд, и прочая инфа.
В том числе имеет метод preventDefaul() для предотвращения действия по умолчанию. Если его не предотвратить, то произойдет отправка формы, тоесть уход со страницы.

В jQuery, вместо e.preventDefault() можно просто венуть false, и это также отменит действие по умолчанию.

$(".button_comment").click(function(){
....
return false;
});

заносятся в переменную data

Именно. Причем вввиде строки 'param1=value1&param2=value2...'. А это один из форматов, понимаемых $.ajax({data: ...});

А вторая переменная url зачем была создана

Можно не создавать, можно прямо указать в опциях $.ajax({url: 'путь/до/контроллера'});

[Vladislav]

Спасибо большое, я все понял, кроме одного момента, я так и не понял:

var data = $(this.form).serialize();

Ну вот смотрите:

<input type='hidden' value='$id_message' id='id_mes' name='id_mess'>
<textarea rows='1' placeholder='Оставить комментарий..' id='com' name='comment'></textarea>
<input type='submit' value='Комментировать' class='button_comment' id='submit'>

Пользователь введет комментарий и нажмет "отправить", мы с помощью js делаем:

var data = $(this.form).serialize();

Отправляем все это в php обработчик, но в php мне нужно получить переменные: comment и id_message, а как я их получу? Можете на примере показать?

Раньше я в js делал вот так:

var comment=$("#comment").val();
var id_message=$("#id_message").val();

[danik.js]

Так ведь мы передаем data в $.ajax(options) (17 строка)
В случае GET запроса (а $.ajax по умолчанию делает get-запрос, и следует выставить post вместо него) будет сделан запрос на site.ru/path/to/controller?&comment=БлаБла&id_mess=5

Что в пхп достается через

$message_id = (integer) $_GET['id_mess'];
$comment_content = (string) $_GET['comment'];

Но нужно выставить $.ajax({type: 'POST'});

Тогда на серваке нужно будет использовать $_POST[]

аньше я в js делал вот так:

var comment=$("#comment").val();
var id_message=$("#id_message").val();

ОК. А дальше как?