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 6 of 6
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    20
    Thanks
    8
    Thanked 0 Times in 0 Posts

    form inputField value

    OK, I am a newbe

    I am backfilling for a coworker.
    They are auto generating a page pulling from a database.

    It is creating something like this:
    Code:
    <td colspan='2' class='normal' nowrap><input type='checkbox' name='Network/Other Equipment[1]' checked><b> Data Cabinet - 7ft - 0113</td></tr>
    <td colspan='2' class='normal' nowrap><input type='checkbox' name='Network/Other Equipment[2]' checked><b> Data Cabinet - 5ft -0463</td></tr>
    <td colspan='2' class='normal' nowrap><input type='checkbox' name='Network/Other Equipment[3]' > Router</td></tr>

    I am trying to pull the values out.
    I have been trying

    Code:
     <tr><td><input type='button' class='button'  name='Calculate' value='Calculate' onclick="testIt(this.form)"></td></tr>


    Code:
    <script language='javascript'>
    function testIt(formname)
    {  
    alert(frm.Satellite Equipment[1].value);
    }
    </script>
    Not working.
    How can I grab the value from something like this:
    name='Network/Other Equipment[1]'
    ?

    Also,
    Are the checkboxes automatically put into an array?

    thanks

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    If the checkboxes have the same ID, yes, they are put into an array (well, an object that can be treated like an array, anyway.)

    In your JavaScript example code, you do not declare what "frm" is.
    Code:
    <script language='javascript'>
    function testIt(formname)
    {  
    var frm = formname.id;
    alert(frm.Satellite Equipment[1].value);// The "array" is zero-index, so the first value is index 0, not index 1.
    // ALSO: You cannot have spaces in object IDs.  And, just for the record, the id MUST begin with a letter or underscore - it cannot start with a number or special character.
    }
    </script>
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    20
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks for the help.

    I have been playing with a simpler example.
    On this,
    testIt2 works. But testIt3 does not work.

    I am interested in knowing why testIt3 does not work. Or how to make it work.



    Could you also explain
    "the id MUST begin with a letter or underscore - it cannot start with a number or special character."
    A bit more. I am not sure I understand.

    thanks



    Code:
    <html>
    
    <head>
    
    
    <script type="text/javascript">
    function testIt2(){
    	var myTextField = document.getElementById('myText[2]');
    	if(myTextField.value != "")
    		alert("You entered: " + myTextField.value)
    	else
    		alert("Would you please enter some text?")		
    }
    </script>
    
    
    <script type="text/javascript">
    function testIt3(formname)
    {  
    alert(formname.myText[1].value);
    }
    </script>
    
    </head>
    <body>
    
    
    <input type='text' id='myText[1]' />
    <input type='text' id='myText[2]' />
    <input type='button' onclick='testIt2()' value='testIt2' />
    <input type='button' onclick='testIt3(this.form)' value='testIt3' />
    
     
    </body>
    </html>

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I have been playing with a simpler example.
    On this,
    testIt2 works. But testIt3 does not work.

    I am interested in knowing why testIt3 does not work. Or how to make it work.
    The two functions are completely different. The testIt3 doesn't work because you are submitting the form itself as an argument, but don't get the id of the form, so the function does not know what to do.
    Code:
    <script type="text/javascript">
    function testIt2(){
    	var myTextField = document.getElementById('myText[2]');
    	if(myTextField.value != "")
    		alert("You entered: " + myTextField.value)
    	else
    		alert("Would you please enter some text?")		
    }
    
    function testIt3(formname)
    {  
    thisForm = formname.id;
    alert(document.forms[thisForm].myText[1].value);
    }
    </script>
    Could you also explain
    "the id MUST begin with a letter or underscore - it cannot start with a number or special character."
    A bit more. I am not sure I understand.
    ALL object IDs must begin with a letter or underscore (a-z or _) and cannot begin with a number (0-9) or special character OTHER THAN underscore (!@#$%^&*()-~` etc). Examples:
    id="thisForm" is valid
    id="beginWithAnyLetter" is valid
    id="AtoZorUnderscore" is valid
    id="_beginsWithUnderscore" is valid

    id="1_form" is NOT valid
    id="1st_input" is NOT valid
    id="99_luftballoons" is NOT valid
    id="#thisIsAHash" is NOT valid
    id="^thisIsACarat" is NOT valid
    id="<>thisWontWork<>" is NOT valid (you can't use < or > as part of the id)
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,437
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Quote Originally Posted by WolfShade View Post
    If the checkboxes have the same ID, yes, they are put into an array (well, an object that can be treated like an array, anyway.)
    OOPS! NOT TRUE! The id's are ignored!

    They must have the same names.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,437
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Quote Originally Posted by WolfShade View Post
    The two functions are completely different. The testIt3 doesn't work because you are submitting the form itself as an argument, but don't get the id of the form, so the function does not know what to do.
    Not true.

    The problem is that he DOES NOT HAVE any <form>!!!

    You can't use
    Code:
    <input type='button' onclick='testIt3(this.form)' value='testIt3' />
    unless there *IS* a <form>...</form> that INCLUDES the form element in question.

    If we change the HTML to
    Code:
    <body>
    <form id="anyID">
        <input type='text' id='myText[1]' />
        <input type='text' id='myText[2]' />
        <input type='button' onclick='testIt2()' value='testIt2' />
        <input type='button' onclick='testIt3(this.form)' value='testIt3' />
    </form> 
    </body>
    Then testIt3 AS GIVEN in Greg's second post is correctly referencing the form.

    When you pass this.form you are ALREADY passing a reference to the form.

    It would be better to change the function to just
    Code:
    function testIt3(form)
    to emphasize this fact.

    But the original code and Wolfshade's version of testIt3 will never work, at all.

    (1) Wolfshade uses thisForm = formname.id; to get the ID of the form but then tries to get a reference to the form using document.forms[thisForm], but you can only get a form BY NAME (not by id!) using that code.

    (2) Wolfshade tries to access the form field using formreference.myText[1] (here just using "formreference" since his code for a form reference won't work).
    That would only work if you had two fields with the names of myText. Thus:
    Code:
    <form>
       <input name="myText"/>
       <input name="myText"/>
    </form>
    The real problem is that, as Wolfshade correctly noted, the ids of those <input>s is illegal.

    You can't have [1] or [2] in an ID.

    You *CAN* have them in a name.

    Which you might well do if you are using PHP as your server side language.

    In which case you COULD do this:
    Code:
    <body>
    <form id="anyID" name="namedFormsAreObsolete">
        <input type='text' name='myText[1]' />
        <input type='text' name='myText[2]' />
        <input type='button' onclick='testIt3(this.form)' value='testIt3' />
    </form>
    </body>
    and then this:
    Code:
    function testIt3(form)
    {
        alert( form["myText[1]"].value );
    }
    Last edited by Old Pedant; 05-16-2012 at 10:41 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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