Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.04.2019, 16:49
Новичок на форуме
Отправить личное сообщение для rus333333 Посмотреть профиль Найти все сообщения от rus333333
 
Регистрация: 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)
});

Все работает, только селект значение не меняет при выборе любой опции.
Подскажите что нужно еще прописать в скрипте. Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 21.04.2019, 17:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,520

$(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>
Ответить с цитированием
  #3 (permalink)  
Старый 21.04.2019, 17:23
Новичок на форуме
Отправить личное сообщение для rus333333 Посмотреть профиль Найти все сообщения от rus333333
 
Регистрация: 21.04.2019
Сообщений: 7

да теперь меняются значения при выборе опций, но не отображается в поле price, а только во всплывающем окне alert
Ответить с цитированием
  #4 (permalink)  
Старый 21.04.2019, 17:28
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,520

Сообщение от rus333333
а только во всплывающем окне alert
Ну так это пример. Сделайте так: это
$('#vid,#price')
заменить на
$('#vid,#square')
а это
alert(this.value * elm.not(this).val())
заменить на
$('#price').val(this.value * elm.not(this).val())
Ответить с цитированием
  #5 (permalink)  
Старый 21.04.2019, 17:39
Новичок на форуме
Отправить личное сообщение для rus333333 Посмотреть профиль Найти все сообщения от rus333333
 
Регистрация: 21.04.2019
Сообщений: 7

Спасибо Вам большое, все меняет и считает, но какая то появилась, когда в поле square вводишь цифры, то в поле price на доли секунды появляется правильный ответ, а потом появляется NaN
а когда потом опции из селекта выбираешь, то нормальное число в поле price
Ответить с цитированием
  #6 (permalink)  
Старый 21.04.2019, 17:44
Новичок на форуме
Отправить личное сообщение для rus333333 Посмотреть профиль Найти все сообщения от rus333333
 
Регистрация: 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)
});
Ответить с цитированием
  #7 (permalink)  
Старый 21.04.2019, 17:48
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,520

Этого

$('#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())
    });
});
Ответить с цитированием
  #8 (permalink)  
Старый 21.04.2019, 21:39
Новичок на форуме
Отправить личное сообщение для rus333333 Посмотреть профиль Найти все сообщения от rus333333
 
Регистрация: 21.04.2019
Сообщений: 7

Сообщение от laimas Посмотреть сообщение

$(function() {
    var elm = $('#vid,#square').on('change input keyup', function() {
        $('#price').val(this.value * elm.not(this).val())
    });
});
Еще раз спасибо большое, Вы меня выручили, все работает
Ответить с цитированием
  #9 (permalink)  
Старый 21.04.2019, 22:48
Новичок на форуме
Отправить личное сообщение для rus333333 Посмотреть профиль Найти все сообщения от rus333333
 
Регистрация: 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.
Ответить с цитированием
  #10 (permalink)  
Старый 21.04.2019, 22:57
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,030

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

Последний раз редактировалось Malleys, 21.04.2019 в 23:03.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена background при нажатии JIeuTo Общие вопросы Javascript 5 14.09.2018 18:48
Проблема с простейшим калькулятором Ailis Общие вопросы Javascript 2 12.10.2017 18:32
Проблема с калькулятором Feex Общие вопросы Javascript 9 28.08.2016 23:02
Проблема с калькулятором PowerRudy Общие вопросы Javascript 2 05.04.2015 19:44
Проблема с калькулятором webmaker Общие вопросы Javascript 4 14.01.2014 22:08