...

View Full Version : Having difficulty with updating a variable with js.



jeddi
05-13-2009, 05:27 PM
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) :


$N_blog_cd = "n";

$blog = array(
"y"=>'Yes',
"n"=>'No'
);

Then the selector:




<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&nbsp;&nbsp; </option>";
}// endif
else {
echo "<option id = \"blogadd\" value = {$field} onchange = \"addblog()\">$value&nbsp;&nbsp;</option>";
}// end else
}// end for loop
?>
</select>
</span>
<br><br>

Now in the HEAD I have this js:



<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:


<input type="hidden" name="item_name" id="item_pay" value="<?php echo $item_nm ?>">


Any ıdeas why it does not update when I change the select from
"No" to "Yes" ?

Thanks for helping :)

adios
05-13-2009, 05:47 PM
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.

jeddi
05-13-2009, 07:43 PM
GOOD POINT
Sorry I should have thought of posting from the source code view earlier.

OK Here goes:

At the top:


<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.


<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&nbsp;&nbsp;</option>
<option id = "blogadd" value = n selected= "selected" onchange = "addblog()" >No&nbsp;&nbsp; </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>


Hope you can see what I did wrong :o

Thanks

adios
05-13-2009, 08:28 PM
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.


<!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&nbsp;&nbsp;</option>
<option id = "blogadd" value = "N" selected= "selected">No&nbsp;&nbsp; </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>

jeddi
05-13-2009, 09:59 PM
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. )

Thanks again

Hopefully I should get it all running now :)

adios
05-14-2009, 01:01 PM
Doctype will principally affect the layout and how the page is rendered. Check this site, the HTML forum stickies.

Fooled around with your file a bit; added an input validator. You're welcome to use it.


<!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 per_1 = document.getElementById('per_1');
var per_2 = document.getElementById('per_2');
var per1 = per_1.value;
var per2 = per_2.value;
if (!/^\d*$/.test(per1))
{
per_1.value = '';
per1 = 0;
}
if (!/^\d*$/.test(per2))
{
per_2.value = '';
per2 = 0;
}
if (per1 == '')
per1 = 0;
else per1 = parseInt(per1, 10);
if (per2 == '')
per2 = 0;
else per2 = parseInt(per2, 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&nbsp;&nbsp;</option>
<option id = "blogadd" value = "N" selected= "selected">No&nbsp;&nbsp; </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="120" 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>

Kor
05-14-2009, 02:26 PM
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.


<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:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum