Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Проблема с калькулятором (https://javascript.ru/forum/project/77342-problema-s-kalkulyatorom.html)

rus333333 21.04.2019 16:49
Проблема с калькулятором
 
Доброго дня, в 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)
});

Все работает, только селект значение не меняет при выборе любой опции.
Подскажите что нужно еще прописать в скрипте. Заранее спасибо.

laimas 21.04.2019 17:08
$(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>

rus333333 21.04.2019 17:23
да теперь меняются значения при выборе опций, но не отображается в поле price, а только во всплывающем окне alert

laimas 21.04.2019 17:28
Цитата:
Сообщение от rus333333
а только во всплывающем окне alert
Ну так это пример. Сделайте так: это
$('#vid,#price')
заменить на
$('#vid,#square')
а это
alert(this.value * elm.not(this).val())
заменить на
$('#price').val(this.value * elm.not(this).val())

rus333333 21.04.2019 17:39
Спасибо Вам большое, все меняет и считает, но какая то появилась, когда в поле square вводишь цифры, то в поле price на доли секунды появляется правильный ответ, а потом появляется NaN
а когда потом опции из селекта выбираешь, то нормальное число в поле price

rus333333 21.04.2019 17:44
Полностью скрипт выглядит так:
$(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)
});

laimas 21.04.2019 17:48
Этого

$('#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())
    });
});

rus333333 21.04.2019 21:39
Цитата:
Сообщение от laimas (Сообщение 506806) 

$(function() {
    var elm = $('#vid,#square').on('change input keyup', function() {
        $('#price').val(this.value * elm.not(this).val())
    });
});
Еще раз спасибо большое, Вы меня выручили, все работает

rus333333 21.04.2019 22:48
Теперь проблема с модальным окном, оно перестало закрываться при нажатии кнопки"отправить заявку"
Вот скрипт:
$('.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>

Malleys 21.04.2019 22:57
Цитата:
Сообщение от rus333333
Uncaught TypeError: $(...).modal is not a function
Оно значит не подключено jQuery Modal или вы оставили код определения заменённым случайно $.fn.modal = 1;!


Часовой пояс GMT +3, время: 00:27.