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 |
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>
|
О, спасибо, на шаг ближе к решению :)
А как это все счастье передать с формы обработчику на php через post? без btn-default будет не так красиво https://codepen.io/anon/pen/zzaOPe |
SayMeIDDQD,
$.ajax({
url: "...",
method: "POST",
data: $(".btn-primary input").serialize(),
...
|
не-не-не, не сразу, мне нужно изменить атрибуты у инпутов чтобы потом при отправке формы я мог их обратотать
|
Все, разобрался, спасибо огромное!
|
SayMeIDDQD,
на всякий случай без function(event){ event.preventDefault(); ни ваш, ни мой код в ie работать не будут. |
| Часовой пояс GMT +3, время: 11:45. |