[advanced search]
 

Go Back   NamePros.com > Discussion > Web Design & Development > Programming
Reload this Page another javascript problem -auto text values
Register Forum Rules FAQ Mark Forums Read

Programming PHP, Perl, Ruby on Rails, AJAX, HTML, XHTML, CSS, JavaScript, MySQL and any other coding topics.


Closed Thread
 
LinkBack Thread Tools
Old 01-04-2007, 02:12 AM   #1 (permalink)
NamePros Regular
 
asgsoft's Avatar
 
Join Date: Sep 2005
Location: At Home
Posts: 846
45.10 NP$ (Donate)

asgsoft is just really niceasgsoft is just really niceasgsoft is just really niceasgsoft is just really niceasgsoft is just really nice
another javascript problem -auto text values
Can you have a look at the price section?

http://asgsoft.net/form/form.php

It should make the price change, it only works when i have one price set, when I have all of them then it doesn't work.


Where have i gone wrong?

Here is the bit I did:

HTML Code:
function showField(email_div) 
{ 
    if(document.form1.type.value == "banner" && document.form1.impressions.value == "1000" ){ 
         document.form1.price.value = "$7.50"
     }else{
	 document.form1.price.value = ""
	 }
if(document.form1.type.value == "banner" && document.form1.impressions.value == "3000" ){ 
         document.form1.price.value = "$20.25"
     }else{
	 document.form1.price.value = ""
	 }
if(document.form1.type.value == "banner" && document.form1.impressions.value == "5000" ){ 
         document.form1.price.value = "$31.88"
     }else{
	 document.form1.price.value = ""
	 }
if(document.form1.type.value == "banner" && document.form1.impressions.value == "10000" ){ 
         document.form1.price.value = "$60.00"
     }else{
	 document.form1.price.value = ""
	 }
if(document.form1.type.value == "text" && document.form1.impressions.value == "1000" ){ 
         document.form1.price.value = "$5.00"
     }else{
	 document.form1.price.value = ""
	 }
if(document.form1.type.value == "text" && document.form1.impressions.value == "3000" ){ 
         document.form1.price.value = "$13.50"
     }else{
	 document.form1.price.value = ""
	 }
if(document.form1.type.value == "text" && document.form1.impressions.value == "5000" ){ 
         document.form1.price.value = "$21.25"
     }else{
	 document.form1.price.value = ""
	 }
if(document.form1.type.value == "text" && document.form1.impressions.value == "10000" ){ 
         document.form1.price.value = "$40.00"
     }else{
	 document.form1.price.value = ""
	 }	  
}
asgsoft is offline  
Old 01-04-2007, 07:27 AM   #2 (permalink)
NamePros Regular
 
baxter's Avatar
 
Join Date: Apr 2006
Posts: 289
1,990.00 NP$ (Donate)

baxter is a jewel in the roughbaxter is a jewel in the roughbaxter is a jewel in the rough

Ethan Allen Fund Save The Children
The reason it wasin't working is because you else statements were reseting it. So unless you choose the biggest amount it wouldn't work.

I re-wrote the function above to make it a little more clearer feel free to move it back to if/elses. I also add an onchange event to the number of impressions as if that changes it should update the price as well.

I also changed the price input to readonly instead of disabled as it serves basically the same purpose but easier to read. Make sure to verify the price as readonly/disabled can be removed toyed with

heres the file.

Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type='text/javascript'>
function showField(email_div) 
{ 
	var price = document.form1.price;
	
	
	switch( document.form1.type.value )
	{
		case 'banner':
		    switch( parseInt(document.form1.impressions.value) )
		    {
		    	case 1000:
		    	  price.value = '$7.50';
		    	  break;
		    	case 3000:
		    	  price.value = '$20.25';
		    	  break;
		      case 5000:
		        price.value = '$31.88';
		        break;
		      case 10000:
		        price.value = '$60.00';
		        break;
		      default:
		        price.value = '$0.00';
		        break;
		    }
		    break;
		 case 'text':		 
		    switch( parseInt(document.form1.impressions.value) )
		    {
		    	case 1000:		    	
		    	  price.value = '$5.00';
		    	  break;
		    	case 3000:
		    	  price.value = '$13.50';
		    	  break;
		      case 5000:
		        price.value = '$21.25';
		        break;
		      case 10000:
		        price.value = '$40.00';
		        break;
		      default:
		        price.value = '$0.00';
		        break;
		    }
		    break;
		  default:
		    price.value = '$0.00';
		}
}  


function echeck(str) {
		var at="@"
		var dot="."
		var lat=str.indexOf(at)
		var lstr=str.length
		var ldot=str.indexOf(dot)
		if (str.indexOf(at)==-1){
		   alert("Invalid E-mail Address")
		   return false
		}

		if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
		   alert("Invalid E-mail Address")
		   return false
		}

		if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
		    alert("Invalid E-mail Address")
		    return false
		}

		 if (str.indexOf(at,(lat+1))!=-1){
		    alert("Invalid E-mail Address")
		    return false
		 }

		 if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
		    alert("Invalid E-mail Address")
		    return false
		 }

		 if (str.indexOf(dot,(lat+2))==-1){
		    alert("Invalid E-mail Address")
		    return false
		 }
		
		 if (str.indexOf(" ")!=-1){
		    alert("Invalid E-mail Address")
		    return false
		 }

 		 return true					
	}

function checkall() {
  var check = true;
  var num = document.form1.item_count.value;
  for(i = 0; i < num; i++) {
     eval("check = echeck(document.getElementById('friendemail_" + i + "').value)");
     if(check==false) return false;
  }
  return true;
}
</script>
</head>

<body>
<form name="form1" method="post" action="" onsubmit="return checkall();">
  <p>Name:
    <input name="name" type="text" id="name">
  </p>
  <p>Email:
    <input name="email" type="text" id="email">

  </p>
  <p>Site:
    <input name="tooltip" type="text" id="tooltip">
  </p>
  <p>Tooltip: 
    <input type="text" name="textfield4">
  </p>
  <p>I'd Like to buy: 
    <select name="impressions" id="impressions" onChange="showField();">
      <option value="1000" selected>1,000</option>

      <option value="3000">3,000</option>
      <option value="5000">5,000</option>
      <option value="10000">10,000</option>
    </select>
    <select name="type" id="type" onChange="showField();">
      <option value="text" selected>Text Impressions</option>
      <option value="banner">Banner Impressions</option>

    </select>
  </p> 
  <div id='email_div'> 
    <!-- E-mail fields will be here *hopefully* -->
    </div>
	Price: 
    <input name="price" type="text" id="price"  readonly > 
  </form>  
<p>&nbsp;</p>   
</body>
</html>
And if you just want the javascript function its here:

Code:
function showField(email_div) 
{ 
	var price = document.form1.price;
	
	
	switch( document.form1.type.value )
	{
		case 'banner':
		    switch( parseInt(document.form1.impressions.value) )
		    {
		    	case 1000:
		    	  price.value = '$7.50';
		    	  break;
		    	case 3000:
		    	  price.value = '$20.25';
		    	  break;
		      case 5000:
		        price.value = '$31.88';
		        break;
		      case 10000:
		        price.value = '$60.00';
		        break;
		      default:
		        price.value = '$0.00';
		        break;
		    }
		    break;
		 case 'text':		 
		    switch( parseInt(document.form1.impressions.value) )
		    {
		    	case 1000:		    	
		    	  price.value = '$5.00';
		    	  break;
		    	case 3000:
		    	  price.value = '$13.50';
		    	  break;
		      case 5000:
		        price.value = '$21.25';
		        break;
		      case 10000:
		        price.value = '$40.00';
		        break;
		      default:
		        price.value = '$0.00';
		        break;
		    }
		    break;
		  default:
		    price.value = '$0.00';
		}
}
Last edited by baxter; 01-04-2007 at 07:31 AM.
baxter is offline  
Old 01-04-2007, 08:11 AM   #3 (permalink)
NamePros Regular
 
asgsoft's Avatar
 
Join Date: Sep 2005
Location: At Home
Posts: 846
45.10 NP$ (Donate)

asgsoft is just really niceasgsoft is just really niceasgsoft is just really niceasgsoft is just really niceasgsoft is just really nice
thanks alot. that works. rep added

but how can I encoperate that in it too:

Code:
if(document.form1.type.value == "banner") 
    { 
          var txt = '<p>Banner Location:<input type="text" name="bannerloc" value="" onfocus="this.value=\'\';" /></p>'; 
        document.getElementById(email_div).innerHTML = txt; 
        document.getElementById(email_div).style.display = 'block';
     } 
     else 
     { 
          document.getElementById(email_div).style.display = 'none';
     }
this doesn't work. here is a demo http://asgsoft.net/form/form.php

Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type='text/javascript'>
function showField(email_div) 
{ 
if(document.form1.type.value == "banner") 
    { 
          var txt = '<p>Banner Location:<input type="text" name="bannerloc" value="" onfocus="this.value=\'\';" /></p>'; 
        document.getElementById(email_div).innerHTML = txt; 
        document.getElementById(email_div).style.display = 'block';
     } 
     else 
     { 
          document.getElementById(email_div).style.display = 'none';
     }  
	 
	var price = document.form1.price;
	
	
	switch( document.form1.type.value )
	{
		case 'banner':
		    switch( parseInt(document.form1.impressions.value) )
		    {
		    	case 1000:
		    	  price.value = '$7.50';
		    	  break;
		    	case 3000:
		    	  price.value = '$20.25';
		    	  break;
		      case 5000:
		        price.value = '$31.88';
		        break;
		      case 10000:
		        price.value = '$60.00';
		        break;
		      default:
		        price.value = '$0.00';
		        break;
		    }
		    break;
		 case 'text':		 
		    switch( parseInt(document.form1.impressions.value) )
		    {
		    	case 1000:		    	
		    	  price.value = '$5.00';
		    	  break;
		    	case 3000:
		    	  price.value = '$13.50';
		    	  break;
		      case 5000:
		        price.value = '$21.25';
		        break;
		      case 10000:
		        price.value = '$40.00';
		        break;
		      default:
		        price.value = '$0.00';
		        break;
		    }
		    break;
		  default:
		    price.value = '$0.00';
		}
}  


function echeck(str) {
		var at="@"
		var dot="."
		var lat=str.indexOf(at)
		var lstr=str.length
		var ldot=str.indexOf(dot)
		if (str.indexOf(at)==-1){
		   alert("Invalid E-mail Address")
		   return false
		}

		if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
		   alert("Invalid E-mail Address")
		   return false
		}

		if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
		    alert("Invalid E-mail Address")
		    return false
		}

		 if (str.indexOf(at,(lat+1))!=-1){
		    alert("Invalid E-mail Address")
		    return false
		 }

		 if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
		    alert("Invalid E-mail Address")
		    return false
		 }

		 if (str.indexOf(dot,(lat+2))==-1){
		    alert("Invalid E-mail Address")
		    return false
		 }
		
		 if (str.indexOf(" ")!=-1){
		    alert("Invalid E-mail Address")
		    return false
		 }

 		 return true					
	}

function checkall() {
  var check = true;
  var num = document.form1.item_count.value;
  for(i = 0; i < num; i++) {
     eval("check = echeck(document.getElementById('friendemail_" + i + "').value)");
     if(check==false) return false;
  }
  return true;
}
</script>
</head>

<body>
<form name="form1" method="post" action="" onsubmit="return checkall();">
  <p>Name:
    <input name="name" type="text" id="name">
  </p>
  <p>Email:
    <input name="email" type="text" id="email">

  </p>
  <p>Site:
    <input name="tooltip" type="text" id="tooltip">
  </p>
  <p>Tooltip: 
    <input type="text" name="textfield4">
  </p>
  <p>I'd Like to buy: 
    <select name="impressions" id="impressions" onChange="showField();">
      <option value="1000" selected>1,000</option>

      <option value="3000">3,000</option>
      <option value="5000">5,000</option>
      <option value="10000">10,000</option>
    </select>
    <select name="type" id="type" onChange="showField('email_div');">
      <option value="text" selected>Text Impressions</option>
      <option value="banner">Banner Impressions</option>

    </select>
  </p> 
  <div id='email_div'> 
    </div>
	Price: 
    <input name="price" type="text" id="price" value="$5.00"  readonly > 
  </form>  
<p>&nbsp;</p>   
</body>
</html>
Last edited by asgsoft; 01-04-2007 at 08:18 AM.
asgsoft is offline  
Old 01-04-2007, 08:51 AM   #4 (permalink)
NamePros Regular
 
baxter's Avatar
 
Join Date: Apr 2006
Posts: 289
1,990.00 NP$ (Donate)

baxter is a jewel in the roughbaxter is a jewel in the roughbaxter is a jewel in the rough

Ethan Allen Fund Save The Children
here ya go:

- added 'email_div' to the onchange in the number of impressions.
- order the code into the switch statement.

Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type='text/javascript'>
function showField(email_div) 
{  
	var price = document.form1.price;
	
	
	switch( document.form1.type.value )
	{
		case 'banner':
		    var txt = '<p>Banner Location:<input type="text" name="bannerloc" value="" onfocus="this.value=\'\';" /></p>'; 
		    
		    document.getElementById(email_div).innerHTML = txt; 
        document.getElementById(email_div).style.display = 'block';
        
		    switch( parseInt(document.form1.impressions.value) )
		    {
		    	case 1000:
		    	  price.value = '$7.50';
		    	  break;
		    	case 3000:
		    	  price.value = '$20.25';
		    	  break;
		      case 5000:
		        price.value = '$31.88';
		        break;
		      case 10000:
		        price.value = '$60.00';
		        break;
		      default:
		        price.value = '$0.00';
		        break;
		    }
		    break;
		 case 'text':
		    
		    document.getElementById(email_div).style.display = 'none';
		    		 
		    switch( parseInt(document.form1.impressions.value) )
		    {
		    	case 1000:		    	
		    	  price.value = '$5.00';
		    	  break;
		    	case 3000:
		    	  price.value = '$13.50';
		    	  break;
		      case 5000:
		        price.value = '$21.25';
		        break;
		      case 10000:
		        price.value = '$40.00';
		        break;
		      default:
		        price.value = '$0.00';
		        break;
		    }
		    break;
		  default:
		    price.value = '$0.00';
		}
}  


function echeck(str) {
		var at="@"
		var dot="."
		var lat=str.indexOf(at)
		var lstr=str.length
		var ldot=str.indexOf(dot)
		if (str.indexOf(at)==-1){
		   alert("Invalid E-mail Address")
		   return false
		}

		if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
		   alert("Invalid E-mail Address")
		   return false
		}

		if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
		    alert("Invalid E-mail Address")
		    return false
		}

		 if (str.indexOf(at,(lat+1))!=-1){
		    alert("Invalid E-mail Address")
		    return false
		 }

		 if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
		    alert("Invalid E-mail Address")
		    return false
		 }

		 if (str.indexOf(dot,(lat+2))==-1){
		    alert("Invalid E-mail Address")
		    return false
		 }
		
		 if (str.indexOf(" ")!=-1){
		    alert("Invalid E-mail Address")
		    return false
		 }

 		 return true					
	}

function checkall() {
  var check = true;
  var num = document.form1.item_count.value;
  for(i = 0; i < num; i++) {
     eval("check = echeck(document.getElementById('friendemail_" + i + "').value)");
     if(check==false) return false;
  }
  return true;
}
</script>
</head>

<body>
<form name="form1" method="post" action="" onsubmit="return checkall();">
  <p>Name:
    <input name="name" type="text" id="name">
  </p>
  <p>Email:
    <input name="email" type="text" id="email">

  </p>
  <p>Site:
    <input name="tooltip" type="text" id="tooltip">
  </p>
  <p>Tooltip: 
    <input type="text" name="textfield4">
  </p>
  <p>I'd Like to buy: 
    <select name="impressions" id="impressions" onChange="showField('email_div');">
      <option value="1000" selected>1,000</option>

      <option value="3000">3,000</option>
      <option value="5000">5,000</option>
      <option value="10000">10,000</option>
    </select>
    <select name="type" id="type" onChange="showField('email_div');">
      <option value="text" selected>Text Impressions</option>

      <option value="banner">Banner Impressions</option>

    </select>
  </p> 
  <div id='email_div'> 
    </div>
	Price: 
    <input name="price" type="text" id="price" value="$5.00"  readonly > 
  </form>  
<p>&nbsp;</p>   
</body>
</html>
__________________
Chimps.ca - Swans.ca - Snails.ca
baxter is offline  
Closed Thread

« getElementById problems... | Are cookies 'global' or 'browser dependent'? »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Site Sponsors
Advertise your business at NamePros

All times are GMT -7. The time now is 12:42 AM.

Contact Us - NamePros.com - Archive - Privacy Statement - Top

Powered by: vBulletin® Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
Template-Modifications by TMS
vBCredits v1.4 Copyright ©2007 - 2008, PixelFX Studios

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85