How to calculate values of a drop down menu with PHP/ JS?

Question

Hi I have been very puzzled how to do this and cannot find any relevant tutorial that could help me so I thought I would ask here and hope to find the help.

I have a form with 2 drop down menus, each of them having a value attribute. What I want to do is allow someone to pick one item off one drop down and another off the other drop down.

Once both drop downs have an item picked, the person is shown a total sum which is accumulated off the values from Drop Down 1 and Drop Down 2

Here is my code which is nowhere near anything correct.

<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 understand I will get replies saying you need to do this through javascript, but I have no idea how to implement this into a javascript code.

Any help please?

You will need to use Ajax for what you are trying to do, this example will help you I hope html-form-guide.com/jquery/drop-down-list-jquery.html — Manjar
– Manjar, Commented Jun 22, 2015 at 19:33
Yup, like Balder said, the only way is to use Ajax. Here's a resource that might help - plus2net.com/php_tutorial/ajax_drop_down_list3.php — cmo
– cmo, Commented Jun 22, 2015 at 19:52
This is not a situation that requires AJAX. Simple javascript can be used to calculate and display a value based on the values from the menus. — Mike Brant
– Mike Brant, Commented Jun 22, 2015 at 21:30

petebolduc · Accepted Answer · 2015-06-23 00:30:24Z

1

I am not sure by your question if you want to add it to the db on the selection... that would require a simple but different code. This will accomplish what you are asking.

You do not need a form... just the selection boxes. If you notice I encased each piece of html in an echo tag... this writes a minimized code to the browser.

You have to id each selection box 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 the Type the jQuery will pick up the change and get the values of both the postage and type and add them and then render the total in the <div id="total_spend">Total: £TOTAL HERE</div>

THIS CODE WILL SEND TO DB:

Again no form tag required:

HTML:

Added hidden input to hold 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 as you would with the 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 do not want an alert remove it from the jquery

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>

edited Jun 23, 2015 at 0:30

answered Jun 22, 2015 at 20:03

petebolduc

1,2932 gold badges13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Diamond Dallas Over a year ago

yes I do not want to add anything to the database I was only retrieving data from the database and adding the 2 values together. With that java though do I keep it on the same php file or do I have to distinguish it in a new file?

petebolduc Over a year ago

It is up to you... if you keep it on the php file you need to add <script>PUT JQUERY HERE</script> You will also need to link to jquery if you haven't already on the page. I would link to your jquery at the bottom of the page and put the above script tag beneath the jquey link with both below your closing ?>

petebolduc Over a year ago

@Diamonddallas I edited the code... spaced on putting in parseInt() see the second answer from @Maverick976

Diamond Dallas Over a year ago

I got the menu all up and running but it has to be where I am entering this script for the java where I must be really messing up. so after my whole php document is shut off <?PHP ?> after that I have put <script type="text/javascript"> JQUERY </script> I guess what I'm missing here is a reference to that <script> tag as selecting the items off the drop down list does not update anything or show a total_spend

petebolduc Over a year ago

@DiamondDallas ... sry about not getting back went to eat... I added the code you need to call the juery in the answer

|

Maverick976 · Accepted Answer · 2015-06-22 20:32:33Z

You could display the total with a few lines of jquery. 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));
    }); 
});

Collectives™ on Stack Overflow

How to calculate values of a drop down menu with PHP/ JS?

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related