Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Difference in calling javascript in href and onclick of anchor tag.

    Hi

    I am looking for a generic javascript function to identify the form with in which a element exists, thus developer can avoid coding like document.forms[index].submit() - where they are sure, they want the form with in which this element exists is to be submitted. This way when forms are introduced at top level the code can remain unchanged, else every form introduce above in the DOM will result in increasing the index by one.

    The code is given below. While doing so i am stuck with 2 problems
    P1: In the code, you can see i am giving a explicit 'break' in the code. If i don't do so the code seems to be looping. Obviously i am missing some basic.

    P2: I am able to pass 'this' for anchor element by name="xy"
    <a href="#" name="xy" onclick="javascript:doFormSubmit(this);">test</a>

    in its onclick function by which, in the javascript function i move up the DOM.

    While i am unable to do that on the anchor element given below since this function is now on the href attribute.
    <a name="xy1" href="javascript:doFormSubmit(this);">Q test</a>
    Hence the script fails.

    Can someone point me in the right direction.

    I know if i add a id attribute to the element, i can get the element and traverse the DOM. I am not interested in that solution.



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <script language="Javascript">
    functionx doFormSubmit(childElement)
    {
    var parent = childElement.parentNode;
    while(parent != null)
    {
    alert(parent.name);
    if (parent.method)
    {
    // Additional check needs to be done before calling submit.
    parent.submit();
    // P1: Odd enough - this requires a break. Missing some basics here.
    break;
    }
    else
    {
    parent = parent.parentNode;
    }
    }
    }

    </script>

    </HEAD>

    <BODY>
    <form name="xyz" method="post" action="http://localhost:8080/context/index.html">
    <div id="x">
    <a href="#" name="xy" onclick="javascript:doFormSubmit(this);">test</a>
    <!-- P2: -->
    <a name="xy1" href="javascript:doFormSubmit(this);">Q test</a>
    </div>
    </form>

    </BODY>
    </HTML>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    If you use button (or any control for that matter), you can pass this.form to refer to the form the button exists in. In the case of anchor links, you can access the form by name - document.forms['formName'] - or by id - document.getElementById('formId') - instead of by index.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    But if you really want it to be generic without the need for the form name or id, you can do this.
    Code:
    <a href="#" onclick="submitForm(this);return false;">submit form</a>
    ...
    function submitForm(elem){
      while (elem.parentNode && elem.parentNode.tagName != "FORM"){
         elem = elem.parentNode;
      }
      var oForm = elem.parentNode;
      oForm.submit();
    }
    The this keyword can only be used in event handlers not on normal HTML attributes like href.

  • #4
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    glenngv
    Thanks a lot for the explanation. It is clear. For knowing things better i would like to know, i am having to call break; explicity in my code (Case P1). I expected that the moment i said form.submit(); the control would have been transferred, but the execution still continues after the submission.

    Thanks,
    Vijay

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You really need the break statement even if you call the submit method. But if you look at the code in my previous post, you can see that I called submit() outside the while loop.

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    wouldn't be safer?:
    while (elem.parentNode && elem.parentNode.tagName.toLowerCase() != "form"){
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I tested in IE6 and FF and both return uppercase. I assume other browsers do the same thing.

    Checking W3C, I got this:
    Note that this is case-preserving in XML, as are all of the operations of the DOM. The HTML DOM returns the tagName of an HTML element in the canonical uppercase form, regardless of the case in the source HTML document.

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    yes, I know, yet somehow stubbornly I always use the toLowerCase() while checking tag names (elements nodeName) or attributes' nodeNames... Just in case... I might be much too cautious, I reckon... Or I try to use with XHTML...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    If you are really cautious, then just use String.match method and specify the 'i' flag. No extra method call.
    Code:
    while (elem.parentNode && elem.parentNode.tagName.match(/FORM/i))

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by glenngv
    If you are really cautious, then just use String.match method and specify the 'i' flag. No extra method call.
    Code:
    while (elem.parentNode && elem.parentNode.tagName.match(/FORM/i))
    yes, good ideea on using RegExp
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    glenngv and Kor,
    Thanks for all the information. There was lot of learing from your responses.


  •  

    Posting Permissions

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