mathematically add two spans together

loxfear · June 9, 2014

i have this code, wich makes me able to get a price for a server and display it in a selection menu : http://polterplanner.dk/bestiller.php

what i need is a way to make it able to get a sum of the two prices, displayed in another span, and every time the prices changes it should recalculate,

<?php
include 'sqlconnect.php';

$sql = mysqli_query($con,"SELECT * FROM aktiviteter");
$data = array();
while ($row = mysqli_fetch_assoc($sql))
{
    $data[$row['id']] = array(
        'title' => $row['title'],
        'pris'  => $row['pris'],
		'beskrivelse' => $row['beskrivelse'],
    );
}
print_r(error_get_last());
?>

<html>
<head>
<title>AWESOMEE</title>
<script>
    var jsArray = [];
    <?php
foreach($data as $key => $value):
echo 'jsArray["'.$key.'"] = [];';
echo "\r\n";
    foreach($value as $infoType => $info):
echo 'jsArray["'.$key.'"]["'.$infoType.'"] = "'.$info.'";';
echo "\r\n";
endforeach;
endforeach;
print_r(error_get_last());
?>
function activitySelectionChanged() {
    var activitySelect = document.getElementById('activity');
    var selectedValue = activitySelect.value;
    var priceOutputBox = document.getElementById('activityPrice');
    priceOutputBox.innerHTML = jsArray[selectedValue]["pris"];
}
function activitySelectionChanged2() {
    var activitySelect = document.getElementById('activity2');
    var selectedValue = activitySelect.value;
    var priceOutputBox = document.getElementById('activityPrice2');
    priceOutputBox.innerHTML = jsArray[selectedValue]["pris"];
}
</script>
</head>
<body>
<table width="349" height="27" border="0">
  <tr>
    <td width="174" height="23"><select name="activity" id="activity" onChange="activitySelectionChanged()">
      <option value="">-----------------</option>
      <?php
foreach($data as $key => $value):
echo '<option value="'.$key.'">'.$value['title'].'</option>';
echo "\r\n";
endforeach;

print_r(error_get_last());
?>
    </select></td>
    <td width="86"> </td>
    <td width="75"><span id="activityPrice">Pris</span>,-</td>
  </tr>
  <tr>
    <td width="174" height="23"><select name="activity2" id="activity2" onChange="activitySelectionChanged2()">
      <option value="">-----------------</option>
      <?php
foreach($data as $key => $value):
echo '<option value="'.$key.'">'.$value['title'].'</option>';
echo "\r\n";
print_r(error_get_last());
?>
    </select></td>
    <td width="86"> </td>
    <td width="75"><span id="activityPrice2">Pris</span>,-</td>
  </tr>
</table>
</body>
</html>

endforeach;

hope you are able to direct me to something that will help me

thanks

cyberRobot · June 9, 2014

Note that you could merge activitySelectionChanged() and activitySelectionChanged2():

   function activitySelectionChanged(elementID) {
        var activitySelect = document.getElementById('activity' + elementID);
        var selectedValue = activitySelect.value;
        var priceOutputBox = document.getElementById('activityPrice' + elementID);
        priceOutputBox.innerHTML = jsArray[selectedValue]["pris"];
    }

Then you would call the function with the following:

<select name="activity" id="activity" onChange="activitySelectionChanged('')">
...
<select name="activity2" id="activity2" onChange="activitySelectionChanged(2)">

To answer your question, you'll need a span tag for the total:

<tr>
    <td>Total:</td>
    <td></td>
    <td><span id="activityTotal"></span></td>
</tr>

Then in the function(s) which execute when a drop down menu changes, add something like the following:

       var price1 = document.getElementById('activityPrice').innerHTML;
       var price2 = document.getElementById('activityPrice2').innerHTML;
       var total  = document.getElementById('activityTotal');
       if(price1!='Pris' && price2!='Pris') {
            total.innerHTML = parseInt(price1) + parseInt(price2);
       }

Note that the total will only be displayed when both fields are selected.

loxfear · June 9, 2014

so like this:?

<?php
include 'sqlconnect.php';

$sql = mysqli_query($con,"SELECT * FROM aktiviteter");
$data = array();
while ($row = mysqli_fetch_assoc($sql))
{
    $data[$row['id']] = array(
        'title' => $row['title'],
        'pris'  => $row['pris'],
		'beskrivelse' => $row['beskrivelse'],
    );
}
print_r(error_get_last());
?>

<html>
<head>
<title>AWESOMEE</title>
<script>
    var jsArray = [];
    <?php
foreach($data as $key => $value):
echo 'jsArray["'.$key.'"] = [];';
echo "\r\n";
    foreach($value as $infoType => $info):
echo 'jsArray["'.$key.'"]["'.$infoType.'"] = "'.$info.'";';
echo "\r\n";
endforeach;
endforeach;
print_r(error_get_last());
?>
function activitySelectionChanged(elementID) {
        var activitySelect = document.getElementById('activity' + elementID);
        var selectedValue = activitySelect.value;
        var priceOutputBox = document.getElementById('activityPrice' + elementID);
        priceOutputBox.innerHTML = jsArray[selectedValue]["pris"];
        
        var price1 = document.getElementById('activityPrice').innerHTML;
        var price2 = document.getElementById('activityPrice2').innerHTML;
        var total  = document.getElementById('activityTotal');
        if(price1!='Pris' && price2!='Pris') {
            total.innerHTML = parseInt(price1) + parseInt(price2);
       }
    }

</script>
</head>
<body>
<table width="349" height="27" border="0">
  <tr>
    <td width="174" height="23"><select name="activity" id="activity" onChange="activitySelectionChanged('')">
      <option value="">-----------------</option>
      <?php
foreach($data as $key => $value):
echo '<option value="'.$key.'">'.$value['title'].'</option>';
echo "\r\n";
endforeach;

print_r(error_get_last());
?>
    </select></td>
    <td width="86"> </td>
    <td width="75"><span id="activityPrice">Pris</span>,-</td>
  </tr>
  <tr>
    <td width="174" height="23"><select name="activity2" id="activity2" onChange="activitySelectionChanged(2)">
      <option value="">-----------------</option>
      <?php
foreach($data as $key => $value):
echo '<option value="'.$key.'">'.$value['title'].'</option>';
echo "\r\n";
print_r(error_get_last());
?>
    </select></td>
    <td width="86"> </td>
    <td width="75"><span id="activityPrice2">Pris</span>,-</td>
  </tr>
  <tr>
    <td>Total:</td>
    <td></td>
    <td><span id="activityTotal"></span></td>
</tr>
</table>

</body>
</html>

endforeach;

sadly that isnt working. when u say the funktion that gets called, then that would be the onchange funktion right?

cyberRobot · June 9, 2014

~~Is that your exact code? If so, the "endforeach" at the end needs to be surrounded by PHP tags.~~

</body>
</html>
<?php
endforeach;
?>

Edited June 9, 2014 by cyberRobot

cyberRobot · June 9, 2014

Actually, the "endforeach" is probably supposed to be moved within the <select> tag.

<?php
foreach($data as $key => $value):
    echo '<option value="'.$key.'">'.$value['title'].'</option>';
    echo "\r\n";
    print_r(error_get_last());
endforeach;
?>

Edited June 9, 2014 by cyberRobot

loxfear · June 9, 2014

coool dude can u explain to me why the endforeach didnt make any problems the first time?

cyberRobot · June 9, 2014

coool dude can u explain to me why the endforeach didnt make any problems the first time?

I honestly don't know; it seems like it should have. :shrug:

Sign In

mathematically add two spans together

Recommended Posts

loxfear

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

loxfear

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

loxfear

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information