Форум

SayMeIDDQD · #1 (**permalink**) 04.07.2017, 19:12

Всем привет!

Вопрос такого рода, вод есть у меня такой код:

<div class="btn-group" role="group">

                    <label class="btn btn-default">
                        <input type="hidden" name="rooms[]" value="1">
                        1
                    </label>
                    <label class="btn btn-default">
                        <input type="hidden" name="rooms[]" value="2">
                        2
                    </label>
                    <label class="btn btn-default">
                        <input type="hidden" name="rooms[]" value="3">
                        3
                    </label>
                    <label class="btn btn-default">
                        <input type="hidden" name="rooms[]" value="4">
                        4+
                    </label>

                </div>

$(document).ready(function(){
            $("label").click(function(){
                var $t = $(this);

              if ($t.hasClass("btn-primary")) {
                    $t.removeClass("btn-primary").addClass("btn-default");
                } else if ($t.hasClass("btn-default")) {
                    $t.removeClass("btn-default").addClass("btn-primary");
                }

            });
        });

Все чудесно прощелкивается, оформление кнопок изменяется, но, я хочу чтобы в обработчик на php уходила информация о том, какие кнопки активны, уже все что пришло в голову перебробовал а результата никакого, либо не уходит ничего, либо уходит все вместе с тем, что не выбиралось. Надеюсь, кто-нибудь поможет найти решение.

для примера что я хочу получить - кнопки выбора кол-ва комнат на domofond.ru

рони · #2 (**permalink**) 04.07.2017, 19:30

SayMeIDDQD,
на всякий случай, класс btn-default не нужен.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .btn-default{
    background-color: #006400;
  }
  .btn-primary{
    background-color: #FF0000;
  }
  .btn {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 5px;
    color: #FFFFFF;
     text-align: center;
      line-height: 50px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$("label").on("click", function(event){
event.preventDefault();
$(this).toggleClass("btn-primary btn-default");
$("p").html($(".btn-primary input").serialize())
})
});
  </script>
</head>

<body>

<div class="btn-group" role="group">

                    <label class="btn btn-default">
                        <input type="hidden" name="rooms[]" value="1">
                        1
                    </label>
                    <label class="btn btn-default">
                        <input type="hidden" name="rooms[]" value="2">
                        2
                    </label>
                    <label class="btn btn-default">
                        <input type="hidden" name="rooms[]" value="3">
                        3
                    </label>
                    <label class="btn btn-default">
                        <input type="hidden" name="rooms[]" value="4">
                        4+
                    </label>

                </div>
<p></p>
</body>
</html>

SayMeIDDQD · #3 (**permalink**) 04.07.2017, 19:40

О, спасибо, на шаг ближе к решению

А как это все счастье передать с формы обработчику на php через post?

без btn-default будет не так красиво https://codepen.io/anon/pen/zzaOPe

рони · #4 (**permalink**) 04.07.2017, 20:00

SayMeIDDQD,

$.ajax({
  url: "...",
  method: "POST",
  data: $(".btn-primary input").serialize(),
...

SayMeIDDQD · #5 (**permalink**) 04.07.2017, 20:23

не-не-не, не сразу, мне нужно изменить атрибуты у инпутов чтобы потом при отправке формы я мог их обратотать

SayMeIDDQD · #6 (**permalink**) 04.07.2017, 20:32

Все, разобрался, спасибо огромное!

рони · #7 (**permalink**) 04.07.2017, 20:39

SayMeIDDQD,
на всякий случай без
function(event){
event.preventDefault();
ни ваш, ни мой код в ie работать не будут.

Форум

Справочник

Discord чат

Курсы javascript