SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Brewster, MA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    SOLVED: Obtaining index # of form or setting form name via JSCRIPT

    Hi folks, i have a situation where I'm trying to manipulate form elements, yet cannot name the form, as I don't have access to the <FORM> tag (it's a long story)....

    Of course, I need to refer to the specific FORM in a function somehow. Is there a way I can dynamically find out the "index" number of the form (different # of forms will be on the page) so I can use forms[x] instead of myForm, in the example script below. The idea being I could pass this value to the function along with "firstVal","secondVal" to use with forms[x]

    Or, is it possible to assign a name to the current form via a Javascript method, and then use that name in the swapVals function?

    Example code is below, but I'm looking for a method to do it *without* having a NAME for the form, as described above:
    Code:
    <FORM NAME="myForm">
    
    <SCRIPT LANGUAGE="JAVASCRIPT">
        function swapVals(firstVal,secondVal) {
            var temp = window.document.myForm.elements[firstVal].value;
    				window.document.myForm.elements[firstVal].value = window.document.myForm.elements[secondVal].value;
    				window.document.myForm.elements[secondVal].value = temp;
    				return true;									
    		    } 
    </SCRIPT>
    
    <P><INPUT TYPE="text" NAME="item[0]" VALUE="Item 0"><A HREF="#" onClick="swapVals('item[0]','item[1]');">Swap It</A>
    <P><INPUT TYPE="text" NAME="item[1]" VALUE="Item 1"><A HREF="#" onClick="swapVals('item[1]','item[0]');">Swap It</A>
    
    </FORM>
    I'm open to other method's as well - I've tried many variations on this.form, etc... Thanks for any help
    Last edited by nate_02631; Jun 9, 2004 at 18:41.

  2. #2
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can determine the number of forms in a document with document.forms.length. The forms are numbered from 0 (document.forms[0]) starting at the top of the document and proceeding sequentially down the page.

    You can name a form by assigning a name to the document.forms[n].name property, though it makes more sense to assign the form to a variable reference as in: var f_one=document.forms[0]

    You then can use the variable to refer to the form, rather than having to use the whole document.etc~

  3. #3
    SitePoint Addict
    Join Date
    May 2004
    Location
    Europe
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you guarantee that the <input> will always be immediately followed by the <a>? Then you could write it this way:
    Code:
    <script type="text/javascript">
    function swapVals(firstEl, secondElName) {
    	firstEl = firstEl.previousSibling;
    	var form = firstEl.form;
    	var temp = firstEl.value;
    	firstEl.value = form.elements[secondElName].value;
    	form.elements[secondElName].value = temp;
    	return false;
    } 
    </script>
    <form>
    <p><input type="text" name="item[0]" value="Item 0"><a href="#"
     onClick="swapVals(this,'item[1]');">Swap It</a></p>
    <p><input type="text" name="item[1]" value="Item 1"><a href="#" 
     onClick="swapVals(this,'item[0]');">Swap It</a></p>
    </form>

  4. #4
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Brewster, MA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies,

    Saturn, because this function is to be used for something in a CMS, I cannot guarantee anything. The link would actually be before the input box (and not necessarily "immediately" as they would be in different cells) *and* the Swap function would ultimately swap a set of values (input boxes, selects, etc...) from one field to the other. Clever script though!

    JVLB, Thanks for the info - I'm actually aware of the forms.length property, but how do I tell *which* forms[x] this form is... There will be different #of forms on the page, so I need to figure that dynamically when the Swap function is called.

    Regarding your variable idea, would something like
    var myForm=document.this.form work?

    Any more thoughts are appreciated!

  5. #5
    SitePoint Addict
    Join Date
    May 2004
    Location
    Europe
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But the link and the two form elements would at least be contained in the same form element, right? If yes, you could get the form by walking up the DOM tree, for instance:
    Code:
    function swapVals(anchor, firstElName, secondElName) {
      var form = anchor;
      while (form && form.nodeName != "FORM") form = form.parentNode;
    ...
    
    <p><input type="text" name="item[1]" value="Item 1"><a href="#" 
     onClick="swapVals(this,'item[0]', 'item[1]');">Swap It</a></p>

  6. #6
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Brewster, MA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They would, but there's stuff *outside* the swappable stuff in the same form that would be included as well.

    Truthfully, I'm not following the node/DOM logic and wouldn't know how to apply it to multiple items (and there would be multiple swappable items).

    Ideally, does anyone have a method for determining the index # of the FORM (what # form am I on the page) or naming the form "after the fact" so its elements can be referenced in a script?

  7. #7
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Brewster, MA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SOLVED: Well, it's not as elegant as I'd hoped for -- but here's what I came up with:

    Basically, you stick a hidden value in the "nameless" form in question (which is unique to any other in other forms on the page). Then, at the start of the function, loop through the forms array and check for the existance of your hidden value and set the form index accordingly:

    Code:
    <FORM>
    	
    <SCRIPT LANGUAGE="JAVASCRIPT">
    	
        function swapVals(firstVal,secondVal) {
    					
           for (var i = 0; i < document.forms.length; i++) {
              if (document.forms[i].Dynamenu != null)
                  var x = i;
    
              }
    									
           var temp = document.forms[x].elements[firstVal].value;
           document.forms[x].elements[firstVal].value = document.forms[x].elements[secondVal].value;
           document.forms[x].elements[secondVal].value = temp;
           return true;									
           } 
    </SCRIPT>	
    
    <INPUT TYPE="HIDDEN" NAME="Dynamenu" VALUE="1">
    
    <P><INPUT TYPE="text" NAME="item[0]" VALUE="Item 0"><A HREF="#" onClick="swapVals('item[0]','item[1]');">Swap It</A>
    <P><INPUT TYPE="text" NAME="item[1]" VALUE="Item 1"><A HREF="#" onClick="swapVals('item[1]','item[0]');">Swap It</A>
    
    </FORM>
    I know it's an unusual situation and will likely help few others - but just in case. For the curious, I am writing a "block" enhancement for a popular CMS system whose authors unfortunately did not have the foresight to name their forms...

    If there is a way to simply fetch the index/key # of the current form (this.form.index?) I'd still be interested to know!

  8. #8
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, use of the "this" keyword would allow assignment of a form to a variable, or, assuming you had an input field named inOne, you could assign a single value to a variable with var x = this.inOne.value

  9. #9
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Brewster, MA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JVLB
    Yes, use of the "this" keyword would allow assignment of a form to a variable, or, assuming you had an input field named inOne, you could assign a single value to a variable with var x = this.inOne.value
    Do you know what would be exactly (to get the index# or just form reference as I described)? because i tried several variations with no luck...

  10. #10
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this, see if it helps:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function frmFunc(frm){
    alert(frm.inpOne.value);
    }
    </script>
    </head>
    <body>
    <form action="" onclick="frmFunc(this)">
    <p>
    <input name="inpOne" type="text" value="stuff" />
    </p>
    </form>
    </body>
    </html>

  11. #11
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Brewster, MA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting, but doesn't cut it, as I wouldn't have access to the form to alter it. Thanks anyway, but I'll go with my solution


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
  •