Javascript update price select onchange

Я работаю над простой системой бронирования автомобилей в течение первого года проекта, который среди прочего представляет введение в javascript.Javascript update price select onchange

На первой странице значения, введенные пользователем, передаются на страницу 2 с помощью php, и мой javascript ниже работает правильно, чтобы рассчитать стоимость аренды.

Моя проблема

Однако, на странице 2 пользователь может изменить свой заказ, то есть обновление тип автомобиля. Это может привести к увеличению или уменьшению цены в зависимости от выбранного пользователем carGroup.

Моя проблема, когда им добавления onchange к select элемент для carGroup цена не меняется, и им не получить никаких ошибок, не делает ситуацию легче отлаживать.

Код, приведенный ниже, является довольно простым, я был бы очень признателен, если бы кто-то мог дать ему сканирование и, возможно, посоветуйте, где я ошибаюсь.

Javascript

function calcPrice() { 
    var oneDay = 24 * 60 * 60 * 1000; 
    var firstDate = document.getElementById("firstDate").value; 
    var secondDate = document.getElementById("secondDate").value; 
    var date1 = firstDate.substring(0, 11); 
    var date2 = secondDate.substring(0, 11); 
    date1 = date1.replace(/\//g, ","); 
    date2 = date2.replace(/\//g, ","); 

    var firstDate = new Date(date1); 
    var secondDate = new Date(date2); 

    var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay))); 
    //calculate rental price 
    var price; 
    var dayRate; 
    var carGroup = document.getElementById("group").value; 

    //change values to increase or decrease price 
    var a = 250; 
    var b = 500; 
    var c = 750; 
    var d = 1000; 
    if (carGroup == 'a') { 
    price = diffDays * a; 
    dayRate = a; 
    } else if (carGroup == 'b') { 
    price = diffDays * b; 
    dayRate = b; 
    } else if (carGroup == 'c') { 
    price = diffDays * c; 
    dayRate = c; 
    } else if (carGroup == 'd') { 
    price = diffDays * d; 
    dayRate = d; 
    } 

    document.getElementById("rentalInfo").innerHTML = diffDays + ' Day Rental, At: ' + dayRate + ' Per Day. <span style="color:red; font-weight:bold"> Total Price: ' + price + '</span>'; 
}

Html

  <select onChange="calcPrice()"name="carType" id="group"> 
      <option selected value="<?php echo $carType ?>"><?php echo $carType?></option> 
      <option value="a">Group A (Hyundai I10)</option> 
      <option value="b">Group B (VW POLO)</option> 
      <option value="c">Group C (Corolla)</option> 
      <option value="d">Group D (Bakkie)</option> 
     </select> 
    </div><!--formGroup-->

JSFIDDLE

I created a JSFIDDLE here, единственная проблема с моим JSFIDDLE является то, что calcPrice() функция должна работать на <body onload="calcPrice()">, который я подозреваю, это не происходит в JSFIDDLE

источник

2016-08-18 Marilee

Эй Мэрили, который был мне скрипку с вами! лол! Поэтому для этого может потребоваться некоторая настройка, но один из способов сделать это - использовать прослушиватели событий. Помещая это в onload, он будет запускать функцию, когда пользователь попадает на страницу - рендеринг дней и значений по умолчанию и цены.

keyup прослушиватель событий не может быть именно тем, что вы хотите, поскольку цена будет обновляться LIVE, когда пользователь настраивает свои даты, и вы можете не хотеть этого (просто пойдите в Google или проверьте документы, чтобы узнать, есть ли событие больше подходит для ваших нужд - другой вариант заключается в том, чтобы добавить кнопку, которая запускает функцию для обновления, когда пользователь закончит настройку), и eventlistener change вызовет эту функцию в любое время, когда выпадающий выбор будет изменен.

window.onload = function() { 
     document.querySelector("#firstDate").addEventListener("keyup", calcPrice); 
     document.querySelector("#secondDate").addEventListener("keyup", calcPrice); 
     document.querySelector("#group").addEventListener("change", calcPrice); 

     function calcPrice() { 
      var oneDay = 24 * 60 * 60 * 1000; 
      var firstDate = document.getElementById("firstDate").value; 
      var secondDate = document.getElementById("secondDate").value; 
      var date1 = firstDate.substring(0, 11); 
      var date2 = secondDate.substring(0, 11); 
      date1 = date1.replace(/\//g, ","); 
      date2 = date2.replace(/\//g, ","); 

      firstDate = new Date(date1); 
      secondDate = new Date(date2); 

      var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay))); 
      //calculate rental price 
      var price; 
      var dayRate; 
      var carGroup = document.getElementById("group").value; 

      //change const values to increase or decrease price 
      var a = 250; 
      var b = 500; 
      var c = 750; 
      var d = 1000; 
      if (carGroup == 'a') { 
      price = diffDays * a; 
      dayRate = a; 
      } else if (carGroup == 'b') { 
      price = diffDays * b; 
      dayRate = b; 
      } else if (carGroup == 'c') { 
      price = diffDays * c; 
      dayRate = c; 
      } else if (carGroup == 'd') { 
      price = diffDays * d; 
      dayRate = d; 
      } 

      document.getElementById("rentalInfo").innerHTML = diffDays + ' Day Rental, At: ' + dayRate + ' Per Day. <span style="color:red; font-weight:bold"> Total Price: ' + price + '</span>'; 
     } 



     calcPrice() 
     }

Кроме того, в вашем коде вы в firstDate повторном объявлении и secondDate переменных при сбросе их. Не нужно перерисовывать их.

Другой способ сделать это - оставить свой код таким, какой он есть, и только поставить прослушиватели событий и вызов функции на загрузку страницы.

window.onload = function() { 
     document.querySelector("#firstDate").addEventListener("keyup", calcPrice); 
     document.querySelector("#secondDate").addEventListener("keyup", calcPrice); 
     document.querySelector("#group").addEventListener("change", calcPrice); 

calcPrice() 
     }

источник

2016-08-18 03:48:43 HolyMoly

HolyMoly Большое спасибо – Marilee

мое удовольствие! счастливое кодирование! – HolyMoly

window.onload = function() 
 
{ 
 
    document.querySelector("#firstDate").addEventListener("keyup", calcPrice); 
 
    document.querySelector("#secondDate").addEventListener("keyup", calcPrice); 
 
    document.querySelector("#group").addEventListener("change", calcPrice); 
 

 
    function calcPrice() { 
 
    var oneDay = 24 * 60 * 60 * 1000; 
 
    var firstDate = document.getElementById("firstDate").value; 
 
    var secondDate = document.getElementById("secondDate").value; 
 
    var date1 = firstDate.substring(0, 11); 
 
    var date2 = secondDate.substring(0, 11); 
 
    date1 = date1.replace(/\//g, ","); 
 
    date2 = date2.replace(/\//g, ","); 
 

 
    var firstDate = new Date(date1); 
 
    var secondDate = new Date(date2); 
 

 
    var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay))); 
 
    //calculate rental price 
 
    var price; 
 
    var dayRate; 
 
    var carGroup = document.getElementById("group").value; 
 

 
    //change const values to increase or decrease price 
 
    var a = 250; 
 
    var b = 500; 
 
    var c = 750; 
 
    var d = 1000; 
 
    if (carGroup == 'a') { 
 
     price = diffDays * a; 
 
     dayRate = a; 
 
    } else if (carGroup == 'b') { 
 
     price = diffDays * b; 
 
     dayRate = b; 
 
    } else if (carGroup == 'c') { 
 
     price = diffDays * c; 
 
     dayRate = c; 
 
    } else if (carGroup == 'd') { 
 
     price = diffDays * d; 
 
     dayRate = d; 
 
    } 
 

 
    var innerHtml; 
 

 
    if (isNaN(diffDays)) { 
 
     innerHtml = "Invalid Date"; 
 
    } else { 
 
     innerHtml = diffDays + ' Day Rental, At: ' + dayRate + ' Per Day. <span style="color:red; font-weight:bold"> Total Price: ' + price + '</span>'; 
 
    } 
 

 
    document.getElementById("rentalInfo").innerHTML = innerHtml; 
 
    } 
 

 
    calcPrice(); 
 
};

<input type="text" value="08/20/2016" id="firstDate" /> 
 
<input type="text" value="08/22/2016" id="secondDate" /> 
 
<select class="" name="carType" id="group"> 
 
    <option value="a" selected>Group A (Hyundai I10)</option> 
 
    <option value="b">Group B (VW POLO)</option> 
 
    <option value="c">Group C (Corolla)</option> 
 
    <option value="d">Group D (Truck)</option> 
 
</select> 
 

 
<p id="rentalInfo"></p>

источник

2016-08-18 04:03:44 fuzz

Как это отличается от решения, которое я разместил за 15 минут раньше? лол – HolyMoly

Javascript update price select onchange

ответ

Смежные вопросы