Having difficulty with updating a variable with js.
I am trying to give the client an option of having a blog set up with
their website by using a select tag and some javascript.
Problem is the js is not updating the variable - so I must have got something wrong.
This is my select code ( it uses a bit of php at the top of the page) :
PHP Code:
$N_blog_cd = "n";
$blog = array(
"y"=>'Yes',
"n"=>'No'
);
Then the selector:
Code:
<span class="form_top1" ><b>Yes, I would like a wordpress blog set up on my website (no charge):</b>
<select style="background-color: yellow; font-weight: bold;" name="x_blog_cd">
<?php
foreach($blog as $field => $value){
if ($N_blog_cd == $field){
echo "
<option id = \"blogadd\" value = {$field} selected= \"selected\" onchange = \"addblog()\" >$value </option>";
}// endif
else {
echo "<option id = \"blogadd\" value = {$field} onchange = \"addblog()\">$value </option>";
}// end else
}// end for loop
?>
</select>
</span>
<br><br>
Now in the HEAD I have this js:
Code:
<script type="text/javascript">
<!--
function check_calc(){
var per1 = parseInt(document.getElementById('per_1').value,10);
var per2 = parseInt(document.getElementById('per_2').value,10);
var price = parseFloat(document.getElementById('price').getAttribute('value'));
var total1 = per1*price;
var total2 = per2*8.7;
var total3 = total1+total2;
var item_desc = "Domain Name and DNS set up.";
var dom_name = document.getElementById('dom_nm').getAttribute('value');
document.getElementById('total_1').value=total1.toFixed(2);
document.getElementById('total_2').value=total2.toFixed(2);
document.getElementById('total_3').value=total3.toFixed(2);
document.getElementById('total_pay').value=total3.toFixed(2);
document.getElementById('per_pay').value=per1;
if (per2 == 0)
{
item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" No Privacy.";
}
if (per2 > 0)
{
item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" Including: Privacy: "+per2+"year.";
}
document.getElementById('item_pay').value= item_desc;
} // end of function
function addblog(){
var bloggit = document.getElementById('blogadd').getAttribute('value');
if(bloggit == "Yes")
{
document.getElementById('item_pay').value= item_desc+" Plus Free Blog Install.";
}
} // end of function
document.onkeyup=check_calc
// -->
</script>
Most of it is working fine but that element ('item_pay') does
not get updated
I use that element in a form on the same page.
Like this:
Please post the HTML received at the client end. Much more time-consuming - even for those of us who do php etc. - to try and figure out what's actually being served.
GOOD POINT
Sorry I should have thought of posting from the source code view earlier.
OK Here goes:
At the top:
Code:
<script type="text/javascript" src="functions-hev.js"> </script>
<script type="text/javascript">
<!--
function check_calc(){
var per1 = parseInt(document.getElementById('per_1').value,10);
var per2 = parseInt(document.getElementById('per_2').value,10);
var price = parseFloat(document.getElementById('price').getAttribute('value'));
var total1 = per1*price;
var total2 = per2*8.7;
var total3 = total1+total2;
var item_desc = "Domain Name and DNS set up.";
var dom_name = document.getElementById('dom_nm').getAttribute('value');
document.getElementById('total_1').value=total1.toFixed(2);
document.getElementById('total_2').value=total2.toFixed(2);
document.getElementById('total_3').value=total3.toFixed(2);
document.getElementById('total_pay').value=total3.toFixed(2);
document.getElementById('per_pay').value=per1;
if (per2 == 0)
{
item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" No Privacy.";
}
if (per2 > 0)
{
item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" Including: Privacy: "+per2+"year.";
}
document.getElementById('item_pay').value= item_desc;
} // end of function
function addblog(){
var bloggit = document.getElementById('blogadd').getAttribute('value');
if(bloggit == "Yes")
{
document.getElementById('item_pay').value= item_desc+" Plus Free Blog Install.";
}
} // end of function
document.onkeyup=check_calc
// -->
</script>
<STYLE type="text/css">
table{
font-size: 18px;
border-collapse:collapse;
border:1px solid #000;
}
table td{
border:1px solid #000;
padding :1px;
}
</STYLE>
</head>
<body link="#666666" vlink="#666666" alink="#CCCCCC" >
<noscript>
<p>This site needs Javascript to work properly. PLEASE ENABLE JAVASCRIPT.</p>
</noscript>
And below is the form etc.
Code:
<span class="form_top1" ><b>Yes, I would like a wordpress blog set up on my website (no charge):</b>
<select style="background-color: yellow; font-weight: bold;" name="x_blog_cd">
<option id = "blogadd" value = y onchange = "addblog()">Yes </option>
<option id = "blogadd" value = n selected= "selected" onchange = "addblog()" >No </option></select>
</span>
<br><br>
<div style="margin: 5px auto;">
<table>
<th>Your New Domain Name Order</th>
<tr><td>Product</td><td>Cost</td><td>Years (max. 10)</td><td style="text-align: right;">Total Cost</td></tr>
<tr><td id="dom_nm" value = 'fgdsgsg.info' >fgdsgsg.info</td><td id="price" value = '14.70' >14.70</td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_1" size = '10' value = '2' ></td><td><input type='TEXT' id="total_1" style="text-align: right;" value = '29.40'></td></tr>
<tr><td>Domain Privacy</td><td>8.70</td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_2" size = '10' value = '2'></td><td><input type='TEXT' id="total_2" style="text-align: right;" value = '17.40'></td></tr>
<tr><td>Total Order.</td><td> --- </td><td> --- </td><td><input type='TEXT' id="total_3" style="text-align: right; font-weight: bold;" value = '46.80'></td></tr>
</table>
</div>
<div style="text-align: center; width: 500px; margin:10px 0 0 105px; ">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="item_name" id="item_pay" value="Domain Name and DNS set up. Domain: fgdsgsg.info Period: 2 years. Including: Privacy: 2 years.">
<input type="hidden" name="a3" id="total_pay" value="46.80" >
<input type="hidden" name="p3" id="per_pay" value="2" >
<input type="hidden" name="t3" value="Y" />
<input type="image" src="images/buy_now1.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form>
Lots of stuff to fix here. Select options have no onchange event handlers, it's the Select object itself. Might as well send along a reference to the selected value as well. You made 'item_desc' local to the function, so it's out of scope for everything else. Also, there's no default for that hidden field 'item_pay' so if the user does the select first it'll be incomplete. I ran check_calc onload to set it up correctly. Not sure what the logic is here so, you may need to adjust things.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
var item_desc = '';
function check_calc(){
var per1 = parseInt(document.getElementById('per_1').value,10);
var per2 = parseInt(document.getElementById('per_2').value,10);
var price = parseFloat(document.getElementById('price').getAttribute('value'));
var total1 = per1*price;
var total2 = per2*8.7;
var total3 = total1+total2;
var dom_name = document.getElementById('dom_nm').getAttribute('value');
document.getElementById('total_1').value=total1.toFixed(2);
document.getElementById('total_2').value=total2.toFixed(2);
document.getElementById('total_3').value=total3.toFixed(2);
document.getElementById('total_pay').value=total3.toFixed(2);
document.getElementById('per_pay').value=per1;
if (per2 == 0)
{
item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" No Privacy.";
}
if (per2 > 0)
{
item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" Including: Privacy:"+per2+"year.";
}
document.getElementById('item_pay').value= item_desc;
} // end of function
function addblog(bloggit){
if (bloggit == "Y")
{
document.getElementById('item_pay').value= item_desc+" Plus Free Blog Install.";
}
else
{
document.getElementById('item_pay').value=item_desc;
}
} // end of function
document.onkeyup=check_calc;
window.onload = check_calc;
</script>
<STYLE type="text/css">
table{
font-size: 18px;
border-collapse:collapse;
border:1px solid #000;
}
table td{
border:1px solid #000;
padding :1px;
}
</STYLE>
</head>
<body link="#666666" vlink="#666666" alink="#CCCCCC" >
<noscript>
<p>This site needs Javascript to work properly. PLEASE ENABLE JAVASCRIPT.</p>
</noscript>
<span class="form_top1" ><b>Yes, I would like a wordpress blog set up on my website (no charge):</b>
<select style="background-color: yellow; font-weight: bold;" name="x_blog_cd" onchange="addblog(this.value)">
<option id = "blogadd" value = "Y" >Yes </option>
<option id = "blogadd" value = "N" selected= "selected">No </option></select>
</span>
<br><br>
<div style="margin: 5px auto;">
<table>
<th>Your New Domain Name Order</th>
<tr><td>Product</td><td>Cost</td><td>Years (max. 10)</td><td style="text-align: right;">Total
Cost</td></tr>
<tr><td id="dom_nm" value = 'fgdsgsg.info' >fgdsgsg.info</td><td id="price" value = '14.70'
>14.70</td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_1" size = '10' value = '2'
></td><td><input type='TEXT' id="total_1" style="text-align: right;" value = '29.40'></td></tr>
<tr><td>Domain Privacy</td><td>8.70</td><td><input style="background-color: yellow; font-weight:
bold;" type='TEXT' id="per_2" size = '10' value = '2'></td><td><input type='TEXT' id="total_2" style="text-align: right;"
value = '17.40'></td></tr>
<tr><td>Total Order.</td><td> --- </td><td> --- </td><td><input type='TEXT' id="total_3"
style="text-align: right; font-weight: bold;" value = '46.80'></td></tr>
</table>
</div>
<div style="text-align: center; width: 500px; margin:10px 0 0 105px; ">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="text" name="item_name" size="140" id="item_pay" value="">
<input type="hidden" name="a3" id="total_pay" value="46.80" >
<input type="hidden" name="p3" id="per_pay" value="2" >
<input type="hidden" name="t3" value="Y" />
<input type="image" src="images/buy_now1.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and
secure!">
</form>
</body>
</html>
I noticed that you specified:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
I had been using this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Would that have made a difference ?
Thanks for helping out.
Some variables are set up by the php before the html is served which is why from the source code output they can not be seen.
For that reason I don't need to run check_calc onload ( although it's not a bad idea. )
adios, under an XHTML Doctype it is recommended to isolate the embedded javascript code inside CDATA islands, to prevent possible XML-like interpretation of some special characters (< > &). Especially IE is very sensitive about that.
Code:
<script type="text/javascript">
/*<![CDATA[*/
... code here ...
/*]]>*/
</script>
Also, under an XHTML Doctype the non-empty tags (<input>, <img>, <br>, ...) must be "self" closed and written in an XHTML way, such as <input />, <img />, <br />
Moreover, under an XHTML Doctype almost all the HTML attributes are illegal (link, vlink, alink). CSS is to be used for almost all the presentation properties.
After all, whay do you need XHTML Doctype? Is there any XML object to be handled? No. Therefore an strict HTML Doctype should be enough:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Before you post, read our: 
