Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • 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!
  • Students Click Here

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

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


form elements

Query String Generator by Lrnmore
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'.


<!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(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>'+
   valwin.document.close(); mkwin=false;
  if(qstr.indexOf("=")==-1) { alert("No Form Values to Display..."); mkwin=false; }}
<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>
<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">

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