Solved

Catch JavaScript empty form on image swap input

Posted on 2011-02-15
7
969 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
Comment Utility
need to check what MM_swapImage() function does.

Can you post its contents?
0
 

Author Comment

by:Qsorb
Comment Utility
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
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

728 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now