изменение цены в зависимости от размера и размера изображения

Question

Я пытался сделать это в течение нескольких дней, но я не могу заставить его работать. Я хочу изменить цену в зависимости от размера обуви, которую выбрал пользователь. Но мне НУЖНО ЗНАТЬ, ЧТО РАЗМЕР ВЫБРАТЬ на checkout.php. Мой checkout.php уже работает, но мне нужно получить размер, а также приз за этот размер. В вариантах выбора я указываю цены и какой размер цена для. Пожалуйста, помогите.

<div class="content_half float_r"> 
    <form id="add2cart" name="cart" method="Post" action="<?php fetchdir($bpages); ?>cart.php"> 
      <table> 
        <tr> 
         <td width="160">Price:</td> 
         <td name="price" id="price"><?php echo $row ['Start_Cost']; ?></td> 

        </tr> 

       <tr> 
       <td for="size" width="160">size*:</td> 
       <td> 
       <select name="size" class="small" id ="size"> 
           <option value="">12 size</option> // the price tag already have the start_Cost for this size 
         <option value="">14 size(£30.00)</option> 
        <option value="">16 size(£35.00)</option> 
         <option value="">18 size(£40.00)</option> 
        <option value="">20 size(£45.00)</option> 
         <option value="">22 size(£55.00)</option> 
          <option value="">24 size(£60.00)</option> 
        <option value="">26 size(70.00)</option> 
          <option value="">28 size(£80.00)</option> 
        </select> 
       </td> 

       </tr> 
     <tr> 
      // you choose size 
      <td> size: // the size the person choose will go down here 
      </td> 

    </tr> 

      <tr> 
         <td>Quantity</td> 
         <td><input type="text" name="Qty" value="1" style="width: 20px; text-align: right" /></td> 

        </tr>  
       </table>  
       <div class="cleaner h20"></div> 

       <input type="hidden" name="pid" id="id" value="<?php echo $id; ?>" /> 
       <input type="Submit" class="button" name="button" id="button" value="Add to shopping cart"/> 
       </form>    
      </div> 

Answer 1

Вот рабочий пример для вас LIVE DEMO.

Обратите внимание, что я добавил <span> s, чтобы иметь возможность вставлять тексты в нужное положение. Я также добавил некоторые id s, чтобы помочь с выбором правильных элементов DOM.

Вот JavaScript на основе jQuery.

// initially provide data 
var shoeData = { 
    12: 25, 
    14: 30, 
    16: 35 
} 

$(function() {  
    $(document).ready(function() { 
     // dynamically create the options in the select 
     $.each(shoeData, function (key, value) { 
      $("#size").append($("<option>", { 
       "value": key, 
        "text": key + " size(£" + value + ")" 
      })); 
     }); 
     // display the initial data 
     updateHandler(); 
    });  

    // register for update events on the input fields 
    $("#size").on('change', updateHandler); 
    $("#qty").on('input', updateHandler); 
}); 

// handle update events (when an input field was changed) 
function updateHandler() { 
    // accumulate the data 
    var value = $("#size").val(); 
    var quantity = $("#qty").val(); 
    var price = shoeData[value]; 
    var endPrice = price * quantity; 

    // display the data 
    $('#priceDisplay').html(price); 
    $("#sizeDisplay").html(value); 
    $("#totalDisplay").html(endPrice); 
} 

Все, что вам нужно сделать, это заполнить объект shoeData с данными, используя php так:

var shoeData = { 
    12: <?php echo $row [ 'Start_Cost']; ?>, 
    14: <?php echo "30"; ?>, 
    16: <?php echo $priceForSize16; ?>, 
} 

Когда клиент изменяет размер обуви или количество общей, цены и информация обуви обновляется просто записывая строку в атрибут «html» соответствующего span.

Ваш cart.php получит форму, как ожидалось, - значит, вы получите «Qty» и «size». Вам нужно будет найти цену в PHP на основе значения от $REQUEST["size"], а затем умножьте его на значение $REQUEST["Qty"], чтобы получить общее количество.

Answer 2

Прежде всего, вы, вероятно, просто хотите отправить размер обуви, поставив его в атрибут значения параметра. Текст внутри опции - это только метка.

<option value="12">12 size</option> 

Второй и самый важный: вы никогда не хотите, чтобы клиент рассказал вам, какая цена !!! НИКОГДА! Если хакер приходит, он может легко отправить форму с размером, установленным в 12, а цена установлена ​​равной 0. Вы не хотите отправлять их бесплатно? Хак, возможно, даже придется возместить ему, если он отправит отрицательное значение. Поэтому, пожалуйста, измените свой PHP-скрипт для вычисления/поиска цены из внутреннего массива или чего-то еще. Или убедитесь, что вы хотя бы тщательно проверяете ввод.

---

Чтобы обновить цену, которую вы можете использовать в jQuery.ajax вызов на PHP скрипт, который просто принимает размер обуви и возвращает цену. Посмотрите на это jsFiddle, что я имею в виду. Вам придется заменить URL-адрес ajax новым скриптом php. Прочитайте документацию ajax, чтобы выяснить, как правильно передавать данные ввода и вывода. Перед записью данных вы также можете умножить цену с количеством.