I'm not sure if you want to add the selection to the database based on your question... This would require a different code, but here's how you can achieve what you're asking for.
You don't need a form, just the selection boxes. Notice that each piece of HTML is enclosed in an echo tag, which writes a condensed code to the browser.
Make sure to assign an id to each selection box:
HTML
echo '<select id="this_postage" name="Postage">';
echo '<option value="14">1st Class</option>';
echo '<option value="8">2nd Class</option>';
echo '<option value="22">Next Day Delivery</option>';
echo '<option value="0">Click And Collect</option>';
echo '</select>';
echo '<select id="this_type" name="Type">';
$type = "SELECT * FROM $category order by id";
$item = mysql_query($type);
while ($typeitem = mysql_fetch_assoc($item)) {
echo '<option value='.$typeitem[price].'>'.$typeitem[type].'</option>';
}
echo '</select>';
echo '<div id="total_spend"></div>';
Note the div with id="total_spend".
JQUERY
$(function() {
$( "#this_type" ).change(function(){
var total_spend = parseInt($('#this_postage').val()) + parseInt($('#this_type').val());
$('#total_spend').html('Total: £'+total_spend);
});
When the user selects the Type, jQuery will detect the change, retrieve the values of both the postage and type, add them together, and display the total in
<div id="total_spend">Total: £TOTAL HERE</div>
THIS CODE WILL SEND TO DB:
Again, no form tag is required:
HTML:
An additional hidden input is added to store the processing URL
echo '<input type="hidden" id="updateURL" value="PATH-TO-PHP-PROCESSING-FILE.PHP">';
echo '<select id="this_postage" name="Postage">';
echo '<option value="14">1st Class</option>';
echo '<option value="8">2nd Class</option>';
echo '<option value="22">Next Day Delivery</option>';
echo '<option value="0">Click And Collect</option>';
echo '</select>';
echo '<select id="this_type" name="Type">';
$type = "SELECT * FROM $category order by id";
$item = mysql_query($type);
while ($typeitem = mysql_fetch_assoc($item)) {
echo '<option value='.$typeitem[price].'>'.$typeitem[type].'</option>';
}
echo '</select>';
echo '<div id="total_spend"></div>';
JQUERY:
$(function() {
$( "#this_type" ).change(function(){
var url = $('#updateURL').val();
var postage = parseInt($('#this_postage').val());
var type = parseInt($('#this_type').val());
var total_spend = (postage + type);
var postit = $.post( url, {
custom_block_name:custom_block_name,
postage:postage,
type:type
});
postit.done(function( data ) {
alert(data);
$('#total_spend').html('Total: £'+total_spend);
});
});});
Treat the processing PHP code as you would with the post method. After the MySQL update code at the bottom, you can add a message in the alert box using
echo 'Whatever Message you want to display in the alert here.';
If you don't want an alert, simply remove it from the jQuery code.
To call jQuery:
...?>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$( "#this_type" ).change(function(){
var total_spend = parseInt($('#this_postage').val()) + parseInt($('#this_type').val());
$('#total_spend').html('Total: £'+total_spend);
});
</script>