Question

I’m creating this online store with a javascript shopping cart. Some products have options, and an option changes the price of an item. The price of an item used to be in a span, but I thought that a disabled input field looks better. My problem is that my code doesn’t change the value of the input field, but it did change it when the price was written in span.

The jQuery:

$(".item_lenght").change(function() {
        $('.item_price').html($('option:selected', this).data('price'));
    });

And the html:

<table style="border:1px solid black; border-radius: 6px;">
    <tr>
        <td>
        <select class="item_lenght" name="size">
        <option value="Tyhjä">Valitse koko</option>
        <option data-price="47.00€" value="25cm"> 25cm x 150cm </option>
        <option data-price="48.00€" value="50cm"> 50cm x 150xm</option>
        <option data-price="49.00€" value="100cm"> 100cm x 150cm </option>
        </select>
        </td>
        <td>
        <select class="item_type" name="type">
        <option value="Ei valintaa">Valitse väri</option>
        <option data-name="Teipit (Harjattu Alumiini)" value="Harjattu Alumiini"> Harjattu Alumiini </option>
        <option data-name="Teipit (Musta hiilikuitu)" value="Musta hiilikuitu"> Musta hiilikuitu </option>
        <option data-name="Teipit (Valkoinen hiilikuitu)" value="Valkoinen hiilikuitu"> Valkoinen hiilikuitu </option>
        <option data-name="Teipit (Mattamusta)" value="Mattamusta"> Mattamusta </option>
        </select>
        </td>
    </tr>
    <tr>
        <td>Määrä:
        </td>
        <td>
        <input type="text" value="1" class="item_Quantity" style="width:30px;">
        </td>
    </tr>
    <tr>
        <td>Hinta
        </td>
        <td>
        <input type="text" readonly="readonly" class="item_price" value="0.00€">
        </td>
    </tr>
    </table>


        <a class="item_add" href="javascript:;"> Osta prkl </a>

What I’m possibly doing wrong?

Answer 1

use .val() to modify and get it’s contents

$('.item_price').val($('option:selected', this).data('price'));