• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 978
  • Last Modified:

Catch JavaScript empty form on image swap input

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
Qsorb
Asked:
Qsorb
  • 5
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
need to check what MM_swapImage() function does.

Can you post its contents?
0
 
QsorbAuthor Commented:
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
 
QsorbAuthor Commented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Gurvinder Pal SinghCommented:
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
 
QsorbAuthor Commented:
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
 
QsorbAuthor Commented:
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
 
QsorbAuthor Commented:
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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

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