Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts

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

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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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.

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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&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

    Thanks

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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&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>
    Last edited by adios; 05-13-2009 at 07:40 PM.

  • Users who have thanked adios for this post:

    jeddi (05-13-2009)

  • #5
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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
    Last edited by jeddi; 05-13-2009 at 09:24 PM.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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.

    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 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>
    Last edited by adios; 05-15-2009 at 06:34 PM.

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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">
    Last edited by Kor; 05-14-2009 at 01:28 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •