Значение из select option
Есть такая часть кода:
e.forEach(function (e) {
t.forEach(function (t) {
var months = 1;
var value = 1;
e == t.id ?
$('<div class="unit" data-id="' + t.id + '"><div class="billboard-address">' + t.address +
'<a href="" class="close"></a></div><label style="margin: 0 14px 0 0; display: inline-block;' +
' float: right;"><input type="checkbox" name="need_design" value="1" checked="checked" ' +
'style="width: 14px;"><div class="label">Разработать макет рекламного щита</div></label>' +
'<div class="test">Стоимость аренды щита за 1 месяц: ' + t.price + '</div>' +
'<div class="test">Срок размещения в месяцах: <script>function displayVals' + t.id +
'(){value = $( "#select' + t.id + '" ).val();};' +
'$( "select' + t.id + '" ).change( displayVals' + t.id + ' );displayVals' + t.id +
'();</script><select id="select' + t.id +
'" onChange="displayVals' + t.id + '(); alert(value);">' +
'<option value="1">1</option><option value="2">2</option><option value="3">3</option>' +
'<option value="4">4</option><option value="5">5</option><option value="6">6 (скидка -6%)</option>' +
'<option value="7">7 (скидка -7%)</option><option value="8">8 (скидка -8%)</option>' +
'<option value="9">9 (скидка -9%)</option><option value="10">10 (скидка -10%)</option>' +
'<option value="11">11 (скидка -11%)</option><option value="12">12 (скидка -12%)</option>' +
'</select>' +
'<div class="new-price">Итоговая цена по данному щиту: <span>' + months*t.price*value + '</span>' +
'</div></div></div>').prependTo("#request-form .selected-billboards .list")
: r.push(e)
})
}),
Прошу прощение за неудобоваримость кода, пишу как умею.. При изменении select option у меня вылетает окошка alert'ом, и в нем отображается правильное текущее value. А как эту value динамически менять вот в этом месте: ... '<div class="new-price">Итоговая цена по данному щиту: <span>' + months*t.price*value + '</span>' + ...Чтобы при изменении select option value - сразу показывалось итоговое значение? |
Я правильно понял, ты для каждого селекта создаешь отдельную обрабатывающую функцию displayVals + t.id?
Достаточно одной, в которую ты будешь передавать указатель на селект, а в ней уже получать его значение и заносить в соотв. место. <select ... onChange="displayVals(this); > |
Цитата:
--- upd. Нет, при Вашем способе по смене select не проходит alert. Т.е. в данном случае, наверное, все же нужно указывать как я писал в начале топика... |
Без кода я не подскажу почему не работает :)
Оптимальный вариант - после формирования структуры(скрипты вписывать не нужно) вешаешь на все селекты обработчик
$('div.unit select').on('change', function() {
alert($(this).val());
//делаем что нужно
});
|
Цитата:
Часть 1:
function arrayObjectIndexOf(e, t, r) {
for (var a = 0, o = e.length; o > a; a++)
if (e[a][r] === t) return a;
return -1
}
function triads(e) {
return e = e.toString(), e.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1 ")
}
function jsTils(e, t) {
var r;
return count = e % 100, count >= 5 && count <= 20 ? r = t[2] : (count %= 10, r = 1 == count ? t[0] : count >= 2 && count <= 4 ? t[1] : t[2]), r
}
function localstorageGet(e) {
return Modernizr.localstorage ? lscache.get(e) ? lscache.get(e) : (localStorage.clear(), !1) : void 0
}
function localstorageSet(e, t, r) {
Modernizr.localstorage && lscache.set(e, JSON.stringify(t), 1440), (r = r || function() {})()
}
$(function() {
function e(e) {
a.slideUp(300), a.eq(e).slideDown(300, function() {
_billboards_map_ && _billboards_map_.container.fitToViewport()
})
}
function t() {
$activeBtn = r.filter(".active"), index = r.index($activeBtn), e(index)
}
var r = $(".tabs-btn>a.tab-btn"),
a = $(".tabs>.tab");
t(), r.click(function(e) {
e.preventDefault(), $(this).is(".active") || (r.removeClass("active"), $(this).addClass("active"), _mapMarkers_.forEach(function(e) {
e.marker.balloon.close()
}),
t())
})
});
var _mapMarkers_ = [],
_billboards_map_;
$(function() {
function e() {
var e = localstorageGet("billboards_ids");
$(".billboards #list-view tr").removeClass("ordered"),
_mapMarkers_.forEach(function(e) {
var t = e.marker.properties.get("type");
e.marker.properties.set("btn_type", "Заказать"),
e.marker.properties.set("ordered", ""),
e.marker.options.set("iconImageHref", o[t])
}),
e && e.forEach(function(e) {
$(".billboards #list-view tr[data-id=" + e + "]").addClass("ordered"),
_mapMarkers_.forEach(function(t) {
if (e == t.id) {
var r = t.marker.properties.get("type");
t.marker.properties.set("btn_type", "Отменить"),
t.marker.properties.set("ordered", "ordered"),
t.marker.options.set("iconImageHref", i[r])
}
})
});
r();
}
function t() {
var e = localstorageGet("billboards_ids"),
t = 0,
r = 0;
if (e) {
e.forEach(function(e) {
billboards_json.items.forEach(function(a) {
e == a.id && (t += 1, r += a.price)
})
});
var a = jsTils(t, ["Выбран ", "Выбрано ", "Выбрано "]) + t + jsTils(t, [" щит", " щита", " щитов"]);
r = triads(r), s.find(".count").text(a), s.find(".numbers").text(r + " рублей."), 0 == t ? s.hide() : s.show()
} else s.hide()
}
function r() {
"undefined" != typeof billboards_json && localstorageSet("billboards_json", billboards_json.items)
}
function a() {
if ($("#request-form .selected-billboards").size()) {
var e = localstorageGet("billboards_ids"),
t = localstorageGet("billboards_json");
if (e && t && e.length > 0) {
var r = [];
e.forEach(function (e) {
var months = 1;
var value = 1;
t.forEach(function (t) {
e == t.id ?
$('<div class="unit" data-id="' + t.id + '"><div class="billboard-address">' + t.address +
'<a href="" class="close"></a></div><label style="margin: 0 14px 0 0; display: inline-block;' +
' float: right;"><input type="checkbox" name="need_design" value="1" checked="checked" ' +
'style="width: 14px;"><div class="label">Разработать макет рекламного щита</div></label>' +
'<div class="test">Стоимость аренды щита за 1 месяц: ' + t.price + '</div>' +
'<div class="test">Срок размещения в месяцах: <script>function displayVals' + t.id +
'(){var value = $( "#select' + t.id + '" ).val();};' +
'$( "select' + t.id + '" ).change(displayVals' + t.id + ');displayVals' + t.id +
'();</script><select id="select' + t.id +
'" onChange="displayVals' + t.id + '(); alert(value*' + t.price + ');">' +
'<option value="1">1</option><option value="2">2</option><option value="3">3</option>' +
'<option value="4">4</option><option value="5">5</option><option value="6">6 (скидка -6%)</option>' +
'<option value="7">7 (скидка -7%)</option><option value="8">8 (скидка -8%)</option>' +
'<option value="9">9 (скидка -9%)</option><option value="10">10 (скидка -10%)</option>' +
'<option value="11">11 (скидка -11%)</option><option value="12">12 (скидка -12%)</option>' +
'</select>' +
'<div class="new-price">Итоговая цена по данному щиту: <span>' + months*t.price*value + '</span>' +
'</div></div></div>').prependTo("#request-form .selected-billboards .list")
: r.push(e)
})
}),
|
Часть 2:
} else var n = "Доступен";
var l = new ymaps.Placemark(i.position, {
type: i.type,
address: i.address,
reserved: n,
strong: s,
price: triads(i.price),
photo: i.photo,
id: i.id,
btn_type: "Заказать",
ordered: ""
}, {
balloonContentLayout: r,
balloonPanelMaxMapArea: 0,
balloonMaxWidth: 500,
iconLayout: "default#image",
iconImageHref: o[i.type],
iconImageSize: [53, 65],
iconImageOffset: [-26, -65]
});
l.events.add("balloonopen", function() {}), _mapMarkers_.push({
id: i.id,
position: i.position,
marker: l
}), t.geoObjects.add(l), e()
})
});
var s = $(".tabs-btn .selected");
if ("undefined" != typeof billboards_json) {
var n = ".billboards #list-view .order a, .billboard-mark .order";
$(document).on("click", n, function(r) {
var a = $(this).closest("tr").attr("data-id") || $(this).attr("data-id");
if (localstorageGet("billboards_ids"))
var o = localstorageGet("billboards_ids");
else
var o = [];
if ($(this).is(".ordered") || $(this).closest("tr").is(".ordered")) {
var o = localstorageGet("billboards_ids");
o.splice(o.indexOf(a), 1)
} else -1 == o.indexOf(a) && o.push(a);
localstorageSet("billboards_ids", o), r.preventDefault(), t(), e()
}), t(), e()
}
$(".billboards #list-view .price .numbers").each(function() {
var e = $(this).text();
$(this).text(triads(e))
}), r(), $(document).on("click", "#request-form .selected-billboards .unit .close", function(e) {
var t = $(this).closest(".unit").attr("data-id"),
r = localstorageGet("billboards_ids");
r.splice(r.indexOf(t), 1);
var o = $(this);
localstorageSet("billboards_ids", r, function() {
o.closest(".unit").fadeOut(300, function() {
0 == r.length && a()
})
}), e.preventDefault()
}), a(), $("#request-form").validate({
rules: {
org: "required",
phone: "required"
},
messages: {
org: "Обязательное поле",
phone: "Обязательное поле"
},
submitHandler: function(e) {
var t = localstorageGet("billboards_ids");
return t.length > 0 ? ($.ajax({
type: $(e).attr("method"),
url: $(e).attr("action"),
dataType: "json",
data: $(e).serialize() + "&" + $.param({
billboards: t
})
}).done(function(e) {
jsonResponse = e, 1 == jsonResponse.status ? ($("#request-form .wrapper").slideUp(), $("#request-form .final").slideDown(), t = [], localstorageSet("billboards_ids", t)) : alert("Произошёл сбой. Пожалуйста попробуйте ещё раз.")
}).fail(function() {
alert("Произошёл сбой. Пожалуйста попробуйте ещё раз.")
}), $("#request-form button").prop("disabled", !0)) : $("#request-form .selected-billboards .title").css({
color: "red"
}), 0 == $(".selected-billboards").size() && ($.ajax({
type: $(e).attr("method"),
url: $(e).attr("action"),
dataType: "json",
data: $(e).serialize()
}).done(function(e) {
jsonResponse = e, 1 == jsonResponse.status ? ($("#request-form .wrapper").slideUp(), $("#request-form .final").slideDown()) : alert("Произошёл сбой. Пожалуйста попробуйте ещё раз.")
}).fail(function() {
alert("Произошёл сбой. Пожалуйста попробуйте ещё раз.")
}), $("#request-form button").prop("disabled", !0)), !1
},
invalidHandler: function() {
var e = localstorageGet("billboards_ids");
e.length <= 0 && $("#request-form .selected-billboards .title").css({
color: "red"
})
}
}), $("body.billboards #list-view td.photo a.address").click(function(e) {
e.preventDefault();
var t = $(this).closest("tr").attr("data-id");
$(".tabs-btn .map-view").click(), setTimeout(function() {
_mapMarkers_.forEach(function(e) {
e.id == t && (_billboards_map_.setZoom(18), _billboards_map_.setCenter(e.position), e.marker.balloon.open())
})
}, 500)
})
}), $(function() {
function e(e, t) {
t = t || function() {};
var r = e.magnificPopup({
type: "image",
removalDelay: 500,
callbacks: {
beforeOpen: function() {
this.st.image.markup = this.st.image.markup.replace("mfp-figure", "mfp-figure mfp-with-anim"), this.st.mainClass = "mfp-move-from-top"
},
close: function() {
t()
}
},
closeOnContentClick: !0,
showCloseBtn: !1,
tLoading: "Загрузка..."
});
return r
}
e($("#list-view td.photo a.photo")), $(document).on("click", ".billboard-mark .photo", function(t) {
t.preventDefault(), e($(this)).magnificPopup("open")
}), $(".content-wrapper .photos").magnificPopup({
delegate: "a",
type: "image",
gallery: {
enabled: !0,
tPrev: "Предыдущая (Стрелка влево)",
tNext: "Следующая (Стрелка вправо)",
tCounter: '<span class="mfp-counter">%curr% из %total%</span>'
},
callbacks: {
beforeOpen: function() {
this.st.image.markup = this.st.image.markup.replace("mfp-figure", "mfp-figure mfp-with-anim"), this.st.mainClass = "mfp-move-from-top"
}
},
image: {
titleSrc: "title"
}
})
}), $(function() {
ymaps.ready(function() {
var e = new ymaps.Map($("body.index .small-map, body.contacts .map")[0], {
center: [47.24470432, 39.72322986],
zoom: 18
}),
t = new ymaps.Placemark([47.24470432, 39.72322986], {}, {
iconLayout: "default#image",
iconImageHref: tribuna_theme_path_ + "/images/ico-marker-mark.png",
iconImageSize: [50, 73],
iconImageOffset: [-25, -73]
});
e.geoObjects.add(t), e.controls.remove("mapTools"), e.controls.remove("scaleLine"), e.controls.remove("searchControl"), e.controls.remove("trafficControl")
})
}),
$(function() {
$(".contacts-form").validate({
rules: {
name: "required",
phone: "required",
content: "required"
},
messages: {
name: "Обязательное поле",
phone: "Обязательное поле",
content: "Обязательное поле"
},
submitHandler: function(e) {
return $.ajax({
type: $(e).attr("method"),
url: $(e).attr("action"),
data: $(e).serialize()
}).done(function() {
$(".contacts-form .wrapper").slideUp(),
$(".contacts-form .final").slideDown()
}), !1
}
})
});
Разбил на две части, т.к. форум не дает возможности выложить более 10000 символов в одном сообщении, а тега SPOILER я не нашел((( |
'<div class="new-price">Итоговая цена по данному щиту: <span>' + months*t.price*value + '</span>' здесь все из span убираем, monts и t.price - записывать значения в тег new-price (data-month и data-price) получится чтото вроде '<div class="new-price" data-month="'+months+'" data-price="'+t.price+'" >Итоговая цена по данному щиту: <span></span>' и доделываем наш обработчик селектов:
$('div.unit select').on('change', function() {
var month = $(this).next('div.new-price').data('month');
var price = $(this).next('div.new-price').data('price');
var x= month*price*$(this).val(); //вычисляем значение
$(this).next('div.new-price').find('span').html(x); //заносим новое значение
});
|
Spass,
Оффигительно простое и крутое решение))) Спасибо!! Все работает, уже прикрутил сверх того свои условия)))) Спасибо! :-) |
Пожалуйста.
На будущее отделяй мух от котлет (js от html), и все будет намного проще. |
Цитата:
Есть еще подобный вопрос, как теперь можно отловить все итоговые значения каждого товара и просуммировать их.. Т.е. это должна быть функция внутри функции $('div.unit select').on('change', function(), правильно? --- С этим сам разобрался :)
var sumCost = 0, sumDiscount = 0;
$('.shield-price').each(function(){
sumCost += parseInt($(this).html(), 10);
});
$('.final-cost').html('Итого: <span>'+sumCost+'</span> руб.');
$('.shield-discount').each(function(){
sumDiscount += parseInt($(this).html(), 10);
});
$('.final-discount').html('Итоговая скидка: <span>'+sumDiscount+'</span> руб.');
Однако, если все значения seect выставить в 1, т.е. в то положение, когда самой скидки нет - то остается последнее значение скидки.. вместо нуля(((( Так понимаю, нужна проверка на значение всех и каждого select option val, верно? |
Если пересчет нужно вести после каждой смены селекта то да, внутри обработчика
Будет чтото вроде:
var summ=0;
$('div.new-price span').each( function(){
summ += $(this).html();
});
|
На данный момент пришел к тому, что:
1) При выборе селектов в разных значениях все считается правильно; 2) Если вновь выставить селекты на единицу - все правильно считается и отображается 0 там, где это должно быть; 3) Если выставить какой-либо селект, а затем нажать по блоку .close то сам "товар" (с селектом, названием и т.д.) удаляется, однако значение его селекта остается... Т.е. я так понимаю, что нужно как-либо связать функцию "удаления" блока и очистки значений от его селектов.. Как это можно сделать? Вызывать при закрытии функцию так же как при change? Привожу вновь небольшой кусок кода (выше в сообщениях он тоже есть, но для наглядности выброшу его тут):
$(".billboards #list-view .price .numbers").each(function() {
var e = $(this).text();
$(this).text(triads(e))
}), r(), $(document).on("click", "#request-form .selected-billboards .unit .close", function(e) {
var t = $(this).closest(".unit").attr("data-id"),
r = localstorageGet("billboards_ids");
r.splice(r.indexOf(t), 1);
var o = $(this);
localstorageSet("billboards_ids", r, function() {
o.closest(".unit").fadeOut(300, function() {
0 == r.length && a()
})
}), e.preventDefault()
}), a(), $("#request-form").validate({
rules: {
org: "required",
phone: "required",
fio: "required"
},
messages: {
org: "Обязательное поле",
phone: "Обязательное поле",
fio: "Обязательное поле"
},
Если я правильно понимаю, то "блок" .unit не удаляется, а лишь скрывается.. или нет? В общем, суть в том, что я никак не могу добиться того, чтобы перед его удалением конкретно его селект уходил в первое значение (тогда все будет правильно считаться)... Помогите пжалста, я разбираюсь, ищу варианты в гугле, но пока без продвижения.. |
Цитата:
|
.on("click", "#request-form .selected-billboards .unit .close", function(e) {
var t = $(this).closest(".unit").attr("data-id"),
r = localstorageGet("billboards_ids");
r.splice(r.indexOf(t), 1);
var o = $(this);
localstorageSet("billboards_ids", r, function() {
o.closest(".unit").fadeOut(300, function() {
0 == r.length && a()
})
})
Это судя по всему обработчик который удаляет блок. o.closest(".unit").fadeOut(300, function() { 0 == r.length && a() }) Я выделил подозрительный блок, уверен что он удаляет блок? Если уверен то после него сделай еще один пересчет суммы. |
Цитата:
Или я не правильно пересчет сделал.. так я его просто скопировал и заменил имена переменных, которые использую..(
o.closest(".unit").fadeOut(300, function() {
0 == r.length && a();
sumDiscount += $(this).html();
sumCost += $(this).html();
})
Попробовал "обнулить" this s - т.е. текущую скидку:
o.closest(".unit").fadeOut(300, function() {
0 == r.length && a();
s = $(this).html(0);
sumDiscount += $(this).html();
sumCost += $(this).html();
})
Ничего не дало.. видимо, я и тут накосячил :D Это точно блок, который удаляет этот .unit, я анимацию на 3000 поставил - теперь долго пропадает))) |
fadeOut не удаляет, а просто скрывает (плавно)
0 == r.length && a(); - вот это я вообще не знаю что делает, чтобы удалить блок можно написать $(this).remove(); sumDiscount += $(this).html(); sumCost += $(this).html(); Неправильно (что ты добавляешь если блока уже нет?). Пройдись по всем оставшимся блокам, пересчитай сумму и обнови значения. |
Цитата:
localstorageSet("billboards_ids", r, function() {
o.closest(".unit").fadeOut(300, function() {
$(this).find('select').val('1');
$(this).remove();
})
Т.е. я текущему блоку даю значение 1, а затем его удаляю. И, сама сумма сразу не пересчитывается, НО если поменять в любом другом селекте любое значение - то все считается правильно. Т.е. сейчас просто при удалении блока автоматом не перепрописывается новая сумма.. она высчитывается, видимо, но не прописывается.. |
$(this).find('select').val('1').trigger('change'). end().remove();
|
Цитата:
var g, oldDiscount, newDiscount;
oldDiscount = $(this).parents('.list').find('.final-discount span').html();
g = $(this).find('.shield-discount').html();
newDiscount = oldDiscount - g;
$(this).find('select').val('1');
$(this).parents('.list').find('.final-discount span').html(newDiscount);
$(this).remove();
Ваш вариант маленький, простой.. и блин.. работает как надо :D спасибо)))) |
А не подскажите, как теперь выбранные значения передать, скажем, в почту? У меня при заказе на мной указанную почту приходит сообщение:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
</head>
<body>
<div>
@if (isset($org) && $org)
<p>
Организация: {{ $org }}
</p>
@endif
@if (isset($fio) && $fio)
<p>
ФИО: {{ $fio }}
</p>
@endif
@if (isset($phone) && $phone)
<p>
Телефон: {{ $phone }}
</p>
@endif
@if (isset($email) && $email)
<p>
e-mail: {{ $email }}
</p>
@endif
@if (isset($billboards) && !is_null($billboards) && count($billboards))
<p>Выбранные щиты:</p>
@foreach ($billboards as $billboard)
<p>
<a href="http://{{ $_SERVER['HTTP_HOST'] }}/admin/entity/billboards/{{ $billboard->id }}/edit" target="_blank">{{ $billboard->name }}</a> -
@if ($billboard->status == 'free')
зарезервировать
@elseif ($billboard->status == 'reserved')
поставить второй резерв
@elseif ($billboard->status == 'blocked')
известить, когда освободится
@endif
</p>
@endforeach
@endif
@if (isset($comment) && $comment)
<p>
Комментарий к заказу: {{ Helper::nl2br($comment) }}
</p>
@endif
</div>
</body>
</html>
Переменные org, fio, phone, email берутся из введенных пользователем на сайте данных, можно как-то таким же образом передать несколько переменных? В частности, интересуют выбранные val селектов и пара переменных sumCost и sumDiscount, которые у меня отвечают за сумму общую и сумму скидки.. |
| Часовой пояс GMT +3, время: 07:41. |