SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Location
    Romania
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two versions of the same function work different

    I have a form like the one below:
    Code:
     
    <form action="mailto:a@b.c" method="post" name="entryform" onsubmit="javascript:return validate(entryform)" >
    <input type="text" name="yourname" />
    <!-- rest of the form here inlcuding submit field -->
    </form>
    and the javascript function accordingly:

    Code:
     
    <script language="Javascript">
    	function validate(someform) {
    		var result=true;
    		if (someform.yourname.value == "") {
    			alert("Your name, please!");
    			someform.yourname.focus();
    			return false
    		}
                    return result;
    </script>
    It works fine with the function above, but if I use document inside the function, like in the example below, it doesn't work and I would ask if someone has idea why is that (I mean the function doeesn't valide the form, in case when yourname field is left blank in the form.)


    Code:
     
    <script language="Javascript">
    	function validate(someform) {
    		var result=true;
    		if (document.someform.yourname.value == "") {
    			alert("Your name, please!");
    			document.someform.yourname.focus();
    			return false
                    return result;
    		}
    </script>

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, first let's look at what you pass to the function...

    onsubmit="javascript:return validate(entryform)"

    By not sending the form name as a string, you pass it as a referece (BTW, this type of reference ONLY works in IE and is typically a no-no). With that said, understand you are passing it as a reference to the form (identical to document.entryform or document.forms['entryform'])

    Your variable someform recieves that reference. Your first version of the function says...
    Code:
    if (someform.yourname.value == "") {
    Well, when this line is read by the code intepreter, it sees this
    Code:
    if (document.entryform.yourname.value == "") {
    Looks good right? Now on to the 2nd version. Remember how I said above that entryform is the same as the more appropriate document.entryform? Well, same is true here. So this time around this line of code
    Code:
    if (document.someform.yourname.value == "") {
    is read by the interpreter like this
    Code:
    if (document.document.entryform.yourname.value == "") {
    which I'm sure you know is an invalid reference. I'd like to note that you can pass the form reference to the function with the this keyword. this when used inside event properties obtains a reference to the object to which the event is attached. In this case, we are talking about the onsubmit event which is attached to 'entryform'. That code looks like this...
    Code:
    <form action="mailto:a@b.c" method="post" name="entryform" onsubmit="return validate(this)" >
    You will notice that I removed the javascript: pseudo-protocol, as it is unecessary inside event properties.

    One more thing, if you need good form validation, check out my validation script, fValidate
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Location
    Romania
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the great explanation, things are much clearer now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •