Javascript-форум - Достать значения input'ov

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Достать значения input'ov (https://javascript.ru/forum/jquery/35527-dostat-znacheniya-input%27ov.html)

Vladislav

13.02.2013 18:50

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

Здравствуйте, совсем недавно начал изучать 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	13.02.2013 19:00

Цитата:

Сообщение от Vladislav

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

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

danik.js

13.02.2013 20:18

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

danik.js

13.02.2013 20:35

<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

13.02.2013 20:37

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

danik.js

13.02.2013 20:52

Цитата:

Сообщение от Vladislav

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

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

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

Vladislav

13.02.2013 21:07

Цитата:

Сообщение от danik.js (Сообщение 233721)

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

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

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

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

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

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

danik.js

13.02.2013 21:55

Цитата:

Сообщение от Vladislav

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

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

Цитата:

Сообщение от Vladislav

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

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

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

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

Цитата:

Сообщение от Vladislav

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

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

Цитата:

Сообщение от Vladislav

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

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

Vladislav

13.02.2013 22:03

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

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

13.02.2013 22:14

Так ведь мы передаем 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[]

Цитата:

Сообщение от Vladislav

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

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

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

Vladislav

13.02.2013 22:20

У меня было так:

$(function(){
   $("#com_wall_submit").click(function(){
      var comment=$("#comment").val();
      var id_message=$("#id_message").val();
      $.ajax({
         type: "POST",
         url: "handlers/com_wall",
         data: {"comment": comment, "id_message": id_message}...

Дальше в php я просто получал эти переменные следующим образом:

$comment=$_POST['comment'];
$id_message=$_POST['id_message'];

и работал с ними.

danik.js

13.02.2013 22:42

Как я уже говорил, $.ajax() принимает в качестве data несколько форматов. Так что без разницы

var data = {comment: $('#comment').val(), id_message: $('id_message').val()};

или
var data = 'comment=comment_content&id_message=message_id'
Оба варианта приемлемы. И сервера эти различия не касаются.

Vladislav

13.02.2013 23:15

Сделал как вы говорите, то есть:
js:

$(function(){
   $(".button_comment").click(function(){
      var data = $(this.form).serialize();
      $.ajax({
         type: "POST",
         url: "handlers/com_wall",
         data: data,...

html:

<form class='form-container' action='handlers/com_wall' method='post'>
                                          <textarea rows='1' placeholder='Оставить комментарий..' id='com'></textarea>
                                          <input type='hidden' value='$id_message' id='id_mes'>
                                          <input type='hidden' value='$id_mine' id='sender'>
                                          <div class='wrap_button_comment'>
                                              <div class='error_com_box' id='error_com_box'></div>
                                              <input type='submit' value='Комментировать' class='button_comment' id='com_wall_submit'>
                                              <div class='clear'></div>
                                          </div>
                                      </form>

php:

<?php
if (isset($_POST['com'])) {$com=$_POST['com'];if ($com=='') {unset($com);}}
if (isset($_POST['id_mes'])) {$id_mes=$_POST['id_mes'];if ($id_mes=='') {unset($id_mes);}}
if (isset($_POST['sender'])) {$sender=$_POST['sender'];if ($sender=='') {unset($sender);}}

if (empty($id_mes) OR empty($sender)){
    echo 0;
    exit();
}
....

и мне выдает ошибку "0", то есть переменная $sender или $id_mes пустые...

danik.js

13.02.2013 23:33

Vladislav, ну вы опять закрыли глаза. Посмотрите на первый мой пример. Там в html прописаны name для элементов формы.

unset($var) не нужно делать, ибо empty($var = '') выдаст true

Vladislav

14.02.2013 00:22

как не прискорбно мне про это говорить, но я убрал unset, добавил name и все равно нечего не получается, хоть на этот раз ошибку уже не выводит.

Ладно, поробую еще в нете покапаться, может быть пример найду какой-то...

Вам спасибо большое, даже огромное!! Я еще вернусь!

danik.js

14.02.2013 08:10

Учитесь локализовывать ошибки. Для начала проверьте данные, которые отправляет браузер (вкладка Сеть(Network)). Если все ок, значит проблема на сервере. var_dump обычно помогает во всем разобраться.

danik.js

14.02.2013 08:16

Вот как это выглядит в Chrome Developer Tools:

Часовой пояс GMT +3, время: 19:03.