Solved

Catch JavaScript empty form on image swap input

Posted on 2011-02-15
7
973 Views
Last Modified: 2012-05-11
I canot validate the form correctly. The function validateForm(form) does not catch the empty input. If I remove the swap image code, it works. But I prefer the swap.

I tried multiple forms on the same page but that didn't work.

Show me how to modify this so it works to valiidate the form correctly but maintain the image swap feature. Please explain your suggestion in relation to my code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<TITLE>News Test</TITLE>
<HEAD>
<SCRIPT language="JavaScript">
function validateForm(form) {

      //////////////////////////////////
   if (form.NewStoryButton.value == "") {
      alert("You have no new stories.");
      return false
   }
   


   //////////////////////////////////
   if (form.EditListButton.value == "") {
      alert("No stories to edit.");
      return false
   }
   
   

   //////////////////////////////////
   if (form.AddImageButton.value == "") {
      alert("Not yet approved.");
      return false
   }   
      

   return true
}

</SCRIPT>

<SCRIPT type=text/javascript src="/ateam/staff/newsroom/js/swapimage.js"></SCRIPT>

</HEAD>

<body>

<form action="newsroom.cfm" method="post" onSubmit="return validateForm(this)">

<input name="NewStoryButton" id="Image1" type="image" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','1/newsroom_files/new_story_over.png',1)"
src="1/newsroom_files/new_story_black.png" title="New story" width="100" height="20" value="">

<input name="EditListButton" id="Image2" type="image" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','1/newsroom_files/edit_over.png',2)"
src="1/newsroom_files/edit_black.png" title="Edit Story" width="100" height="20" value="">

<input name="AddImageButton" id="image3" type="image" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','1/newsroom_files/AddImage_over.png',3)"
src="1/newsroom_files/AddImage_black.png" title="Add Photo" width="100" height="20" value="">

</form>

</BODY>
</HTML>

Open in new window

0
Comment
Question by:Qsorb
  • 5
  • 2
7 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34903745
need to check what MM_swapImage() function does.

Can you post its contents?
0
 

Author Comment

by:Qsorb
ID: 34904566
Sure. Here's the swapimage.js code:
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

Open in new window

0
 

Author Comment

by:Qsorb
ID: 34910303
Really need to get this completed so can any expert help me here?

Using a basic form works fine it's just when using the mouseover which caused the form output to include a .x and .y that seems to create the problem.

So I need either a workaround for the JavaScript or the form and MouseOver. If it cannot be done,  and you know for  sure, just let me know so I can move on.
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 34913135
first you need to simplify your image swap logic. Not sure why it is made so complex.

Then plugin your form validation logic to check if it works fine

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<TITLE>News Test</TITLE>
<HEAD>
<SCRIPT language="JavaScript">

var originalImageArray = new Array();
originalImageArray["image1"] = "1/newsroom_files/new_story_black.png";
originalImageArray["image2"] = "1/newsroom_files/edit_black.png";
originalImageArray["image3"] = "1/newsroom_files/AddImage_black.png";

var swapImageArray = new Array();
swapImageArray["image1"] = "1/newsroom_files/new_story_over.png";
swapImageArray["image2"] = "1/newsroom_files/edit_over.png";
swapImageArray["image3"] = "1/newsroom_files/AddImage_over.png";

function restoreImage(thisObj)
{
	thisObj.setAttribute("src", originalImageArray[thisObj.getAttribute("id")]);
}

function swapImage(thisObj)
{
	thisObj.setAttribute("src", swapImageArray[thisObj.getAttribute("id")]);
}



</SCRIPT>
</HEAD>

<body>

<form action="newsroom.cfm" method="post" onSubmit="return validateForm(this)">

<input id="Image1" type="image" onMouseOut="restoreImage(this)" onMouseOver="swapImage(this)"
src="1/newsroom_files/new_story_black.png" title="New story" width="100" height="20" value="">

<input id="Image2" type="image" onMouseOut="restoreImage(this) onMouseOver="swapImage(this)"
src="1/newsroom_files/edit_black.png" title="Edit Story" width="100" height="20" value="">

<input id="image3" type="image" onMouseOut="restoreImage(this) onMouseOver="swapImage(this)"
src="1/newsroom_files/AddImage_black.png" title="Add Photo" width="100" height="20" value="">

</form>

</BODY>
</HTML>

Open in new window

0
 

Author Comment

by:Qsorb
ID: 34921084
gurvinder372,

I plugged in your suggestion on a separate page. It didn't work. This is what I found:

After correcting the typo in the missing ending double quotes on images 1 and 2, only the last image swap (over) would work, getting a missing over image on 1 and 2.

I made certain the paths to the images, in all areas, was correct by copying the image and path directly into the browser. The images displayed, all of them. But now during mouseover. So, it seems something somewhere is keeping the mouseover on the first two sets of images from displaying (getting as missing image over error).

But the  main problem is as it was before. As I mentioned before, "Using a basic form works fine it's just when using the mouseover which caused the form output to include a .x and .y that seems to create the problem."

validateForm does not work at all using an image in the form. Again, I assume it's the .x and .y in the form output causing it. Adding those values to catch the form error does not work. And that's the main reason why I came here.

0
 

Accepted Solution

by:
Qsorb earned 0 total points
ID: 34921532
All I really want to do is let the image rollover work but also inform the user if they have (1)no stories, (2)Nothing to edit, or (3)No image to add or update.

It's a bit  clumsy but by simply checking to see if the user has any saved stories I can conditionally show a rollover image, or a form as used previously. This works for me and allows for everything I want.

I'll wait for any suggestions or improvemetns on this idea to see if I can award any points or how much.


<span style="position:relative;right:35px;top:-8px">
<cfif NewsInfo.RecordCount eq 0>
<img  id="Image3" style="cursor:hand" onMouseOver="MM_swapImage('Image3','','1/newsroom_files/AddImage_over_tab.png',3)" src="1/newsroom_files/AddImage_black_tab.png" onClick="alert('You have no saved stories.')">
<cfelse>
<form name="List" action="newsroom.htm" method="post" >
<input id="Image3" type="image" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','1/newsroom_files/AddImage_over_tab.png',3)"
src="1/newsroom_files/AddImage_black_tab.png" title="Add or change an image." alt="AddImage" width="100" height="20">
<input type="hidden" name="AddImageButton">
</form>

Open in new window

0
 

Author Closing Comment

by:Qsorb
ID: 34959276
Suggestions didn't work or help. In the meantime I found serveral ways to accomplish this so will use what I found.

Also believe simply adding hidden input would work to avoid the xy coordinate problem and allow the form to be validated and keep the image rollover.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question