Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Query String Generator

form elements

Query String Generator

by  Lrnmore  Posted    (Edited  )
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>
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top