Вход

Просмотр полной версии : Input button и обработка

SayMeIDDQD
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
рони
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
04.07.2017, 19:40
О, спасибо, на шаг ближе к решению :)
А как это все счастье передать с формы обработчику на php через post?

без btn-default будет не так красиво https://codepen.io/anon/pen/zzaOPe
рони
04.07.2017, 20:00
SayMeIDDQD,
$.ajax({
url: "...",
method: "POST",
data: $(".btn-primary input").serialize(),
...
SayMeIDDQD
04.07.2017, 20:23
не-не-не, не сразу, мне нужно изменить атрибуты у инпутов чтобы потом при отправке формы я мог их обратотать
SayMeIDDQD
04.07.2017, 20:32
Все, разобрался, спасибо огромное!
рони
04.07.2017, 20:39
SayMeIDDQD,
на всякий случай без
function(event){
event.preventDefault();
ни ваш, ни мой код в ie работать не будут.