Jump to content

mathematically add two spans together

loxfear

By loxfear
in Javascript Help

 Share
Go to solution Solved by cyberRobot,

Recommended Posts

loxfear Member

loxfear

Posted
Posted

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 

Link to comment
https://forums.phpfreaks.com/topic/289077-mathematically-add-two-spans-together/
Share on other sites
  • Solution
cyberRobot Prolific Member

cyberRobot

Posted
  • Solution
Posted

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 Member

loxfear

Posted
  • Author
Posted

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 Prolific Member

cyberRobot

Posted
Posted (edited)

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 by cyberRobot
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.