Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

LINK TO THIS FORUM!

Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

Partner With Us!

"Best Of Breed" Forums Add Stickiness To Your Site
Partner Button
(Download This Button Today!)

Feedback

"...One of the best run forums I have used in years! ...I like the way the site is organized and your no tolerance of flames..."

Geography

Where in the world do Tek-Tips members come from?

form elements

Query String Generator
Posted: 29 Oct 03 (Edited 12 Aug 05)

Just an example of how javascript interacts with forms and form fields in a web page. Includes a pop-up that shows all fields that have a 'value'.

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Query String Generator</title>
<script type="text/javascript">
var mkwin = false;
var resp = /%20/g;
function gen_qstr(form) {
if(!form) form = document.forms[0];
var left = screen.availWidth-550;
var top = screen.availHeight-550;
var qstr = "";
var tmp = "";
var txt = "";
flen =  form.elements.length;
for(i=0; i<flen; i++) {
  el = form.elements[i];
 if((el.type == 'text' && el.value.length > 0) || (el.type == 'checkbox' && el.checked == true) ||
  (el.type == 'textarea' && el.value.length > 0) || (el.type == 'radio' && el.checked == true) ||
   (el.type == 'hidden' && el.value.length > 0)) {
   tmp = el.name+'='+escape(el.value)+'&';}
 if(el.selectedIndex != undefined && el.selectedIndex != -1){
   for(j=0; j < el.options.length; j++) { if(el.options[j].selected == true) {
  tmp += el.name+'='+escape(el.options[j].value)+'&'; }}}
if(tmp.length > 0) { qstr += tmp;  tmp = "";}}
qstr = qstr.substring(0,qstr.length - 1);
document.output.qstr.value = qstr.replace(resp,"+");
  if(mkwin){
  if(qstr.indexOf("&")!=-1) { qpairs = qstr.split("&");
   for(i=0;i<qpairs.length;i++){ tmp = qpairs[i].split("=");
   txt += '<tr><td>'+tmp[0]+'</td><td>'+tmp[1]+'</td></tr>'; }}
  if(mkwin && qstr.indexOf("=")!=-1 && qstr.indexOf("&") == -1) { tmp = qstr.split("=");
   txt = '<tr><td>'+tmp[0]+'</td><td>'+tmp[1]+'</td></tr>'; }
   valwin = window.open('about:blank','pup','width=550,height=500,left='+left+',top='+top+',scrollbars=yes');
   valwin.document.write('<html><head><title>Form Values</title><style>td{background-color : #FFFFFF;}'+
   '<\/style><\/head><body bgcolor="skyblue"><center><table bgcolor="black" cellpadding="6"'+
   ' cellspacing="3"><tbody><tr><td>Fld Name</td><td>Value</td></tr>'+txt+
   ' </tbody></table><p><a href="#" onClick="javascript:self.close();">CLOSE</a></p>'+
   '</body></html>');
   valwin.document.close(); mkwin=false;
  if(qstr.indexOf("=")==-1) { alert("No Form Values to Display..."); mkwin=false; }}
}
</script></head><body>
<form name="test" method="get">
<input type="hidden" name="hid" value="Hidden Value">
<a href="#" onClick="javascript:document.test.hid.value = 'New Hidden Value';">New Hidden Value</a><br>
<input type="text" size="20" name="t1">
<input type="text" size="20" name="t2"><br>
<textarea rows="10" cols="10" name="tarea1"></textarea><br>
<input type="checkbox" name="chk1" value="chk1checked">Check Box<br>
<input type="radio" name="rad1" value="rad1checked">Rad One
<input type="radio" name="rad1" value="rad2checked">Rad Two<br>
<select name="sel" multiple size="5">
 <option value="vala">Value A</option>
 <option value="valb">Value B</option>
 <option value="valc">Value C</option>
 <option value="vald">Value D</option>
</select>
<input type="submit">
<input type="button" value="Query String" onClick="gen_qstr(this.form);">
<input type="button" value="Query String & Pairs" onClick="mkwin=true;gen_qstr();">
<input type="button" value="Clear Form" onClick="document.forms[0].reset();document.output.reset();"><br><br>
</form><form name="output"><textarea name="qstr" cols="80" rows="5">
</textarea>
</form>
</body></html>

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close