Another Javascript problem - Auto text values

asgsoft · Jan 4, 2007

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:

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 = ""
	 }	  
}

baxter · Jan 4, 2007

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

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> </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';
		}
}

asgsoft · Jan 4, 2007

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> </p>   
</body>
</html>

baxter · Jan 4, 2007

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> </p>   
</body>
</html>

Another Javascript problem - Auto text values

More options

asgsoft

VIP Member

baxter

Established Member

asgsoft

VIP Member

baxter

Established Member

Similar threads

We're social

New posts ➔

Auction activity ➔

How do you think a potential buyer first checks if your domain is for sale?

Polls of interest ➔

Hot this week ➔

Community favorite ➔

Hot this month ➔

Blog favorites

Web3Philly.com

1community.org

Connaught.org

powerreactors.com

ChicagoIllinoisAttorney.com

GrannyO.com

roofingstar.com

EcoPlastix.com

RangeSound.com

virens.ai

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling