Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.07.2017, 19:12
Новичок на форуме
Отправить личное сообщение для SayMeIDDQD Посмотреть профиль Найти все сообщения от SayMeIDDQD
 
Регистрация: 16.01.2016
Сообщений: 9

Input button и обработка
Всем привет!

Вопрос такого рода, вод есть у меня такой код:
<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 04.07.2017 в 19:35.
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2017, 19:40
Новичок на форуме
Отправить личное сообщение для SayMeIDDQD Посмотреть профиль Найти все сообщения от SayMeIDDQD
 
Регистрация: 16.01.2016
Сообщений: 9

О, спасибо, на шаг ближе к решению
А как это все счастье передать с формы обработчику на php через post?

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

Последний раз редактировалось SayMeIDDQD, 04.07.2017 в 20:00.
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2017, 20:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

SayMeIDDQD,
$.ajax({
  url: "...",
  method: "POST",
  data: $(".btn-primary input").serialize(),
...
Ответить с цитированием
  #5 (permalink)  
Старый 04.07.2017, 20:23
Новичок на форуме
Отправить личное сообщение для SayMeIDDQD Посмотреть профиль Найти все сообщения от SayMeIDDQD
 
Регистрация: 16.01.2016
Сообщений: 9

не-не-не, не сразу, мне нужно изменить атрибуты у инпутов чтобы потом при отправке формы я мог их обратотать
Ответить с цитированием
  #6 (permalink)  
Старый 04.07.2017, 20:32
Новичок на форуме
Отправить личное сообщение для SayMeIDDQD Посмотреть профиль Найти все сообщения от SayMeIDDQD
 
Регистрация: 16.01.2016
Сообщений: 9

Все, разобрался, спасибо огромное!
Ответить с цитированием
  #7 (permalink)  
Старый 04.07.2017, 20:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
обработка щелчка по button. тонкие различия с input type=button xtfkpi Events/DOM/Window 2 28.01.2015 23:32
Срабатывает нажатие на button при нажатии Enter внутри input rebeled Элементы интерфейса 19 07.02.2013 16:07
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Что делаю не так? Javascript + Radio button + Input dmonco Элементы интерфейса 3 19.05.2012 16:22
Обработка нескольких file input Temlekur Работа 8 21.01.2010 18:30