Skip to content
Advertisement

Collect prices with jQuery

I need to be able to add and display the amount when the numbers are entered using jQuery, as shown in the image below. please guide me.

These are the html codes:

.tours_description_book {
  border: 1px solid #d2ac67;
  overflow: hidden;
  border-radius: 9px;
}
.tours_description_book .title {
  background: #0c1e3a;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  padding: 15px 0;
  margin-bottom: 15px;
}
.tours_description_book > ul {
  display: grid;
  grid: auto / auto;
  padding: 15px 35px;
}
.tours_description_book > ul > li > ul {
  display: grid;
  grid: auto / 50% 50%;
  padding-left: 20px;
}
.tours_description_book > ul > li {
  border-bottom: 1px solid #dcdddf;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 0;
  color: #0c1e3a;
}
.tours_description_book > ul > li > ul > li:last-of-type {
  text-align: center;
}
.tours_description_book > ul > li:first-of-type > ul > li:last-of-type {
  text-align: left;
}
.tours_description_book > ul > li:first-of-type {
  font-weight: 400;
}
.tours_description_book > ul > li:last-of-type {
  border: 0;
}
.tours_description .tours_description_book a {
  display: block;
  width: calc(100% - 60px);
  margin: 0 auto 50px;
  background: #0c1e3a;
  text-align: center;
  color: #fff;
  border-radius: 9px;
  font-weight: 600;
  line-height: 60px;
}
.tours_description .tours_description_book a:hover {
  background: #d2ac67;
}
input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.number-input {
  border: 1px solid #d2ac67;
  display: inline-flex;
  border-radius: 5px;
}
.number-input,
.number-input * {
  box-sizing: border-box;
}
.number-input button {
  outline:none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  margin: 0;
  position: relative;
}
.number-input button:before {
  display: inline-block;
  content: '-';
  color: #d2ac67;
  font-size: 18px;
}
.number-input button.plus:before {
  content: '+';
}
.number-input input[type=number] {
  max-width: 4rem;
  padding: .5rem;
  border: solid #d2ac67;
  border-width: 0 1px;
  font-size: 16px;
  height: 3rem;
  font-weight: 600;
  text-align: center;
}

                        <div class="tours_description_book wrapper">
                            <div class="title wrapper">- Booking -</div>
                            <ul>
                                <li>
                                    <ul>
                                        <li>Adults
                                            <div class="number-input cart-free">
                                                <button onclick="this.parentNode.querySelector('.Adults_N').stepDown()" ></button>
                                                <input class="quantity Adults_N" min="0" name="Adults" value="1" type="number">
                                                <button onclick="this.parentNode.querySelector('.Adults_N').stepUp()" class="plus"></button>
                                            </div>
                                        </li>
                                        <li>Children
                                            <div class="number-input cart-free">
                                                <button onclick="this.parentNode.querySelector('.Children_N').stepDown()" ></button>
                                                <input class="quantity Children_N" min="0" name="Children" value="0" type="number">
                                                <button onclick="this.parentNode.querySelector('.Children_N').stepUp()" class="plus"></button>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li>Adults</li>
                                        <li class="cart-free amount">0</li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li>Children</li>
                                        <li class="cart-free amount">0</li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li>TOTAl COST</li>
                                        <li class="total">0$</li>
                                    </ul>
                                </li>
                            </ul>
                            <a href="/booking-tour/" title="">‌BOOK NOW</a>
                        </div>

The details I think are clear in the picture. But this is how we enter the number of adults and children, and finally with jQuery we have to add the prices and show the final price.

These are html and css code. Unfortunately I do not have much control over jQuery to close the project.

Advertisement

Answer

I removed the inline onclick events from your buttons and added them back in as a programatic event listener. That way we can tie into these events to populate the prices. Rather than explain line by line, take a look and ask any questions you might have about how this works.

let adultPrice = 19.99, childPrice = 11.99;

window.addEventListener('DOMContentLoaded', () => {
  let buttons = document.querySelectorAll('.step-button');
  buttons.forEach(el => {
    el.addEventListener('click', e => {
      let inc = -1;
      if (e.target.classList.contains('plus')) inc = 1;
      let input = e.target.closest('div').querySelector('input');
      input.value = Math.max((+input.value + inc), 0);
      calcAmounts()
    })
  })
  calcAmounts()
})

function calcAmounts() {
  document.querySelector('.adult-subtotal').innerHTML = '$' + (+document.querySelector('.Adults_N').value * adultPrice).toFixed(2);
  document.querySelector('.child-subtotal').innerHTML = '$' + (+document.querySelector('.Children_N').value * childPrice).toFixed(2);

  document.querySelector('.total').innerHTML = '$' + (+document.querySelector('.adult-subtotal').innerHTML.replace(/[^d.-]/g, '') + +document.querySelector('.child-subtotal').innerHTML.replace(/[^d.-]/g, '')).toFixed(2);
}
.tours_description_book {
  border: 1px solid #d2ac67;
  overflow: hidden;
  border-radius: 9px;
}

.tours_description_book .title {
  background: #0c1e3a;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  padding: 15px 0;
  margin-bottom: 15px;
}

.tours_description_book>ul {
  display: grid;
  grid: auto / auto;
  padding: 15px 35px;
}

.tours_description_book>ul>li>ul {
  display: grid;
  grid: auto / 50% 50%;
  padding-left: 20px;
}

.tours_description_book>ul>li {
  border-bottom: 1px solid #dcdddf;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 0;
  color: #0c1e3a;
}

.tours_description_book>ul>li>ul>li:last-of-type {
  text-align: center;
}

.tours_description_book>ul>li:first-of-type>ul>li:last-of-type {
  text-align: left;
}

.tours_description_book>ul>li:first-of-type {
  font-weight: 400;
}

.tours_description_book>ul>li:last-of-type {
  border: 0;
}

.tours_description .tours_description_book a {
  display: block;
  width: calc(100% - 60px);
  margin: 0 auto 50px;
  background: #0c1e3a;
  text-align: center;
  color: #fff;
  border-radius: 9px;
  font-weight: 600;
  line-height: 60px;
}

.tours_description .tours_description_book a:hover {
  background: #d2ac67;
}

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  border: 1px solid #d2ac67;
  display: inline-flex;
  border-radius: 5px;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:before {
  display: inline-block;
  content: '-';
  color: #d2ac67;
  font-size: 18px;
}

.number-input button.plus:before {
  content: '+';
}

.number-input input[type=number] {
  max-width: 4rem;
  padding: .5rem;
  border: solid #d2ac67;
  border-width: 0 1px;
  font-size: 16px;
  height: 3rem;
  font-weight: 600;
  text-align: center;
}
<div class="tours_description_book wrapper">
  <div class="title wrapper">- Booking -</div>
  <ul>
    <li>
      <ul>
        <li>Adults
          <div class="number-input cart-free">
            <button class="step-button"></button>
            <input class="quantity Adults_N" min="0" name="Adults" value="1" type="number">
            <button class="step-button plus"></button>
          </div>
        </li>
        <li>Children
          <div class="number-input cart-free">
            <button class="step-button"></button>
            <input class="quantity Children_N" min="0" name="Children" value="0" type="number">
            <button class="step-button plus"></button>
          </div>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>Adults</li>
        <li class="cart-free adult-subtotal amount">0</li>
      </ul>
    </li>
    <li>
      <ul>
        <li>Children</li>
        <li class="cart-free child-subtotal amount">0</li>
      </ul>
    </li>
    <li>
      <ul>
        <li>TOTAl COST</li>
        <li class="total">0$</li>
      </ul>
    </li>
  </ul>
  <a href="https://iranro.co.uk/booking-tour/" title="">‌BOOK NOW</a>
</div>
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement