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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changing Value of Form Object Using Partial ID

    I want to have button2 populate form fields in a separate form with certain data I choose. The challenge is that the name of each text box is the same ("inputbox") and the id is dynamic, the first part only staying the same. So, the form element id would be "idb_4555557805340560...". There would only be one form element that begins with "idb."

    The following code works, but doesn't address the dynamic id. How can I do this?

    Code:
    <HTML>
    <BODY>
    <SCRIPT LANGUAGE="JavaScript">
    function writeText (form) {
        document.getElementById('ida').value = "Have a nice day!";
        document.getElementById('idb').value = "Have a nice day!!";
        document.getElementById('idc').value = "Have a nice day!!!";
    }
    </SCRIPT>
    
    <form name="one"><INPUT TYPE="button" NAME="button2" Value="Write" onClick="writeText(document.myform)"></form>
    
    <FORM NAME="myform" ACTION="" METHOD="GET">
    <INPUT TYPE="text" NAME="inputbox" id="ida" VALUE="">
    <INPUT TYPE="text" NAME="inputbox" id="idb" VALUE="">
    <INPUT TYPE="text" NAME="inputbox" id="idc" VALUE="">
    </FORM>
    </BODY>
    </HTML>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    You want to write the *SAME* data to each <input> field?

    That's easy:
    Code:
    <script type="text/javascript">
    function writeText (form) {
        var inputs = form.inputbox;
        for ( var i = 0; i < inputs.length; ++i ) 
        {
            inputs[i].value = "Have a nice day!";
        }
    }
    </script>
    If it is possible that sometimes when you run this code there will only be ONE "inputbox", then you can do this:
    Code:
    <script type="text/javascript">
    function writeText (form) {
        var inputs = form.inputbox;
        if ( inputs.length == null ) 
        { 
            // convert the single element to an array of one element
            inputs = [inputs]; 
        }
        for ( var i = 0; i < inputs.length; ++i ) 
        {
            inputs[i].value = "Have a nice day!";
        }
    }
    </script>
    NOTE: There is really no reason to use two <form>s here. An <input type="button"> will not be seen by any server-side code, so it won't interfere with the contents of your main <form> in any way.

    NOTE: <SCRIPT Language=...> is long obsolete. Use the code showin, instead.

    NOTE: Upper case HTML tags are only valid in old-style HTML pages. If you use a doctype of xhtml, which you likely should, they should all be lower case.
    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.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Whoops. Let me clarify. The value will always be the same for the input box with id beginning "ida_" but it will be a different value for the input box beginning with "idb_". For example, box A's value would always be 50, box B would be 25, etc. The reason for the separate forms is simply that I will not be able to modify the form that contains the input boxes. I'm going to have to work around that.

    Thanks for taking a look!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Okay, not a big change:
    Code:
    <script type="text/javascript">
    function writeText (form) {
        var inputs = form.inputbox;
        if ( inputs.length == null ) 
        { 
            // convert the single element to an array of one element
            inputs = [inputs]; 
        }
        for ( var i = 0; i < inputs.length; ++i ) 
        {
            input = inputs[i];
            switch ( input.id.substring(0,4).toLowerCase() )
            {
                 case "ida_": 
                     input.value = "50";
                     break;
                 case "idb_": 
                     input.value = "25";
                     break;
                 case "idc_": 
                     input.value = "3.14159265";
                     break;
                 default:
                     input.value = "Unknown id for this field";
            }
        }
    }
    </script>
    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.

  • Users who have thanked Old Pedant for this post:

    aanderson (03-21-2012)

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This is great! My only concern is sometimes the id will contain a number as well. For example, the id might be "i3b". Will I need to adjust this code since it converts to lower case?

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    No. the toLowerCase() function *only* converts upper case *LETTERS* to lower case. It doesn't affect characters that aren't letters. Actually, it isn't needed if you can guarantee that none of your id's will ever contain upper case letters and/or if you WANT to distinguish between upper and lower case. I admit I kind of threw it in there gratuitously.

    And I also assumed that you would always have prefixes that are 3 characters followed by an underline. If that's not true--if sometimes you have shorter or longer prefixes--it's easy to change, so long as the underline always separates the prefix from the rest of the id. Thus (making a mildly silly example):

    Code:
    <script type="text/javascript">
    function writeText (form) {
        var inputs = form.inputbox;
        if ( inputs.length == null ) 
        { 
            // convert the single element to an array of one element
            inputs = [inputs]; 
        }
        for ( var i = 0; i < inputs.length; ++i ) 
        {
            var input = inputs[i];
            var prefix = input.id.split("_")[0];
            switch ( prefix )
            {
                 case "ida": 
                     input.value = "50";
                     break;
                 case "idb": 
                     input.value = "25";
                     break;
                 case "Rumplestiltskin": 
                     input.value = "3.14159265";
                     break;
                 case "e": 
                     input.value = "2.718281828";
                     break;
                 default:
                     input.value = "Unknown id for this field";
            }
        }
    }
    </script>
    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.

  • #7
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you! This works exactly as it should now, and I've learned more from a good example than from an hour's research online.


  •  

    Posting Permissions

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