Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 274
  • Last Modified:

how to implement a javascript variable

Hi.  I'm new to javascript and have what I think is a simple question.  I wrote a javascript to change an image next to an input field depending on whether the input is changed to null or filled in.  It works find for one input field, but I have thirty input fields and would like to not write thirty functions.  How can I use a variable instead of the document name? My code is below along with the calling snippet.
<SCRIPT Language="JavaScript">
    <!-- 
	
String.prototype.trim = function () {
    return this.replace(/^\s*/, "").replace(/\s*$/, "");
}

    function chgpic(pic1,cname,topv)
    { 

	document.dg.docTitle.value = document.dg.docTitle.value.trim();	
	var j = document.dg.docTitle.value.length;
    	if((j)<1)
        {
			document.getElementById("pic1").src="redlight2.gif";
        	return false;
        }
		else if((j)>1)
		{
			document.getElementById("pic1").src="g1.gif";
			return false;
		}
    }
    -->
</SCRIPT>


calling snippet


 	<tr><cfoutput>
		<td width="160" align="left" valign="top"><font face="Arial,Helvetica" size="-1" color="FF0000"><b><font color="black"><cfif len(trim(frm_item_doc_title))><img 

src="g1.gif" id="pic1" border="0" alt=""><cfelse><img src="redlight2.gif" border="0" 

id="pic1" alt=""></cfif> Title:</font></b></font></td>
		<td width="418" align="left" valign="top"><textarea cols="50" rows="2" onchange="return chgpic(pic1,this.name,this.value);" wrap="physical" 

name="docTitle">#docTitle#</textarea></td>
	</tr>	
	<tr>

Open in new window

0
curtis247
Asked:
curtis247
  • 2
  • 2
  • 2
1 Solution
 
askurat1Commented:
Why would you need to write 30 functions?
0
 
askurat1Commented:
I mean if you wanted to write a variable it would just be:
var pic1

Open in new window

0
 
HainKurtSr. System AnalystCommented:
here it is:

(ask if you do not understand it) basically, we give diffrent id s to images (use one image and control the src element with <cfif>...<cfelse>...</cfif>) like pic1,pic2...

and call

onchange="chgpic('2',this);"

on textarea on change event... pass this (textarea) and number 1 for Pic1, 2 for Pic2 etc...  give it a try...
<SCRIPT Language="JavaScript">
String.prototype.trim = function () {
    return this.replace(/^\s*/, "").replace(/\s*$/, "");
}

function chgpic(imgID,txt){ 
	document.getElementById(imgID).src = (txt.value.trim().length > 0) ? "g1.gif" : "redlight2.gif";
}
</SCRIPT>

...
 	<tr><cfoutput>
		<td>
			<img src="<cfif len(trim(frm_item_doc_title))>g1.gif<cfelse>redlight2.gif</cfif>" id="pic1" border="0" alt=""> Title:
		</td>
		<td width="418" align="left" valign="top">
			<textarea cols="50" rows="2" onchange="chgpic('1',this);" wrap="physical" name="docTitle">#docTitle#</textarea>
		</td>
	</tr>	

 	<tr><cfoutput>
		<td>
			<img src="<cfif len(trim(frm_item_doc_title))>g1.gif<cfelse>redlight2.gif</cfif>" id="pic2" border="0" alt=""> Title:
		</td>
		<td width="418" align="left" valign="top">
			<textarea cols="50" rows="2" onchange="chgpic('2',this);" wrap="physical" name="docTitle">#docTitle#</textarea>
		</td>
	</tr>	
...

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
HainKurtSr. System AnalystCommented:
oops, there is an issue with above code...
either pass full id

onchange="chgpic('pic2',this);"

or change the function as
function chgpic(imgNo,txt){
      document.getElementById("pic"+imgNo).src = (txt.value.trim().length > 0) ? "g1.gif" : "redlight2.gif";
}
0
 
curtis247Author Commented:
If you are sending "pic2" to the function variable imgNo, wouldn't "pic" + imgNo result in picpic2?
0
 
curtis247Author Commented:
HainKurt

I changed your input snippet and it worked.  Thanks for your help and quick response.
onchange="return chgimage('1',this);"


<SCRIPT Language="JavaScript">
    <!-- 
String.prototype.trim = function () {
    return this.replace(/^\s*/, "").replace(/\s*$/, "");
}
function chgimage(imgNo,txt){ 

      document.getElementById("pic"+imgNo).src = (txt.value.trim().length > 0) ? "g1.gif" : "redlight2.gif";
}
    -->
</SCRIPT>

Open in new window

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now