[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Catch JavaScript empty form on image swap input

Posted on 2011-02-15
7
Medium Priority
?
977 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
7 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

650 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