Clever Geek Handbook

How to calculate dropdown menu values ​​with PHP / JS?

Hi, I am very puzzled how to do this and cannot find a suitable tutorial to help me, so I thought I would ask here and hope to find help.

I have a form with two dropdown menus, each with an attribute value

. What I want to do is let someone pick one item from one drop down and another one to another.

As soon as both dropdown items have an item selected, the person will be shown the total amount that is accumulated from the values ​​of Drop Down 1 and Drop Down 2

Here is my code that doesn't fit anywhere.

<form>
echo "<select name=Postage>
  <option value='14'>1st Class</option>
  <option value='8'>2nd Class</option>
  <option value='22'>Next Day Delivery</option>
  <option value='0'>Click And Collect</option>
</select>
<br>
<select 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>";

}

$totalspend = Type.value + Postage.value;

echo "
Total £$totalspend
</select>
</form>";

I realize I am getting answers saying that you need to do this via javascript, but I have no idea how to implement this in javascript code.

Any help please?

+3


source to share


2 answers


I'm not sure about your question if you want to add it to the db of choice ... which would require simple but different code. This will accomplish what you ask.

You don't need a form ... just select boxes. If you notice that I have framed every html chunk in an echo tag ... this writes the collapsed code to the browser.

You must id

select each selection block as follows:

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>';

Notice 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 Type

, jQuery will fetch the changes and get both post and type values ​​and add them, and then display the total in<div id="total_spend">Total: £TOTAL HERE</div>

THIS CODE WILL SEND TO THE DB:



Again no form tag required:

HTML:

Added hidden input for URL 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);
        });     
    });});

Handle php processing in the same way as with post method. At the bottom under the mysql update code you can echo 'Whatever Message you want to render in the alert message here.';

If you don't want the warning to remove it from jquery

TO CALL THE SOUND

...?>
<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>
+1


source


You can display the total with multiple jquery lines. Working example: http://jsfiddle.net/f445vfjk/

<select class="postage demo" name='Postage'>
    <option value='0'>Please select postage...</option>
    <option value='14'>1st Class</option>
    <option value='8'>2nd Class</option>
    <option value='22'>Next Day Delivery</option>
    <option value='0'>Click And Collect</option>
</select>

<!-- example output from PHP -->
<select class="type demo" name='Type'>
    <option value='0'>Please select type...</option>
    <option value='12'>Box</option>
    <option value='5'>Envelope</option>
    <option value='3'>Card</option>
</select>

<label>Total:</label>
<input name='total' id='total' disabled='true' value=''>


JQuery

$(document).ready(function(){
    $('.demo').change(function(){
        var postage = parseInt($('.postage').val());
        var type = parseInt($('.type').val());
        var total = postage + type;
        $('#total').val('$' + total.toFixed(2));
    }); 
});
+1


source






More articles:


All Articles