Как передать данные из НЕ инпута в форме?

Question

[Danila]

Есть в форме такой элемент "рейтинг"


обычный див с свгшками, кликаешь - меняется значение рейтинга.
получить текущее значение не проблема, а вот как это значение отправить со всеми полями формы?

в голову приходит только следующее: создать скрытый инпут и при клике на звездочку присваивать текущее значение этому инпуту, но есть мнение что существует и более красивое решение. Как бы вы сделали?

Comments

[OVK2015]

ajax не подходит?

[Danila]

OVK2015: подходит, другое дело знал бы как это реализовать или в какую сторону копать

[OVK2015]

Данила:
C ajax все просто,- в goole захочешь не промахнешься.
Покажите ту часть html, данные из которой нужно передать

[Danila]

OVK2015: в html данных нет, значение можно получить в js'e

[OVK2015]

Данила:
"а вот как это значение отправить со всеми полями формы"
Я про поля формы, которые кроме кол-ва отмеченных звездочек передавать нужно.

[Danila]

OVK2015: под рукой кода нет, но это обычная форма из 6-7 полей

[OVK2015]

Данила: Тогда как-то:
js:
$('.star').bind('click', sendForm);
function sendForm(event)
{
$ajax
({
url: 'formHandler.php',
method: 'POST',
data:
{
rating: starsAmount, // Подсчитать кол-во помеченых звезд
field1: $('#field1').val(),
......
fieldN: $('#fieldN').val(),
},
success: function(data){// Обрабатываем ответ, если надо},
error: function(error){console.log('Ошибка');}
})
}

php:
$rating = $_POST["rating"];
$fieldN = $_POST["fieldN"];

[Danila]

OVK2015: Спасибо за помощь

[OVK2015]

Данила: Не за что, вроде

Answer 1

[IceJOKER]

в голову приходит только следующее: создать скрытый инпут и при клике на звездочку присваивать текущее значение этому инпуту, но есть мнение что существует и более красивое решение. Как бы вы сделали?

- это и есть самый хороший способ, тем более если нужно отправить вместе с формой

Answer 2

[Андрей Hecc]

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

<div class="starContainer">                
      <img src="star.svg" data-star="1">
      <img src="star.svg" data-star="2">
      <img src="star.svg" data-star="3" class="selected">
      <img src="star.svg" data-star="4">
      <img src="star.svg" data-star="5">                
</div>

// jQuery
function getRank(){
  var rank = $('.starContainer').find('img.selected').data('star');
  return rank;
}
 var rank = getRank();
 jQuery.ajax({
            type: "POST",
            url: handler.php,          
            data: {
                'value1': a,
                'value2': b,
                'rank': rank 
            },
            success: function (result) {...}
        });

Comments

[Danila]

как я и сказал значение получить не проблема, как его дальше передать?

[Андрей Hecc]

Данила: Отредактировал пост.
Собираете данные и отправляете в обработчик через ajax. Где переменные а,b значение других инпутов формы

[AlikDex]

Данила: jQuery.ajax ни о чем не говорит? Ну тогда вперед в гугл.

[Danila]

Андрей Hecc: Спасибо

Answer 3

[bkosun]

jQuery Raty - A Star Rating Plugin
Примеры реализации

Comments

[Danila]

как передавать значение не увидел.
функционал звездочек у меня реализован, спасибо

[bkosun]

Данила: если значение нужно передать вместе с формой, скрытое поле - лучшее решение. По поводу плагина, там есть возможность вызвать callback функцию после выбора рейтинга в которой можно передать выбранное значение удобным способом (ajax, input hidden, etc)