将SPAN值插入DB

I have tried many ways to insert the value from SPAN to DB? The value displayed into span is from Javascript. Currently when i run, 0.00 from both UP and TP will get displayed with values from javascript functions. And when i insert into MYSQL Database, i get all other data inserted except for the values from UP and TP. I am using input type = "hidden" to just pass the value. THis is my code. Can anyone help? Thank you.

 <p></p><div><b>UnitPrice: <span id="UP">0.00</span> </b></div><p>
 <p></p><div><b>TotalPrice: <span id="TP">0.00</span> </b></div><p>

 <input type="hidden" name="UnitPrice" value="', document.getElementById("UP").value '"/>
 <input type="hidden" name="TotalPrice" value="', document.getElementById("TP").value '"/>

 $UnitPrice = (trim($_POST['UnitPrice']));
 $TotalPrice= (trim($_POST['TotalPrice']));

 $query = "INSERT INTO `OrderItem` (`UnitPrice`, `TotalPrice`) VALUES ('$UnitPrice','$TotalPrice')";
 $result = mysql_query($query) or die($query."<br/><br/>".mysql_error());

<script type="text/javascript">
function showUP(str) {
    if (str==""){
        document.getElementById("UP").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest)   {
        // code for IE7+, Firefox, Chrome, Opera, Safari   
        xmlhttp=new XMLHttpRequest();  
    } else {
        // code for IE6, IE5   
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    } 
    xmlhttp.onreadystatechange=function(){   
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("UP").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getunitprice.php?q="+str,true);
    xmlhttp.send();
}


function multiply(Quantity) {
    var totalPrice = parseFloat(document.getElementById("UP").innerHTML)*Quantity;
    document.getElementById("TP").innerHTML = totalPrice;
}
</script>

What you are trying to do is javascript and you cannot do it like that.

When you get <span id="UP">0.00</span> you can also add that hidden element with that value, add ID to hidden elements` and modify your javascript function to add values to those hidden elements

<script type="text/javascript">
function showUP(str) {
    if (str==""){
        document.getElementById("UP").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest)   {
        // code for IE7+, Firefox, Chrome, Opera, Safari   
        xmlhttp=new XMLHttpRequest();  
    } else {
        // code for IE6, IE5   
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    } 
    xmlhttp.onreadystatechange=function(){   
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("UP").innerHTML=xmlhttp.responseText;
            document.getElementById("UnitPrice").value=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getunitprice.php?q="+str,true);
    xmlhttp.send();
}


function multiply(Quantity) {
    var totalPrice = parseFloat(document.getElementById("UP").innerHTML)*Quantity;
    document.getElementById("TP").innerHTML = totalPrice;
    document.getElementById("TotalPrice").value = totalPrice;
}
</script>

<p></p><div><b>UnitPrice: <span id="UP">0.00</span> </b><input type="hidden" name="UnitPrice" id="UnitPrice" value=""/></div><p>
<p></p><div><b>TotalPrice: <span id="TP">0.00</span> </b><input type="hidden" name="TotalPrice" id="TotalPrice" value=""/></div><p>