JavaScript - User Clicks On Image, Show "x" Multiple Times

Hello,

I'm not really a techie but I was feeling a little adventurous this morning so I thought I'd try to follow some tips online to customize a "buy" button for some products that I'm preparing to sell online at what is currently: www.SensoryEscapeImages.Squarespace.com

If you visit this site, then click on "Photo Gallery" on the top nav, then click on the 4th image to the right on the top row of thumbnails, you will see on the overlay, at the bottom, three dropdowns that I'm trying to affect.

So, there are three fields presented with the Buy button: Size, Format, and Trim & Finish. If I were to select the Size of 8 x 12 in the first dropdown, the behavior that I am striving for is to only show the Formats available in that size in the second dropdown. Subsequently, each format has Trim & Finish options exclusive to that format and I'm aiming to only make those show in the Trim & Finish dropdown.

But it aint working. Here's the code that I started. No laughing

<left><form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=563148&cl=74166&ejc=2"
target="ej_ejc" method="POST" name="condition" accept-charset="UTF-8">
<table><tr><td>Size:<select name="o1">
<option value="8 x 12">8 x 12</option>
<option value="12 x 18">12 x 18</option>
<option value="16 x 24">16 x 24</option>
<option value="20 x 30">20 x 30</option>
<option value="24 x 36">24 x 36</option>
<option value="30 x 45">30 x 45</option>
</select></td><td>Format:<select name="o2">
<script type="text/javascript">
if (condition.o1.options = 0)
{
document.write("<option value="Print $50">Print $50</option>
<option value="Print on Gatorboard $80">Print on Gatorboard $80</option>
<option value="Canvas $125">Canvas $125</option>");
}

if (condition.o1.options = 1)
{
document.write("<option value="Print $90">Print $90</option>
<option value="Print on Gatorboard $125">Print on Gatorboard $125</option>
<option value="Canvas $145">Canvas $145</option>");
}

if (condition.o1.options = 2)
{
document.write("<option value="Print $125">Print $125</option>
<option value="Print on Gatorboard $165">Print on Gatorboard $165</option>
<option value="Canvas $220">Canvas $220</option>
<option value="High Def Metal Print $575">High Def Metal Print $575</option>");
}

if (condition.o1.options = 3)
{
document.write("<option value="Print $170">Print $170</option>
<option value="Print on Gatorboard $230">Print on Gatorboard $230</option>
<option value="Canvas $325">Canvas $325</option>
<option value="High Def Metal Print $725">High Def Metal Print $725</option>");
}

if (condition.o1.options = 4)
{
document.write("<option value="Print $215">Print $215</option>
<option value="Print on Gatorboard $300">Print on Gatorboard $300</option>
<option value="Canvas $430">Canvas $430</option>
<option value="High Def Metal Print $830">High Def Metal Print $830</option>");
}

if (condition.o1.options = 5)
{
document.write("<option value="Print $250">Print $250</option>
<option value="Print on Gatorboard $340">Print on Gatorboard $340</option>
<option value="Canvas $535">Canvas $535</option>
<option value="High Def Metal Print $1">High Def Metal Print $1</option>");
}
</script></select></td>
<td>Trim and Finish:<select name="o3">

<script type="text/javascript">
if (condition.o2.options = 1 || condition.o2.options = 4 || condition.o2.options = 7 ||
condition.o2.options = 11 || condition.o2.options = 15 || condition.o2.options = 19)
{
document.write("<option value="None">None</option>");
}

if (condition.o2.options = 0 || condition.o2.options = 3 || condition.o2.options = 6 ||
condition.o2.options = 10 || condition.o2.options = 14 || condition.o2.options = 18)
{
document.write("<option value="1/4 Inch White Trim">1/4 Inch White Trim</option>
<option value="1/4 Inch Black Trim">1/4 Inch Black Trim</option>");
}

if (condition.o2.options = 2 || condition.o2.options = 5 || condition.o2.options = 8 ||
condition.o2.options = 12 || condition.o2.options = 16 || condition.o2.options = 20)
{
document.write("<option value="White Sides">White Sides</option>
<option value="Black Sides">Black Sides</option>
<option value="Stretched Sides">Stretched Sides</option>");
}

if (condition.o2.options = 9 || condition.o2.options = 13 || condition.o2.options = 17 ||
condition.o2.options = 21)
{
document.write("<option value="Silver Recessed Frame">Silver Recessed Frame</option>
<option value="Silver Frame to Edge">Silver Frame to Edge</option>
<option value="Black Recessed Frame">Black Recessed Frame</option>
<option value="Black Frame to Edge">Black Frame to Edge</option>
<option value="Pewter Recessed Frame">Pewter Recessed Frame</option>
<option value="Pewter Frame to Edge">Pewter Frame to Edge</option>");
}
</script></select></td>
<td><input type="image" src="http://www.e-junkie.com/ej/ej_add_to_cart.gif"
border="0" alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this.parentNode);"/>
</form></td></tr></table></left>

This should be a simple fix.. I hope.

JS:
Code:

//-- This is a really awful script and if it could be re-written by someone who knows what they're doing that would be incredible.


window.addEvent('domready', function() { //new event wooooo
  // -- vertical2
  var myVerticalSlide = new Fx.Slide('vertical_slide');  //declaring the variable with the FXSlide property
  
  var toggleThis = $('v_toggle'); //toggle variable
  
  myVerticalSlide.hide();  //hides the variable off the bat.

    toggleThis.addEvent('click', function(event){  // uses the type 'click' the id on the link, giving it the following function
    event.stop(); //Prevents browser from following the link and instead initiates the next line
    myVerticalSlide.toggle(); //Togles the div declared in the variable VerticalSlide
  });
});

HTML:
Code:

    <div>
     <a id="v_toggle" href="#">Question 1</a>
     <div id="vertical_slide">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </div>
    </div> 
     
     <div>
     <a id="v_toggle" href="#">Question 2</a>
      <div id="vertical_slide">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
     </div>

I'm new to JS (and any programming language, i just know HTML, CSS/SASS) . I tried to make the code as stupid-simple as I could, as you can see with all the comments.

The problem is when you click on question1, all the answers show. I just want the answer below the question to show.

How can I write this to just show one answer at a time. Any explanation would be a huge help or a point in the right direction would be great help. I'd love to learn how to fix this as opposed to just copying pasting :\

I have created a page where everytime the page loads a popup window opens and diplays a message. This is done through javascripting. After the message is read the reader can close the window. The popup page is an actual html page and not a dialog box. This is fine except, everytime the visitor comes back to that page the window pops up. Is there a way to hve it where I can insert a link or button that says "Don't show message again" . That way it will pop up the first time but if the reader clicks that "Don't show message again" it will not appear again. Maybe set some sort of cookie. HELP ME PLEASE

This script works great for populating predefined lists of data into a textarea as selected by the user using a radio button:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Populate Textarea Based on Radio Button Selection</title>

<script>
text = new Array()
text[0] = Array('Hotel', 'Motel'); 
text[1] = Array('Couch', 'Bed', 'Chair'); 
function populate(r,f){
t=-1;
for(var i=0;i<f.elements[r].length;i++){
if (f.elements[r][i].checked){
var t=i;
}
}
if(t>-1){
    f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n");
}
}
</script>

</head>
<body>
<form name="frm">

 <input type="radio" name="test" value="0" onClick="populate(this.name,this.form)">

 <input type="radio" name="test" value="1" onClick="populate(this.name,this.form)">
 
 <textarea name="thefirsttextarea"></textarea>
<input type="submit" value="submit" />
</form>

</body>
</html>

However, I've coded all night only to come across an issue. I have an inline page style which calls/includes multiple pages. Two of these pages require this feature. It seems one is canceling out the other. Here's an example:

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=utf-8" />
<title>Populate Multiple Textareas Based on Radio Button Selection</title>

<script>
text = new Array()
text[0] = Array('Hotel', 'Motel'); 
text[1] = Array('Couch', 'Bed', 'Chair'); 
function populate(r,f){
t=-1;
for(var i=0;i<f.elements[r].length;i++){
if (f.elements[r][i].checked){
var t=i;
}
}
if(t>-1){
    f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n");
}
}
</script>

<script>
textt = new Array()
<!--default-->
text[0] = Array('Ham', 'Turkey', 'Chicken'); 

<!--all-->
text[1] = Array('Beer', 'Soda', 'Water');

<!--johnny havana-->
text[2] = Array('Milk', 'Cheese', 'Butter');


function populate(r,f){
t=-1;
for(var i=0;i<f.elements[r].length;i++){
if (f.elements[r][i].checked){
var t=i;
}
}
if(t>-1){
    f.SECONDFORM.value= text[t].toString().replace(/,/gi,"\n");
}
}
</script>

</head>
<body>
<form name="form">

 <input type="radio" name="test" value="0" onClick="populate(this.name,this.form)">

 <input type="radio" name="test" value="1" onClick="populate(this.name,this.form)">
 
 <textarea name="thefirsttextarea"></textarea>
<input type="submit" value="submit" />
</form>

<form name="anotherform">

 <input type="radio" name="anothertest" value="0" onClick="populate(this.name,this.form)">

 <input type="radio" name="anothertest" value="1" onClick="populate(this.name,this.form)">
 
 <textarea name="SECONDFORM"></textarea>
<input type="submit" value="submit" />
</form>
</body>
</html>

With the above code only the second set of radio buttons work. What I need help with is a way to have two independent sets of arrays the correspond correctly with the textareas - One set that populates textarea 1 and the other that populates textarea 2.

Greetings!

Let me start by first stating that I've never really coded Javascript before in my life. Having said that, I'm not an idiot and I can generally pick up on things relatively quickly .

So, now to the point.

I'm currently creating a site in which I've incorporated Protoswitcher (http://cssrevolt.com/upload/files/pr...her/index.html). From what I can tell, it's a relatively simple script.

Now the catch is that I wanted to have more than one switcher on my site. And this is where I get stuck.

What I did initially was to basically copy the JS file (protoswitcher.js) and rename it something else (userbar.js, for example). I then changed the various places in the script which were previously for "var ProtoSwitcher" to "var UserBar", etc.

I managed to get it all to work fine. Both the boxes show up, and they both work as they should (clicking on them changes select bits of CSS).

Now the problem I'm having is that the original protoswitcher uses cookies to remember a persons preferences.

I cannot for the life of me figure out how to get the "new" protoswitcher (userbar.js) to work with cookies as well.

Any help would be much appreciated, and I'm sure I can give you a few dollars for your time .

Please let me know if I haven't made sense.

TLDL: I want to be able to use several protoswitchers with working cookies. I don't know how.

Hello,
I am trying to do an image swap when hovering over "TEXT" links.
For instance, I would like to first have a "mainpic" in a div that would be replaced by either image 1,2 or 3 (depending on if you are hovering over"text link 1,2 or 3).

I would use normal rollover "image" swaps, but would prefer to have the "trigger" to be "text" (for SEO reasons).

I am just getting familiar with javascript, but do not even know where to begin!
I have read multiple forum entries throught google, but could not find any where I could have "multiple" text links.

I would so much appreciate it if anyone could please point me in a direction. Sincerely, Buffmin

Hello,

I'm using "Cut & Paste Multiple Dynamic Combo Boxes" script. I want to configure it, so at first only 1st combo box is visible and the rest are hidden and only populate based on the selections. Also, when the last parameter (from the 5th combo box) was selected, I need to show the table with the search results based on the all selected parameters.

Here is what I have so far:
Code:

<script language="JavaScript" type="text/javascript">
<!--

/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/

// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected


// first combo box

	data_1 = new Option("1", "$");

// second combo box

	data_1_1 = new Option("11", "-");
	data_1_2 = new Option("12", "-");
	data_1_3 = new Option("13", "-");

// third combo box

	data_1_1_1 = new Option("111", "*");
	data_1_2_1 = new Option("121", "*");
	data_1_3_1 = new Option("131", "*");

// fourth combo box

	data_1_1_1_1 = new Option("1111","%")
	data_1_1_1_2 = new Option("1112","%")
	data_1_2_1_1 = new Option("1211","%")
	data_1_3_1_1 = new Option("1311","%")
	data_1_3_1_2 = new Option("1312","%")
	data_1_3_1_3 = new Option("1313","%")

// fifth combo box

	data_1_1_1_1_1 = new Option("11111","%")
	data_1_1_1_1_2 = new Option("11112","%")
	data_1_1_1_2_1 = new Option("11121","%")
	data_1_1_1_2_2 = new Option("11122","%")
	data_1_1_1_2_3 = new Option("11123","%")
	data_1_1_1_2_4 = new Option("11124","%")
	data_1_2_1_1_1 = new Option("12111","%")
	data_1_3_1_1_1 = new Option("13111","%")
	data_1_3_1_2_1 = new Option("13121","%")
	data_1_3_1_2_2 = new Option("13122","%")
	data_1_3_1_2_3 = new Option("13123","%")
	data_1_3_1_2_4 = new Option("13124","%")
	data_1_3_1_2_5 = new Option("13125","%")
	data_1_3_1_3_1 = new Option("13131","%")
	data_1_3_1_3_2 = new Option("13132","%")

// other parameters

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0


function change(currentbox) {
	numb = currentbox.id.split("_");
	currentbox = numb[1];

    i=parseInt(currentbox)+1

// I empty all combo boxes following the current one

    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
         son = document.getElementById("combo_"+i);
	     // I empty all options except the first one (it isn't allowed)
	     for (m=son.options.length-1;m>0;m--) son.options[m]=null;
	     // I reset the first option
	     son.options[0]=new Option(displaywhenempty,valuewhenempty)
	     i=i+1
    }


// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

    stringa='data'
    i=0
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
           eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
           if (i==currentbox) break;
           i=i+1
    }


// filling the "son" combo (if exists)

    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
       (document.getElementById("combo_"+following)!=null)) {
       son = document.getElementById("combo_"+following);
       stringa=stringa+"_"
       i=0
       while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

       // if there are no options, I empty the first option of the "son" combo
	   // otherwise I put "-select-" in it

	   	  if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
	   	      if (eval("typeof("+stringa+"1)=='undefined'"))
	   	         eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
	   	      else
	             eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
	      else
              eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
	      i=i+1
	   }
       //son.focus()
       i=1
       combostatus=''
       cstatus=stringa.split("_")
       while (cstatus[i]!=null) {
          combostatus=combostatus+cstatus[i]
          i=i+1
          }
       return combostatus;
    }
}

//-->
</script>

<form>
<table style="width: 49%">
				<tr>
					<td style="width: 200px">Option 1:</td>
					<td style="width: 213px">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
	<option value="none">-select-</option>
	<option value="1">1</option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 2:</td>
					<td style="width: 213px">
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 3:</td>
					<td style="width: 213px">
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 4:</td>
					<td style="width: 213px">
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 5:</td>
					<td style="width: 213px">
<select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
			</table></form>

This script is used in my html page and I don't have a database to choose from. So, I wonder if it's possible to make all these modifications with only html and JavaScript. Any help will be appreciated.

Thanks in advance.

First I have a performance question.

Which would be better:

Load a full table from the database first and display a portion with a "Show More..." link

--OR--

Load just the small portion with a "Show More..." link and then do an ajax call to load the rest of the table?

And secondly, I sort of know how to do the second option but it can get a bit complicated. You need to know the offset of which to search a database to load the rest. and the "append" that to the table.

If I do the first option, it seems a bit more easier but I can't seem to come up with the logic. How would I truncate a table showing only a few entries and have the rest of the table hidden while having a link that shows the rest of the table when clicked? Thanks in advance.

hi all,

im on a really tight deadline with this and have been strugglign all day.
(i know nothing about JS!)

here's my code:

Code:

<script language="Javascript">
var allHTMLTags = new Array();
function fadeIn(SRC) {
var allHTMLTags=document.getElementsByTagName("*");
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className.indexOf(",") !== -1) 
{
allHTMLTags[i].style.opacity='1';
}
}
}

function fadeOut(SRC) {
var allHTMLTags=document.getElementsByTagName("*");
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className.indexOf(",") !== -1) 
{
allHTMLTags[i].style.opacity='0.5';
}
}
}
</script>


<li onMouseover="fadeIn(foo)" onmouseout="fadeOut(foo)">

<div class="foo" style="opacity: 0.5;">
test 1
</div>

<div class="foo bar" style="opacity: 0.5;">
test 2
</div>

The idea of the above, is that when you hover over the <li> all of the divs with a class CONTAINING "foo" are given an opacity of 1.
the problem is, the above script only seems to work with numbers?!
E.G - class="1 2" works fine.
problem is i need to use words not numbers for the classes.

clearly my code is rubbish, i've bodged it together from bits and pieces of different forums.

PLEASE can somebody help?
the end result needs to go through and find all divs with a class CONTAINING the term specified in the <li>
then give them an opacity of 1, then on mouseOut return the opacity to 0.5

im sure this is newb stuff, but thanks in advance for any help you can give!

Hello,
recently I have been to many government websites where I have noticed that the programmer has used window.open() method in JavaScript to link to different pages instead of using <a> tags!

I was just getting curious to know whether it is normal or has it been used due to security concerns(if any, I don't know)?

Any comments?

Hello, I run a online gaming website, and I'm having problems with certain websites iframing our games.

Actually I'm ok with iframing, as long as they include the banner ad located just beneath our games. But often times unscrupulous webmasters will iframe only the game, preventing us from generating any revenue from the banner ad (and costing us additional bandwidth charges).

I'm hoping to find a way to detect the dimensions of the iframe, so that I may dynamically resize the game, in order to include the banner ad within the iframe. Does anybody know how to extract the "height" and "width" attribute values from an <iframe> tag sitting on a different site?

Regards,
Steve

Hi all, I'm having a bit of a problem..

I need to disable the submit button on body onload, and i need to re-enable it when "i agree" is checked.

the problem is, it wont do this..

it literally stays disabled, even after check mark..

code:

Code:

<html>
<head><title>Metal Detecting</title></head>
<body onload="disable()" oncontextmenu="return false;">
<script>
function disable(){
if(document.forms.test.agree.checked == false){
document.forms.test.s1.disabled = true;
}
}

function enable(){
if(document.forms.test.agree.checked == true){
document.forms.test.s1.disabled = false;
}
}
function checkCheckBox(f) {
  if (f.agree.checked == false) {
    alert('You MUST agree to the terms by checking the box above.');
    return false;
  }else{
    enable()
    return true;
    }
}
var max=255;
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit){ // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
}else{
countfield.value = maxlimit - field.value.length;
}
}
function submitonce(theform){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
//screen thru every element in the form, and hunt down "submit" and "reset"
for (i=0;i<theform.length;i++){
var tempobj=theform.elements[i]
if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
//disable em
tempobj.disabled=true
}
}
}
function checkdata(which) {
  var pass=true;
var t1 = document.forms.test;
  for (i=0;i<which.length;i++) {
    var tempobj=which.elements[i];
    if (tempobj.name.substring(0,8)=="required") {
      if (((tempobj.type=="text"||tempobj.type=="textarea")&&
          tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&
          tempobj.selectedIndex==0)) {
        pass=false;
        break;
      }
    }
  }
  if (!pass) {
    shortFieldName=tempobj.name.substring(8,30).toUpperCase();
    alert("The "+shortFieldName+" field is a required field.");
    return false;
  } else {
  return true;
  }
}
function emailCheck (emailStr) {

/* The following variable tells the rest of the function whether or not
to verify that the address ends in a two-letter country or well-known
TLD.  1 means check it, 0 means don't. */

var checkTLD=1;

/* The following is the list of known TLDs that an e-mail address must end with. */

var knownDomsPat=/^(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum)$/;

/* The following pattern is used to check if the entered e-mail address
fits the user@domain format.  It also is used to separate the username
from the domain. */

var emailPat=/^(.+)@(.+)$/;

/* The following string represents the pattern for matching all special
characters.  We don't want to allow special characters in the address. 
These characters include ( ) < > @ , ; : \ " . [ ] */

var specialChars="\\(\\)><@,;:\\\\\\\"\\.\\[\\]";

/* The following string represents the range of characters allowed in a 
username or domainname.  It really states which chars aren't allowed.*/

var validChars="\[^\\s" + specialChars + "\]";

/* The following pattern applies if the "user" is a quoted string (in
which case, there are no rules about which characters are allowed
and which aren't; anything goes).  E.g. "jiminy cricket"@disney.com
is a legal e-mail address. */

var quotedUser="(\"[^\"]*\")";

/* The following pattern applies for domains that are IP addresses,
rather than symbolic names.  E.g. joe@[123.124.233.4] is a legal
e-mail address. NOTE: The square brackets are required. */

var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/;

/* The following string represents an atom (basically a series of non-special characters.) */

var atom=validChars + '+';

/* The following string represents one word in the typical username.
For example, in john.doe@somewhere.com, john and doe are words.
Basically, a word is either an atom or quoted string. */

var word="(" + atom + "|" + quotedUser + ")";

// The following pattern describes the structure of the user

var userPat=new RegExp("^" + word + "(\\." + word + ")*$");

/* The following pattern describes the structure of a normal symbolic
domain, as opposed to ipDomainPat, shown above. */

var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");

/* Finally, let's start trying to figure out if the supplied address is valid. */

/* Begin with the coarse pattern to simply break up user@domain into
different pieces that are easy to analyze. */

var matchArray=emailStr.match(emailPat);

if (matchArray==null) {

/* Too many/few @'s or something; basically, this address doesn't
even fit the general mould of a valid e-mail address. */

alert("Email address seems incorrect (don't forget to add an @ and a . to your email address!)");
return false;
}
var user=matchArray[1];
var domain=matchArray[2];

// Start by checking that only basic ASCII characters are in the strings (0-127).

for (i=0; i<user.length; i++) {
if (user.charCodeAt(i)>127) {
alert("Ths username contains invalid characters.");
return false;
   }
}
for (i=0; i<domain.length; i++) {
if (domain.charCodeAt(i)>127) {
alert("Ths domain name contains invalid characters.");
return false;
   }
}

// See if "user" is valid 

if (user.match(userPat)==null) {

// user is not valid

alert("The username doesn't seem to be valid.");
return false;
}

/* if the e-mail address is at an IP address (as opposed to a symbolic
host name) make sure the IP address is valid. */

var IPArray=domain.match(ipDomainPat);
if (IPArray!=null) {

// this is an IP address

for (var i=1;i<=4;i++) {
if (IPArray[i]>255) {
alert("Destination IP address is invalid!");
return false;
   }
}
return true;
}

// Domain is symbolic name.  Check if it's valid.
 
var atomPat=new RegExp("^" + atom + "$");
var domArr=domain.split(".");
var len=domArr.length;
for (i=0;i<len;i++) {
if (domArr[i].search(atomPat)==-1) {
alert("The domain name does not seem to be valid.");
return false;
   }
}

/* domain name seems valid, but now make sure that it ends in a
known top-level domain (like com, edu, gov) or a two-letter word,
representing country (uk, nl), and that there's a hostname preceding 
the domain or country. */

if (checkTLD && domArr[domArr.length-1].length!=2 && 
domArr[domArr.length-1].search(knownDomsPat)==-1) {
alert("The address must end in a well-known domain or two letter " + "country.");
return false;
}

// Make sure there's a host name preceding the domain.

if (len<2) {
alert("This address is missing a hostname!");
return false;
}

// If we've gotten this far, everything's valid!
return true;
}
</script>
Please contact us!<br><br>
*Please note you can submit the form ONLY once. Any double form submissions will be deleted.<br>
<form name="test" id="test" method="POST" onsubmit="return checkdata(this), emailCheck(this.email.value), checkCheckBox(this)" action="send.php">
<div id = "div01" style="width: 100; height: 25;">
  Firstname: <input name="requiredfirstname" id="firstname" type="text" />
  Lastname: <input name="requiredlastname" id="lastname" type="text" />
  Email: <input name="requiredemail" id="email" type="text" /><br /><br />
</div>
<H4>Your statement: </H4>
  <textarea onKeyDown="textCounter(this.form.statement,this.form.counter,max);" onKeyUp="textCounter(this.form.statement,this.form.counter,max);" name="requiredstatement" id="statement" rows="15" cols="40"></textarea><br />
 Characters left: <input readonly="readonly" value="255" size=3 maxlength=3 type="text" name="counter" id="counter"><br/><br />
<textarea name="license" cols="40" rows="15" id="license">Blah!</textarea><br/>
<input name="agree" id="agree" type="checkbox"> I have read & agree to the above<br/>
  <input name="s1" id="s1" value="Submit" type="submit" />&nbsp;<input type="reset" name="rset" value="Reset" /><br/>
</form>
</body>
</html>

if its possible to make it do both in 1 function, please show an example. if you have to use 2 functions, then also show me an example.

ANY help is GREATLY appreciated!

Hello,

I am using this code

Code:

<form style="display: none;" name="num1form" id="num1form" action="">
<input type="image" name="1" id="num1" value="1" src="imgl/img_first_01.png" onclick="document.forms[0].action='javascript:ChangeNum1();'"/>
</form>

What the above code does is change the action state, it allows me to have multiple image inputs which is great as I can define various inputs with different IDs.

However, this is used for one section of the page I happen to have another <form> with basically the same code but it's using num2 values, I'm not sure why but I can only using one of these Code:

onclick="document.forms[0].action='javascript:ChangeNum1();'"

at a time, for one form only.

Is there anyone able to help me divide this, or make these onClick actions unique so they can be used in more than 1 form?

Thanks,
Keenan

I have written a little bit of javascript to make a DIV appear like a pop-up window when the user clicks on a link, as follows:

in the HTML:

<a href="javascript:showInfo('You clicked me!')">click me</a>

in the javascript: Code:

infoDiv = 0;

function showInfo(html)
{
  if (infoDiv == 0)  //Make sure more than one can't be created at a time.
    {   
      infoDiv = document.createElement("div");

      infoDiv.setAttribute("class", "c3-info");

      infoDiv.innerHTML = "<div class='c3-info-content'>" + html + "</div>" + "<div class='c3-info-close-bot'><a href='javascript:hideInfo()'>[close this message]</a></div>";

      document.body.appendChild(infoDiv);
    }
}

function hideInfo()
{
  if (infoDiv != 0)
    {
      document.body.removeChild(infoDiv);
      infoDiv = 0;
    }
}

I then have a CSS fle which I use to format the DIV.

I currently use the CSS to make the div position absolute and make appear in the middle of the screen, when the scroll-bars are all the way up and left.

This works well, but I want to set the position property of the DIV in its style attribute so that it appears at the point where the mouse was clicked (i.e. over the top of the hyperlink).

How do I get the mouse x and y or the click-location? And do I have to compensate for the scrollbar position?

Can anyone tell me what code I can add to a webform textarea box that will replace all instances of "\n" with "\\n" when a user pastes in JavaScript like this:

<script language="javascript">
var message = '**\n\n W A I T !\n\n CLICK CANCEL\n TO STAY ON THE CURRENT PAGE.\n\n I HAVE SOMETHING FOR YOU!\n\n**';
var page = 'http://google.com';
</script>
<script language="javascript" src="http://siteactor.com/test.js"></script>

The form is on a .php page. The form posts via a .cgi script. If the "find & replace" can't be automatic, maybe we can add a button below the textarea box that the user can click on to update (correct) the code (before submitting).

I am not a programmer... so any specifics you can give me will be much appreciated. Thank you.