...

View Full Version : Advanced Javascript - Prepopulate fields using URL



mushmonkey
06-18-2010, 01:12 PM
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)

// 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()

Old Pedant
06-18-2010, 09:38 PM
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:


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.

Old Pedant
06-19-2010, 03:45 AM
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.


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"));

mushmonkey
06-19-2010, 12:26 PM
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.

mushmonkey
06-19-2010, 12:48 PM
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.

Old Pedant
06-20-2010, 02:31 AM
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:


<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:


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.)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum