21.04.2019, 16:49
|
|
Новичок на форуме
|
|
Регистрация: 21.04.2019
Сообщений: 7
|
|
|
Проблема с калькулятором
Доброго дня, в javascript мало разбираюсь, но нужно калькулятор на сайт настроить.
Калькулятор есть, рассчитывает, но опции из <select> не меняются, то есть их значения не меняются. Вот:
<select id="vid" name="vid" class="vid">
<option value="120">Однотонные</option>
<option value="1200">Двух-уровневые</option>
<option value="1000">Арт - печать</option>
<option value="350">Небо с облаками / Искра</option>
</select>
При выборе любой опции из списка значение остается как у первой опции, то есть 120. В скрипте написал так:
$(function() {var vid = document.getElementById('vid').options[document.getElementById('vid').selectedIndex].value;
а это формула:
$('#square').keyup(function(){
var square = $(this).val();
$('#price').val(square*vid)
});
Все работает, только селект значение не меняет при выборе любой опции.
Подскажите что нужно еще прописать в скрипте. Заранее спасибо.
|
|
21.04.2019, 17:08
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
$(function() {var vid = document.getElementById('vid').options[document.getElementById('vid').selectedIndex].value;
Нужно установить обработчик изменения в списке (change) и в поле ввода (keyup, input).
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
</style>
<script type="text/javascript">
$(function() {
var elm = $('#vid,#price').on('change input keyup', function() {
alert(this.value * elm.not(this).val())
})
});
</script>
</head>
<body>
<select id="vid" name="vid">
<option value="120">Однотонные</option>
<option value="1200">Двух-уровневые</option>
<option value="1000">Арт - печать</option>
<option value="350">Небо с облаками / Искра</option>
</select>
<input id="price" />
</body>
</html>
|
|
21.04.2019, 17:23
|
|
Новичок на форуме
|
|
Регистрация: 21.04.2019
Сообщений: 7
|
|
|
да теперь меняются значения при выборе опций, но не отображается в поле price, а только во всплывающем окне alert
|
|
21.04.2019, 17:28
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от rus333333
|
|
а только во всплывающем окне alert
|
Ну так это пример. Сделайте так: это
$('#vid,#price')
заменить на
$('#vid,#square')
а это
alert(this.value * elm.not(this).val())
заменить на
$('#price').val(this.value * elm.not(this).val()) |
|
21.04.2019, 17:39
|
|
Новичок на форуме
|
|
Регистрация: 21.04.2019
Сообщений: 7
|
|
|
Спасибо Вам большое, все меняет и считает, но какая то появилась, когда в поле square вводишь цифры, то в поле price на доли секунды появляется правильный ответ, а потом появляется NaN
а когда потом опции из селекта выбираешь, то нормальное число в поле price
|
|
21.04.2019, 17:44
|
|
Новичок на форуме
|
|
Регистрация: 21.04.2019
Сообщений: 7
|
|
|
Полностью скрипт выглядит так:
$(function() {
var elm = $('#vid,#square').on('change input keyup', function() {
10
$('#price').val(this.value * elm.not(this).val())
})
$('#square').keyup(function(){
var square = $(this).val();
$('#price').val(square*vid)
});
$('#price').keyup(function(){
var price = $(this).val();
$('#square').val(price/vid)
});
|
|
21.04.2019, 17:48
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Этого
$('#square').keyup(function(){
var square = $(this).val();
$('#price').val(square*vid)
});
$('#price').keyup(function(){
var price = $(this).val();
$('#square').val(price/vid)
})
не надо, все делает вот этот код
$(function() {
var elm = $('#vid,#square').on('change input keyup', function() {
$('#price').val(this.value * elm.not(this).val())
});
});
|
|
21.04.2019, 21:39
|
|
Новичок на форуме
|
|
Регистрация: 21.04.2019
Сообщений: 7
|
|
Сообщение от laimas
|
$(function() {
var elm = $('#vid,#square').on('change input keyup', function() {
$('#price').val(this.value * elm.not(this).val())
});
});
|
Еще раз спасибо большое, Вы меня выручили, все работает |
|
21.04.2019, 22:48
|
|
Новичок на форуме
|
|
Регистрация: 21.04.2019
Сообщений: 7
|
|
|
Теперь проблема с модальным окном, оно перестало закрываться при нажатии кнопки"отправить заявку"
Вот скрипт:
$('.modal').on('hidden.bs.modal', function (e) {
$('input:not(.type)', $(this)).val('');
});
$('form').submit(function(e){
e.preventDefault();
var form_data = {
'name':$(".name", $(this)).val(),
'tel':$(".tel", $(this)).val(),
'info':$(".info", $(this)).val(),
'vid':$("#vid", $(this)).val(),
'price':$("#price", $(this)).val(),
'square':$("#square", $(this)).val(),
'type':$(".type", $(this)).val()
};
$.ajax({
type: "POST",
url: "mail.php",
data: form_data,
success: function(){
$('.modal').modal('hide');
setTimeout(function() {
$('.success').fadeToggle();
}, 1000);
setTimeout(function() {
$('.success').fadeToggle();
}, 2500);
},
error: function() {
alert("Произошла какая то ошибка!");
}
});
});
Ошибка:
Uncaught TypeError: $(...).modal is not a function
at Object.success (script.js:74)
at c (jquery.min.js:4)
at Object.fireWith [as resolveWith] (jquery.min.js:4)
at k (jquery.min.js:6)
at XMLHttpRequest.r (jquery.min.js:6)
Вот кнопка:
Код:
<button data-dismiss="modal">ОСТАВИТЬ ЗАЯВКУ</button>
Последний раз редактировалось rus333333, 21.04.2019 в 23:19.
|
|
21.04.2019, 22:57
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от rus333333
|
|
Uncaught TypeError: $(...).modal is not a function
|
Оно значит не подключено jQuery Modal или вы оставили код определения заменённым случайно $.fn.modal = 1;!
Последний раз редактировалось Malleys, 21.04.2019 в 23:03.
|
|
|
|
