?
Solved

Catch JavaScript empty form on image swap input

Posted on 2011-02-15
7
Medium Priority
?
976 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: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 
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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses

777 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