Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old September 12th, 2004, 06:15 AM
Friend of Wrox
 
Join Date: Sep 2004
Location: Tehran, Tehran, Iran.
Posts: 103
Thanks: 0
Thanked 0 Times in 0 Posts
Default problem with input type="image"

hi everyone
well the problem is while using image instead of button or submit input types (for my own reasons)and trying to validate some fields deciding whether to submit the form or not. The image tag sends it anyway.
I call a function to validate my fields from the onclick field in my image input tag, but it submits the form even if I leave the body of the validate function empty! how can I stop it from submiting the form?
please help
.
.
<script language="javascript">
<!--
function validate(){
if(document.form1.username=="")
 alert("empty field!");
else document.form1.submit();
}
-->
</script>
.
.
.
<form name="form1" method="post" action="/LearningJSTL-Project-context-root/Do.do;jsessionid=c6646544231ccb316b5ef1b74feba23ce d8cb5de2bbf" enctype="multipart/form-data">
<div align="center">
<input type="image" name="y" src="x" onclick="validate()"><br>
<input type="text" name="userName" value=""><br>
Reply With Quote
  #2 (permalink)  
Old September 12th, 2004, 06:33 AM
Imar's Avatar
Wrox Author
Points: 72,055, Level: 100
Points: 72,055, Level: 100 Points: 72,055, Level: 100 Points: 72,055, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,086
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Hi there,

To stop the form from being submitted, you need to change the Validate function so it returns false:

if(document.form1.username=="")
{
  alert("empty field!");
  return false;
}
else
{
  return true;
}

To make this work, you need to add return to the onclick handler as well:

<input type="image" name="y" src="x" onclick="return validate();">

You don't need document.form1.submit();, because an input type="image" will cause the form to be submitted automatically when you return true from the click handler.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Reply With Quote
  #3 (permalink)  
Old September 12th, 2004, 06:47 AM
Friend of Wrox
 
Join Date: Sep 2004
Location: Tehran, Tehran, Iran.
Posts: 103
Thanks: 0
Thanked 0 Times in 0 Posts
Default


Thank you very much Imar.
do you know any ebook in which such kind of things are covered .
in my complete references SAMS' "pure javascript" and "javascript Bible Gold" by Danny Goodman I couldn't even find the Image's onclick property

Reply With Quote
  #4 (permalink)  
Old September 12th, 2004, 06:48 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

In my opinion the call to validate should be in the form's onsubmit handler, you don't need to worry about onclick at all. That way it will be called whenever the form is submitted, except if it is submitted via code.

--

Joe
Reply With Quote
  #5 (permalink)  
Old September 12th, 2004, 01:42 PM
Imar's Avatar
Wrox Author
Points: 72,055, Level: 100
Points: 72,055, Level: 100 Points: 72,055, Level: 100 Points: 72,055, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,086
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

You can try http://www.w3schools.com/js/default.asp or http://www.javascripts.com. I also think that Beginning JavaScript (http://www.wrox.com/WileyCDA/WroxTit...764555871.html) discusses this.

I fully agree with Joe's comment. Adding the validation to the onsubmit is much cleaner, as you'll catch much more post attempts than adding the code to each button or image. You still need to use

return Validate()

though.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Reply With Quote
  #6 (permalink)  
Old September 14th, 2004, 12:21 AM
Friend of Wrox
 
Join Date: Sep 2004
Location: Tehran, Tehran, Iran.
Posts: 103
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks for the links, but the onsubmit is not a good idea for 2 reasons:

1.I might(and I do)need different validations depending on which image button is clicked.
2.wherever I use this.form.submit() function in href or a button handler or anywhere else, after calling it the onsubmit of the form fails to stop the form being submitted (I mean returning false won't work).It only works when you're submiting via a submit button or an image button --> <input type="submit">

Here's the code that after alerting "validation done!" submits the form anyway:

function validate(){
alert("validation done!");
return false;
}

<form name="form1" method="post" enctype="multipart/form-data" onsubmit="return validate();">

<a href="javascript:document.form1.submit(document.fo rm1);" >submit</a>

Reply With Quote
  #7 (permalink)  
Old September 14th, 2004, 03:31 PM
Imar's Avatar
Wrox Author
Points: 72,055, Level: 100
Points: 72,055, Level: 100 Points: 72,055, Level: 100 Points: 72,055, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,086
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

That is correct. That's why Joe said: "except if it is submitted via code."

The same problem applies when you add the code to individual buttons, though. So, onsubmit will catch more situations that separate onclick handlers.

In the end, what works is what counts. So, if you're more comfortable with adding the code to a click handler, by all means, do so.... ;)

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
input type="image" tgopal Javascript How-To 1 September 22nd, 2005 05:16 AM
input type="image" tgopal Javascript 1 September 22nd, 2005 05:15 AM
Problem with input type image With Anchor tag vinkumrect Javascript How-To 1 July 21st, 2005 08:59 AM
<input type="File"> - Specify File Type and Path gp_mk Classic ASP Basics 2 August 2nd, 2004 03:07 AM



All times are GMT -4. The time now is 05:55 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.