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 to the CF scene
    Join Date
    Apr 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Advanced Javascript - Prepopulate fields using URL

    I have used a Javascript to prepopulate text fields and checkbox's etc. However I can't make it populate a text area. Would anyone be kind enough to help me with the code for it?

    Any help would really be appreciated: (source code below)
    Code:
    // preset.js  Copyright 2009 by Richard L. Trethewey - All Rights Reserved
    // Permission is granted to use this code as long as this copyright notice
    // is left intact.  For more information, see http://www.rainbodesign.com/pub/
    
    // First, get the query string contents from the URL used by lopping off the "?"
    
       var query = location.search.substr(1, location.search.length-1);
    
    function findForm(theForm) {
    var formCount = document.forms.length;
      if (document.getElementById) { formElement = document.getElementById(theForm); 
        } else {
    for (i=0; i<formCount; i++) {
      if (document.forms[i].name == theForm) { formElement = document.forms[i]; }
         } // endFor
      } // endif document.getElementById
      return formElement;
     } // end findForm
    
    function setOption(theOption,choice) {
    max = theOption.length;
    for (i = 0; i < max; i++) {
       if (theOption.options[i].value == choice) { theOption.options.selectedIndex = i; }
        }  // end for i
    } // end setOption
    
    function setRadio(theOption,optionName) {
      max = theOption.length;
       for (i = 0; i < max; i++) {
    //    alert(theOption[i].name + ' ' + theOption[i].checked);
        if (theOption[i].value == optionName) { theOption[i].checked = true; }
       }  // end for i
    } // end setRadio
    
    
    function fixQString(theStr) {
      pattern = '\\+';
      flags = 'g';
      reg_exp = new RegExp(pattern, flags);
      theStr = theStr.replace(reg_exp, ' ');
      theStr = unescape(theStr);
      return theStr
    } // end fixQStr
    
    function populate(formName) {
      if (query) {                       // Was there a query string?
    var params =  query.split("&");      // Yes!  Split them up
    var theForm = findForm(formName);    // Locate the form with the correct name/ID
        if (theForm != null) {           // Did we find the form?
         for (q=0; q<params.length; q++) {
          xy = params[q].split("="); // Split the command into name/value pair
          paramName = xy[0];
          newValue = fixQString(xy[1]);
           if (theForm.elements[paramName]) {  // does named element exist?
    //   alert(theForm.elements[paramName].type + ' ' + paramName);
    
           switch(theForm.elements[paramName].type) {
            case 'text':
              theForm.elements[paramName].value = newValue;
            break;
    
            case 'hidden':
              theForm.elements[paramName].value = newValue;
            break;
    
            case 'select-one':
              setOption(theForm.elements[paramName], newValue);
            break;
    
            case undefined:  // a kludge to handle radio buttons
              setRadio(theForm.elements[paramName], newValue);
            break;
    
            case 'checkbox':
              theForm.elements[paramName].checked = true;
            break;
    
           } // end switch
          } // endif theForm.elements[paramName]
        } // end for q
       } // endif {theForm)
     } // endif (query)
    } // end populate()

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    YUCK!

    I sure don't think that code qualifies as "advanced".

    Just for starters, it doesn't handle a set of same-named checkboxes. Or a <select multiple>. Or, as you pointed out, a <textarea>.

    Anyway, the type of a textarea is (what else?) "textarea".

    You could handle that, as well as <input type=text> and <input type=hidden> thus:
    Code:
         switch(theForm.elements[paramName].type) 
         {
              case 'text': case 'hidden': case 'textarea':
                  theForm.elements[paramName].value = newValue;
                  break;
              case 'select-one':
                 ... etc ...
    But man, is that ugly code.
    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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    I just couldn't stand it. Here's a rewrite.

    This does handle <select multiple>. And it does handle multiple checkboxes with the same name.

    To a degree, it even handles text fields with the same name. But this version always fills in the *first* text (or hidden or textarea) field of the given name. I could easily fix that: If the same <input type=text name=foo> appeared more than one time, then I could assign the first value from the query string to the first such field, second from the query string to the second, etc. Not sure how much use that is or what you'd use it for, but pretty easy to do, with the current infrastructure.

    UNTESTED.

    If I get a chance, I'll test it later and fix any typos I might have made.
    Code:
    function populate(form) 
    {
        if ( location.search == null || location.search.length < 1 ) return; // no querystring
    
        var pairs = location.search.substring(1).split("&");
        for ( var p = 0; p < pairs.length; ++p )
        {
            var pair = pairs[p];
            var name = pairs[0];
            var value = unescape( pairs[1].replace(/\+/g, "") );
            var fld = form.elements[name];
            var ftype = null;
            var farray = false;
            if ( fld != null )
            {
      
                if ( fld instanceOf Array )
                {
                    // assumed to be a multiply-named field...array better have a length!
                    if ( fld.length != null && fld.length >= 1 ) 
                    {
                        ftype = fld[0].type;              
                        farray = true;
                    }
                } else {
                    ftype = fld.type;
                }
            }
            switch ( ftype )
            {
                case "text": case "hidden": case "textarea":
                    if ( farray ) fld = fld[0]; // only handle first-named for this type
                    fld.value = value;
                    break;
                case "select-one": case "select-multiple":
                    if ( farray ) fld = fld[0]; // only handle first-named for this type
                    for ( var o = 0; o < fld.options.length; ++o )
                    {
                        var opt = fld.options[o];
                        var oval = opt.value;
                        if ( oval == null || oval == "" ) oval = opt.text; 
                        if ( oval == value ) 
                        { 
                            opt.selected = true; 
                            break; 
                        }
                    }
                    break;
                case "checkbox": case "radio":
                    if ( ! farray )
                    {
                        // single checbox or radio of that name:
                        fld.checked = true;
                    } else {
                        for ( var cr = 0; cr < fld.length; ++cr )
                        {
                            if ( fld[cr].value == value )
                            {
                                fld[cr].checked = true;
                                break;
                            }
                        }
                    }
                    break;
                default: 
                    alert("Unknown field type encountered for field " + name + ": " + ftype);
                    break;
            } // end of switch
        } // end of loop on fields from qs
    }
                     
    and then populate it by calling 
    
    populate(document.YourFormName);
        or (if you use an ID instead of name for the form)
    populate(document.getElementById("formid"));
    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:

    mushmonkey (06-19-2010)

  • #4
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for your amazing help. I've tested the code and it appears to have 1 error. I managed to fix that (it was on line 17 - spaces were used instead of ".")

    However it now says "Invalid input type, etc" on all normal textboxs (not textareas). I've looked at the code but can't seem to see the problem.
    Thank you so far for your great help. I really appreciate it.
    Last edited by mushmonkey; 06-19-2010 at 12:43 PM.

  • #5
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I don't understand why it's not working tbh.

    I'd be really grateful for any help
    As this is wayy above my knowledge of code.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    Okay, a couple of stupid typos but one real goof. I was thinking that a set of checkboxes/radiobuttons is seen as an array. It's not: It's a collection. So the instanceof wasn't finding it as an array. I changed the code to handle that.

    Here's a sample form using the JS code:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function populate(form) 
    {
        if ( location.search == null || location.search.length < 1 ) return; // no querystring
    
        var pairs = location.search.substring(1).split("&");
        for ( var p = 0; p < pairs.length; ++p )
        {
            var pair = pairs[p].split("=");
            var name = pair[0];
            var value = unescape( pair[1].replace(/\+/g, " ") );
            var fld = form.elements[name];
            var ftype = null;
            var farray = false;
            var atype = Array;
    
            if ( fld != null )
            {
                if ( fld.length != null && fld.length >= 1 && fld[0].type != null && fld[0].type != undefined ) 
                {
                    ftype = fld[0].type;              
                    farray = true;
                } else {
                    ftype = fld.type;
                }
            }
            switch ( ftype )
            {
                case "text": case "hidden": case "textarea":
                    if ( farray ) fld = fld[0]; // only handle first-named for this type
                    fld.value = value;
                    break;
                case "select-one": case "select-multiple":
                    if ( farray ) fld = fld[0]; // only handle first-named for this type
                    for ( var o = 0; o < fld.options.length; ++o )
                    {
                        var opt = fld.options[o];
                        var oval = opt.value;
                        if ( oval == null || oval == "" ) oval = opt.text; 
                        if ( oval == value ) 
                        { 
                            opt.selected = true; 
                            break; 
                        }
                    }
                    break;
                case "checkbox": case "radio":
                    if ( ! farray )
                    {
                        // single checbox or radio of that name:
                        fld.checked = true;
                    } else {
                        for ( var cr = 0; cr < fld.length; ++cr )
                        {
                            if ( fld[cr].value == value )
                            {
                                fld[cr].checked = true;
                                break;
                            }
                        }
                    }
                    break;
                default: 
                    alert("Unknown field type encountered for field " + name + ": " + ftype);
                    break;
            } // end of switch
        } // end of loop on fields from qs
    }
    </script>
    </head>
    <body onload="populate(document.TheForm);">
    <form name="TheForm">
    <input type="text" name="text1" /><br/>
    <input type="checkbox" name="cb1" value="1" />
    <input type="checkbox" name="cb1" value="2" />
    <input type="checkbox" name="cb1" value="3" />
    <br/>
    <input type="radio" name="rb1" value="A" />
    <input type="radio" name="rb1" value="B" />
    <input type="radio" name="rb1" value="C" />
    <br/>
    <textarea name="ta1" rows=4 cols=40></textarea>
    <br/>
    <select name="sel1">
       <option>One</option>
       <option>Two</option>
       <option>Three</option>
       <option>Four</option>
    </select>
    <br/>
    <select name="sel2" multiple>
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
       <option value="4">Four</option>
    </select>
    <br/>
    </form>
    </body>
    </html>
    And here's a sample URL that I called it with:
    Code:
    http://localhost/testsite/formfill.html?sel1=Three&sel2=2&sel2=4&cb1=2&cb1=3&rb1=C&text1=zambonis+rule&ta1=twas%20brillig%0D%0Aand+the+slithy+toves
    And all fields and field types seem to work. (Didn't check hidden, but it has to be same as text.)
    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
    •