Блог

Главная - Вопросы по программированию - Отображение цены на основе выбора пользователя

Отображение цены на основе выбора пользователя

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Кажется, я не могу получить цену для отображения на странице с изображением. Правильное изображение отображается и правильная цена передается в PayPal, но я не могу получить цену на основе выбора для отображения с изображением.

    
$(function() {
    $('.payment_form').change(function() {
        var filename = $('#dlist').val()   '-'   $('#os1').val()   '.png';
        console.log(filename);
        $('#imgToChange').prop('src', filename);
    });
});
</script>

<script language=javascript>

 function getOption(select, dataAttr) {
  const option = select.options[select.selectedIndex];
  if (option) {
    return option.getAttribute(dataAttr);
  }
  return '';
}

function CalculateOrder() {
  const form = document.getElementById('payment_form');
  const os0 = document.getElementById('os0');
  const os1 = document.getElementById('os1');
  const os2 = document.getElementById('os2');
  const os3 = document.getElementById('os3');

  let price = parseFloat(getOption(os1, 'data-base-price'));

  if (os0.value == "2XL") {
    price = price   1;
  } else if (os0.value == "3XL") {
    price = price   2;
  } else if (os0.value == "4XL") {
    price = price   3;
  } else if (os0.value == "5XL") {
    price = price   4;
  }

  form.amount.value = price;
}

CalculateOrder()

function showTest(e) {
  e.preventDefault();
  const form = document.getElementById('payment_form');
  console.log('price: '   form.amount.value)
}
     
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>


<form target="_self" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" id="payment_form" onchange="CalculateOrder()">
  <div align="center">
    <h2>Make selection below:<br />
      <br />
    </h2>
    <p>
      <input type="hidden" name="on0" value="Design"> 
      Design:amp;nbsp;amp;nbsp;
      <select name="os0" id="dlist" class="payment_form">
        <option value="Designer1">Designer1</option>
        <option value="Designer2">Designer2</option>
        <option value="Designer3">Designer3</option>
      </select>
      <br><br>
      <input type="hidden" name="on1" value="Style"> Style:amp;nbsp;amp;nbsp;
      <select name="os1" id="os1" class="payment_form">
        <option value="Tshirt" data-base-price="10">T-shirt</option>
        <option value="LSleeve" data-base-price="15">L Sleeve</option>
        <option value="Sweater" data-base-price="20">Sweater</option>
      </select>
      <br><br>
      <input type="hidden" name="on2" value="Size"> Size:amp;nbsp;amp;nbsp;
      <SELECT name="os2" id="os0">
        <OPTION value="S" data-item-number="Small">S</OPTION>
        <OPTION value="M" data-item-number="W-T-Medium">M</OPTION>
        <OPTION value="LG" data-item-number="W-T-LG">LG</OPTION>
        <OPTION value="XL" data-item-number="W-T-XL">XL</OPTION>
        <OPTION value="2XL" data-item-number="W-T-2XL">2XL</OPTION>
        <OPTION value="3XL" data-item-number="W-T-3XL">3XL</OPTION>
        <OPTION value="4XL" data-item-number="W-T-4XL">4XL</OPTION>
        <OPTION value="5XL" data-item-number="W-T-5XL">5XL</OPTION>
      </SELECT>
      <br><br>
      <input type="hidden" name="on3" value="Color"> Color:amp;nbsp;amp;nbsp;
      <select name="os3">
        <option value="Gray">Gray</option>
        <option value="White">White</option>
      </select>
      
      <input type="hidden" name="add" value="1">
      <input type="hidden" name="cmd" value="_cart">
      <input type="hidden" name="business" value="abc.com">
      <input type="hidden" name="item_name" value="Shirts">
      <input type="hidden" name="amount">
      <input type="hidden" name="item_number">
      <input type="hidden" name="no_shipping" value="2">
      <input type="hidden" name="shipping">
      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
      <input type="hidden" name="shopping_url" value="http://example.com/store.html">
      <input type="hidden" name="return" value="http://www.example.com/">
      <input type="hidden" name="currency_code" value="USD">
      <input type="hidden" name="lc" value="US">
      <input type="hidden" name="bn" value="PP-ShopCartBF">
      
      </p>
  </p>
    <p>      <INPUT onclick=CalculateOrder(this.form) type=image alt="Make payments with PayPal - it's fast, free and secure!" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border=0 name="submit">
  </p>
  </div>
</FORM>

Кажется, я не могу получить цену для отображения на странице с изображением. Правильное изображение отображается и правильная цена передается в PayPal, но я не могу получить цену на основе выбора для отображения с изображением.

Комментарии:

1. Не помещайте тег script в раздел javascript фрагмента. Также добавьте тег jQuery в начале html, чтобы мы могли протестировать ваш код.

2. Вы не можете сделать, os0.value чтобы получить значение select тега. Вы могли бы сделать $('#os0').prop('value') .

3. Вы, ребята, делаете этот материал таким простым… На самом деле я хотел, чтобы она начиналась с базовой цены за каждый из 10 долларов. В вашей демонстрации я вижу, что она начинается с 0 долларов, но на моей странице она не отображается, пока я не сделаю выбор. Это потому, что я пропустил шаг… Хотите, чтобы у него было 10 долларов сразу после загрузки страницы, даже до того, как будет сделан выбор.

4. @BBlyden вам нужно скопировать exact HTML и jQuery, которые я предоставил в своем ответе — пожалуйста.

5. Я буду продолжать работать над этим …. скопировал именно то, что у вас есть, и все равно не будет отображаться цена, пока я не сделаю выбор..

Ответ №1:

Цена хранится в $(«input[name=’amount’]» ).val()

Вы помещаете функцию CalculateOrder() в jQuery .change(). Итак, когда выбор изменяется, он вычисляет новую цену.

И вы применяете класс «payment_form» ко всем <выберите>, которые вы хотите, чтобы запустить расчет.

Король с уважением.

_Teddy_

 $(function() {
    $('.payment_form').change(function() {
// ***************************
CalculateOrder()
// ***************************
        var filename = $('#dlist').val()   '-'   $('#os1').val()   '.png';
        console.log(filename);
        $('#imgToChange').prop('src', filename);
// ***************************
$('#priceP').html('Price : $ ' $("input[name='amount']" ).val());
// ***************************

    });
});
</script>

<script language=javascript>


function swapImage(){
   var image = document.getElementById("imageToSwap");
   var dropd = document.getElementById("dlist");
   image.src = dropd.value;   
};

 function getOption(select, dataAttr) {
  const option = select.options[select.selectedIndex];
  if (option) {
    return option.getAttribute(dataAttr);
  }
  return '';
}

function CalculateOrder() {
  const form = document.getElementById('payment_form');
  const os0 = document.getElementById('os0');
  const os1 = document.getElementById('os1');
  const os2 = document.getElementById('os2');
  const os3 = document.getElementById('os3');

  let price = parseFloat(getOption(os1, 'data-base-price'));

  if (os0.value == "2XL") {
    price = price   1;
  } else if (os0.value == "3XL") {
    price = price   2;
  } else if (os0.value == "4XL") {
    price = price   3;
  } else if (os0.value == "5XL") {
    price = price   4;
  }

  form.amount.value = price;
}

CalculateOrder()

function showTest(e) {
  e.preventDefault();
  const form = document.getElementById('payment_form');
  console.log('price: '   form.amount.value)
}  
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>


<form target="_self" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" id="payment_form" onchange="CalculateOrder()">
  <div align="center">
    <h2>Make selection below:<br />
      <br />
    </h2>
    <p>
      <input type="hidden" name="on0" value="Design"> 
      Design:amp;nbsp;amp;nbsp;
      <select name="os0" id="dlist" class="payment_form">
        <option value="Designer1">Designer1</option>
        <option value="Designer2">Designer2</option>
        <option value="Designer3">Designer3</option>
      </select>
      <br><br>
      <input type="hidden" name="on1" value="Style"> Style:amp;nbsp;amp;nbsp;
      <select name="os1" id="os1" class="payment_form">
        <option value="Tshirt" data-base-price="10">T-shirt</option>
        <option value="LSleeve" data-base-price="15">L Sleeve</option>
        <option value="Sweater" data-base-price="20">Sweater</option>
      </select>
      <br><br>
      <input type="hidden" name="on2" value="Size"> Size:amp;nbsp;amp;nbsp;
<!-- *************************** -->
<SELECT name="os2" id="os0" class="payment_form">
<!-- *************************** -->
<OPTION value="S" data-item-number="Small">S</OPTION>
        <OPTION value="M" data-item-number="W-T-Medium">M</OPTION>
        <OPTION value="LG" data-item-number="W-T-LG">LG</OPTION>
        <OPTION value="XL" data-item-number="W-T-XL">XL</OPTION>
        <OPTION value="2XL" data-item-number="W-T-2XL">2XL</OPTION>
        <OPTION value="3XL" data-item-number="W-T-3XL">3XL</OPTION>
        <OPTION value="4XL" data-item-number="W-T-4XL">4XL</OPTION>
        <OPTION value="5XL" data-item-number="W-T-5XL">5XL</OPTION>
      </SELECT>
      <br><br>
      <input type="hidden" name="on3" value="Color"> Color:amp;nbsp;amp;nbsp;
<!-- *************************** -->
      <select name="os3" class="payment_form">
<!-- *************************** -->
        <option value="Gray">Gray</option>
        <option value="White">White</option>
      </select>
      
      <input type="hidden" name="add" value="1">
      <input type="hidden" name="cmd" value="_cart">
      <input type="hidden" name="business" value="abc.com">
      <input type="hidden" name="item_name" value="Shirts">
      <input type="hidden" name="amount">
      <input type="hidden" name="item_number">
      <input type="hidden" name="no_shipping" value="2">
      <input type="hidden" name="shipping">
      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
      <input type="hidden" name="shopping_url" value="http://example.com/store.html">
      <input type="hidden" name="return" value="http://www.example.com/">
      <input type="hidden" name="currency_code" value="USD">
      <input type="hidden" name="lc" value="US">
      <input type="hidden" name="bn" value="PP-ShopCartBF">
      
      </p>
  </p>
<!-- *************************** -->
<p id="priceP">$amp;nbsp;10</p>
<!-- *************************** -->
    <p>      <INPUT onclick=CalculateOrder(this.form) type=image alt="Make payments with PayPal - it's fast, free and secure!" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border=0 name="submit">
  </p>
  </div>
</FORM>

Комментарии:

1. Спасибо вам, сэр… Кажется, что цена появляется только тогда, когда я вношу изменения в стиль. Цена также должна меняться в зависимости от размера. Кроме того, как мне сделать так, чтобы базовая цена отображалась до выбора пользователя?

2. Я завершаю свой ответ.

3. @EddyMERCIER Нам не нужно звонить CalculateOrder() раз пять. Вы можете просто ввести цену в CalculateOrder() функцию и все. — Смотрите мой ответ

4. @AlwaysHelping Но я думаю, что BBlyden хочет, чтобы новая цена появлялась, когда пользователь изменяет выбор. Поэтому вам нужно пересчитать ее для каждого .change(). Смотрите мою «редактировать» для цены по умолчанию в 10 долларов.

Ответ №2:

Изначально price установлено значение zero и будет visible на странице prior для любого выбора пользователя.

Как только вы измените style ИЛИ size price , также будет обновляться. Нам нужно обновить price в CalculateOrder() функции, чтобы показать обновленную цену.

Живая демонстрация:

 $(function() {
  $('.price').html('Price: '   10) //set the to $10 first
  $('.payment_form').change(function() {
    var filename = $('#dlist').val()   '-'   $('#os1').val()   '.png';
    //console.log(filename);
    $('#imgToChange').prop('src', filename);
  });
});

function getOption(select, dataAttr) {
  const option = select.options[select.selectedIndex];
  if (option) {
    return option.getAttribute(dataAttr);
  }
  return '';
}

function CalculateOrder() {
  const form = document.getElementById('payment_form');
  const os0 = document.getElementById('os0');
  const os1 = document.getElementById('os1');
  const os2 = document.getElementById('os2');
  const os3 = document.getElementById('os3');
  let price = parseFloat(getOption(os1, 'data-base-price'));
  if (os0.value == "2XL") {
    price = price   1;
  } else if (os0.value == "3XL") {
    price = price   2;
  } else if (os0.value == "4XL") {
    price = price   3;
  } else if (os0.value == "5XL") {
    price = price   4;
  }

  //Show price
  $('.price').html('Price: '   price) //change price
  form.amount.value = price;
}

CalculateOrder()  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form target="_self" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" id="payment_form" onchange="CalculateOrder()">
  <div align="center">
    <h2>Make selection below:<br />
      <br />
    </h2>
    <p>
      <input type="hidden" name="on0" value="Design">
      Design:amp;nbsp;amp;nbsp;
      <select name="os0" id="dlist" class="payment_form">
        <option value="Designer1">Designer1</option>
        <option value="Designer2">Designer2</option>
        <option value="Designer3">Designer3</option>
      </select>
      <br><br>
      <input type="hidden" name="on1" value="Style"> Style:amp;nbsp;amp;nbsp;
      <select name="os1" id="os1" class="payment_form">
        <option value="Tshirt" data-base-price="10">T-shirt</option>
        <option value="LSleeve" data-base-price="15">L Sleeve</option>
        <option value="Sweater" data-base-price="20">Sweater</option>
      </select>
      <br><br>
      <input type="hidden" name="on2" value="Size"> Size:amp;nbsp;amp;nbsp;
      <SELECT name="os2" id="os0">
        <OPTION value="S" data-item-number="Small">S</OPTION>
        <OPTION value="M" data-item-number="W-T-Medium">M</OPTION>
        <OPTION value="LG" data-item-number="W-T-LG">LG</OPTION>
        <OPTION value="XL" data-item-number="W-T-XL">XL</OPTION>
        <OPTION value="2XL" data-item-number="W-T-2XL">2XL</OPTION>
        <OPTION value="3XL" data-item-number="W-T-3XL">3XL</OPTION>
        <OPTION value="4XL" data-item-number="W-T-4XL">4XL</OPTION>
        <OPTION value="5XL" data-item-number="W-T-5XL">5XL</OPTION>
      </SELECT>
      <br><br>
      <input type="hidden" name="on3" value="Color"> Color:amp;nbsp;amp;nbsp;
      <select name="os3">
        <option value="Gray">Gray</option>
        <option value="White">White</option>
      </select>

      <input type="hidden" name="add" value="1">
      <input type="hidden" name="cmd" value="_cart">
      <input type="hidden" name="business" value="abc.com">
      <input type="hidden" name="item_name" value="Shirts">
      <input type="hidden" id="final_amount" name="amount">
      <input type="hidden" name="item_number">
      <input type="hidden" name="no_shipping" value="2">
      <input type="hidden" name="shipping">
      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
      <input type="hidden" name="shopping_url" value="http://example.com/store.html">
      <input type="hidden" name="return" value="http://www.example.com/">
      <input type="hidden" name="currency_code" value="USD">
      <input type="hidden" name="lc" value="US">
      <input type="hidden" name="bn" value="PP-ShopCartBF">

    </p>
    </p>
    <span class="price"></span>
    <p> <INPUT onclick=CalculateOrder(this.form) type=image alt="Make payments with PayPal - it's fast, free and secure!" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border=0 name="submit">
    </p>
  </div>
</form>