CODEWITHSUNDEEP
jquerysumhtml-selectdynamically-generated
Jonas
Jonas

Reputation: 11

jQuery - Generate prices from selection, dynamically sum column, post total amount form

what I would like to create is a table with:

  1. selection of country [when selected it generates the description in shipment-field and the respective price in the price-field]
  2. fixed product name and fixed price [easy :-)]
  3. selection of accessory [it generates the respective price in price-field]
  4. total amount generated summing the 3 prices
  5. submit total amount with form method="post"

Image example
This is the idea of code that needs jQuery implementation:

<form action="product.php" method="post">
<h2>Select Country shipment</h2>
<select>
<option>USA $1.00</option>
<option>CANADA $2.00</option>
<option>EUROPE $3.00</option>
</select>
<br />
<br />
<table border="1" cellpadding="5">
<tr>
<td width="200"></td>
<td width="60"><strong>Price</strong></td>
</tr>
<tr>
<td>Product</td>
<td>10.00</td>
</tr>
<tr>
<td><span id="shipment_text"></span></td>
<td><span id="shipment_price"></span></td>
</tr>
<tr>
<td>
<select>
    <option value=""></option>
    <option value="Accessory1">Accessory 1 - $1.00</option>
    <option value="Accessory2">Accessory 2 - $2.00</option>
    <option value="Accessory3">Accessory 3 - $3.00</option>
</select></td>
<td><span id="accessory_price"></span></td>
</tr>
<tr>
<td align="right"><strong>Total</strong></td>
<td><span id="total"></span></td>
</tr>
</table>
<br />
<input type="hidden" id="total" name="amount" value="" />
<input type="submit" value="Submit">
</form>

Thanks for the help!

Upvotes: 1

Views: 1226

Answers (2)

Tats_innit
Tats_innit

Reputation: 34117

Working Demo http://jsfiddle.net/aRDXD/1/ or http://jsfiddle.net/tyAmg/

Lemme know if this dont help will remove my post.

Also note :) your amount is in $ but total is in euro :P

code

$('select').on('change', function(){
    var sum = 0;
    $('.sum').each(function(){

       sum += parseInt($(this).attr("value").replace('$',''));
    });

    $('#total').html(sum);
});

HTML

<form action="product.php" method="post">
<h2>Select Country shipment</h2>
<select class="sum">
<option value="$1.00">USA $1.00</option>
<option value="$2.00">CANADA $2.00</option>
<option value="$3.00">EUROPE $3.00</option>
</select>
<br />
<br />
<table border="1" cellpadding="5">
<tr>
<td width="200"></td>
<td width="60"><strong>Price</strong></td>
</tr>
<tr>
<td>Product</td>
<td class="sum" value="10.00">10.00</td>
</tr>
<tr>
<td><span id="shipment_text"></span></td>
<td><span id="shipment_price"></span></td>
</tr>
<tr>
<td>
<select class="sum">
    <option value=""></option>
    <option value="1.00">Accessory 1 - $1.00</option>
    <option value="2.00">Accessory 2 - $2.00</option>
    <option value="3.00">Accessory 3 - $3.00</option>
</select></td>
<td><span id="accessory_price"></span></td>
</tr>
<tr>
<td align="right"><strong>Total</strong></td>
<td><span id="total"></span></td>
</tr>
</table>
<br />
<input type="hidden" id="total" name="amount" value="" />
<input type="submit" value="Submit">
</form>

Upvotes: 1

Tony R
Tony R

Reputation: 11524

To do something when the country select is changed, use this:

$("#country").change(function() {
    /*update description and shipping price/*
});

Note you need to add id="country" to the country select. You can then do a similar thing with the other selects.

Alternatively, you can attach the same event to all the selects, and in the event handler get all the selected options so that everything happens in the same place:

$("select").change(function() {
    var country = $("#country option:selected").val();
    var accessory = $("#accessories option:selected").val();
    /* Update all selects, prices, and total accordingly */
});

Note that you should put value attributes on all the options as identifiers. These will likely be the prices as raw numbers. Use window.parseFloat() to convert from an attribute string to a number.

The important concepts here are .change() and :selected.

As for submitting the form, your submit button should do the trick. If you want to manually control the request and parameters, you can use $.post(), and there is an example of this on that documentation page.

Hope this helps!

Upvotes: 1

Related Questions