Blow away history or Disable Back button

I have a Cold Fusion app.  My cold fusion pages have queries  embedded in the source that execute.  I therefore, don't want the user to hit the back button, to reload a page becuase it will execute a query twice.  How can I- using javascript blow away a users history, or disable the back button.  I am aware that I can use document.replace('xxx.html') to load a page without creating a history entry.  Unfortunately if the page has a form on it, and then i use document.replace() the form's values will not be submitted to the next page.  This is critical because I have a lot of multi-paged forms.

I'll give bonus points if the person can tell me also how to disable the reload button.  By the way the code should work in NS 3 and above, and IE4 (preferrable IE3 - but hey I know IE3 stinks) and above.

:) D Perry
LVL 3
dapperryAsked:
Who is Participating?
 
kollegovConnect With a Mentor Commented:
Here is NORMAL HTML querry:
(tested in NN4 win95 WITHOUT calling script onSubmit
 MORE, to be sure I just removed functions at all.
)
file:///C|/OMNI/HTDOCS/kaka/kaka.html?YourName=&YourEmail=&YourOccupation=Lawyer&Happy=Yes&YourInterests=I+like%0D%0A++++++baseball&YourInterests=I+like+football&SubmitButton=Submit

Here is querry produced by script YOU REJECTED:

file:///C|/OMNI/HTDOCS/kaka/kaka.html?YourName=&YourEmail=&YourOccupation=Lawyer&Happy=Yes&YourInterests=I+like%0D%0A++++++baseball&YourInterests=I+like+football&SubmitButton=Submit

In both cases wasMULTIPLE SELECTed 'I like baseball' and 'I like footbal'

CAN you SHOW me THE DIFFERENCES ?!!!!?

0
 
jbirkCommented:
This is a frequently asked question, and it's not possible.  You can't disable these buttons, or their functionalities.

There are of course lots of ways around them or to prevent whatever it is that you want to prevent, but you can't flat out disable the buttons.

Document.replace() is on of the possibilities which sometimes helps, but as you said it won't work for you....

Maybe someone will be able to come up with a solution for you.  Could you give a little more details on the situation?

-Josh
0
 
kollegovCommented:
History don't suppose to do this...

FIRST solution is to use TARGET="_blank"
attribute in form and open each next page in NEW window.
This will create new blank window with blank history...

SECOND idea, do you use POST or GET at server side?
If you use GET you CAN use history.replace("some.html?var=a&var=b");
I think it wouldn't be difficult to form the querry string
with javascript...

Let me know if this helps
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
kollegovCommented:
Oppsss, I should be more accurate, sure I mean
location.replace("some.html?var=a&var=b")

0
 
dapperryAuthor Commented:
1st idea probably not real good, because you keep getting a warning screen if you try to close the main browser window (at least i do if i do a window.open() and then a self.close() )

The other idea might work.  We typically now use POST,but I am not opposed to a GET methodology similiar to what you are suggesting.  The key would be to come up with a function that could formulate the url appended string, without knowing necessarily what the form name, or its elements names are.  This way I wouldn't need to write a unique function for each form page.  If there is a way to roll through the collections of forms and form elements, and make the 'url append string' that would be cool.  Also,I know there are some limitations to GET, can you refresh my memory on those?

:) D Perry
0
 
Michel PlungjanIT ExpertCommented:
I would use a frameset and have the form and the result store the values in the frameset definition. If a function loaded the result page, a reload should result in the frameset reloaded but not the reload of the result.
An alternative is to have the result use javascript to write to another frame and immediately unload itself.

Michel
0
 
Michel PlungjanIT ExpertCommented:
Get has a size limitation (I would not send more than 500 bytes-1k in a get)
It also shows in the location bar.

To run through a form's elements, creating a url is simple, especially if there are no grouped check boxes (badly managed by IE3)

Michel
0
 
dapperryAuthor Commented:
mplungian,
I'm currently using a frameset anyway.  One that holds a banner, and then the main window.  Could you please give an example of writing to frameset - I'm  confused a bit about this suggestion.  

To all:
As far as the GET methodology, it seems alright.  I believe since I'm using a frameset anyhow, that the url appendage wouldn't show up in the location box anyhow.  So...the first one with a function, or a better alternative, gets the points.

:) D Perry
0
 
Michel PlungjanIT ExpertCommented:
I hope we might share the points if possible...

I am writing this as a comment since I am not totally sure it will work, not having seen your actual frames and not having access to the CF in question
and also because I am not handling radio/check boxes in this script...

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
function crtUrl(theForm) {
   var theUrl='';
   for (i=0,n=theForm.elements.length;i<n;i++) {
      theUrl += theForm.elements[i].name + '=' + escape(theForm.elements[i].value);
   }
   top.resultframe.location = theForm.action + '?' +theUrl;
}

// uncloak --></SCRIPT>

to write html from perl:
do something like
print "<SCRIPT..............>"
print "top.otherframe.document.open()"
print "top.otherframe.document.write(@result)"
print "top.otherframe.document.close()"
print "</SCRIPT>"

in cold fusion I am not so sure
0
 
Michel PlungjanIT ExpertCommented:
oops:

function crtUrl(theForm) {
         var theUrl='';
         for (i=0,n=theForm.elements.length;i<n;i++) {
            theUrl += '&' + theForm.elements[i].name + '=' + escape(theForm.elements[i].value);
         }
         top.resultframe.location = theForm.action + '?' +theUrl.substring(1);
      }
0
 
dapperryAuthor Commented:
Cold Fusion is a mark up language.  Instead of having cgi scripts and .html pages, you have .cfm pages which are a mix of HTML standard tags, and COld Fusion specific tags.  These Cold Fusion tags (like <CFQUERY>) let you database stuff, as well as a lot of other things.  SO when a browser points to a .cfm page the COld Fusion App Server actually gets the page first, executes Cold Fusion specific tags, and then spits back an HTML page to the Web Server sw.

Mplungian,

Your code seems to work good.  Please just add some functionality for radio & check boxes, submit an answer and the points are yours.

:) D Perry
0
 
Michel PlungjanIT ExpertCommented:
I will in 9 hours - I need to get some sleep

Michel
0
 
dapperryAuthor Commented:
Good night!

:) D Perry
0
 
kollegovCommented:
Michel, the function you provided wouldn't handle correctly
various input types like radio buttons and checkboxes


0
 
kollegovCommented:
This is much more accurate way to roll over form elements.
I'm posting it with document I used for testing of it...


<script>

function makeit()
{f=document.forms[0];
 s="";
 for(i=0;i<f.length;i++)
   {var n=f.elements[i].name;
    var v=f.elements[i].value
    var t=f.elements[i].type

    if((t=="text") || (t=="hidden") || (t=="password") || (t=="textarea"))
      {v=f.elements[i].value;
       s+=escape(n)+"="+escape(v)+"&";
      }
    if(t=="select-one")
      {v=f.elements[i].options[f.elements[i].selectedIndex].value
       s+=escape(n)+"="+escape(v)+"&";
      }
    if(t=="checkbox")
      {if(f.elements[i].checked)
        {v="on"
         s+=escape(n)+"="+escape(v)+"&";
        }
      }

    if(t=="select-multiple")
      {for(j=0;j<f.elements[i].options.length;j++)
         {if(f.elements[i].options[j].selected)
           {v=f.elements[i].options[j].value;
            s+=escape(n)+"="+escape(v)+"&";    
           }
         }
      }
     
    if(t=="radio")
      {if(f.elements[i].checked)
        {v=f.elements[i].value
         s+=escape(n)+"="+escape(v)+"&";
        }
      }

   }
 document.forms[1].elements[0].value=s
 return s;
}


</script>

<form >
 <input type="text" name="t" value="some" >
 <input type="hidden" name="h" value="hid" >
 <input type="password" name="p" value="pwd" >
 <textarea name="ta">tatata</textarea>
 <select name="s" >
  <option value="o1" SELECTED>a23456
  <option value="o2">asfdsdfsdf
 </select>
 <select name="s2" multiple rows=2>
  <option value="o1" SELECTED>a23456
  <option value="o2">asfdsdfsdf
 </select>

 <input type="button" name="but" value="send" onClick="makeit()">
<B>Specify your music preferences (check all that apply):</B>
<BR><INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B
<BR><INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Jazz
<BR><INPUT TYPE="checkbox" NAME="musicpref_blues" CHECKED> Blues
<BR><INPUT TYPE="checkbox" NAME="musicpref_newage" CHECKED> New Age


<br><INPUT TYPE="radio" NAME="conversion" VALUE="upper"> Upper case
<br><INPUT TYPE="radio" NAME="conversion" VALUE="lower"> Lower case
<br><INPUT TYPE="radio" NAME="conversion" VALUE="noChange"> No conversion
<br><input type="submit" value="send">
</form>

<script>
for (var i = 0; i < document.forms[0].elements.length; i++)
{
   document.writeln("<BR>type is " + document.forms[0].elements[i].type +" "+document.forms[0].elements[i].name+" "+document.forms[0].elements[i].value)
}
</script>
<form>
 <input type="text " size=50;>
</form>
0
 
Michel PlungjanIT ExpertCommented:
Hey Kollegov: I did mention that "and also because I am not handling radio/check boxes in this script..."  (I also did not handle select, but then again it was only a comment)

Also the type property of the element is JavaScript 1.1 so your script would not work in IE3 or NS2

You also do not strip the trailing &, so a standard form parsing server process could choke

Also why treat select single any different than select multiple and why not start at selectedIndex

I would also treat radio and check buttons the same.

It is too bad that due to various browser bugs, my version did not work and I have no time to investigate this (I sometimes really hate browsers!) - however a version where the names of the form fields were prefixed with the type combined with a test of that substring would be a solution to that.

I post my script anyway for documentation reasons

<script>
function makeit() {
   var f=document.forms[0];
   var s='', n='', v='', t='';
   if (f.elements[0].type) var typeAvail = true; // Java Script 1.1
   else var typeAvail = false;
   for(var i=0,l=f.elements.length;i<l;i++) {
      n=f.elements[i].name;
      v='';
     if typeAvail {
        if (f.elements[i].type.indexOf('select') !=-1) t = 'select'
        else if (f.elements[i].type == 'checkbox' || f.elements[i].type == 'radio') t = 'box'
        else t = 'input';
     }
     else {
        if (f.elements[i].options) t = 'select' /* Does not work in NS4.06 after the first select, Damn! */
     }
     else if (f.elements[i].checked) t = 'box'; // does not work in NS2
     else t = 'input';
     
     if (t == 'select') {
         for(j=f.elements[i].selectedIndex, k=f.elements[i].options.length;j<k;j++)
            if(f.elements[i].options[j].selected) v=f.elements[i].options[j].value;
     }
     else if ((t=='box' && f.elements[i].checked==true) || t=='input') v=f.elements[i].value;
     if (n) s+='&'+escape(n)+'='+escape(v);

   }
   document.forms[1].elements[0].value=s.substring(1); // strip leading & 
   return s;
}
</script>

0
 
kollegovCommented:
As I know type property appears in NN3 and supported by MIE3 and MIE4 (as was requested in question :)

It's interesting thing, BTW
when I tryed to chop last & symbol
in the following way:

s=s.substing(0,s.length-1);

this screwed up my N4.04!!! one more bug in NN :)
It REMOVES all '&' symbols from string!!!

That's why I left it unchopped :)
Most CGI scripts forgive this..


0
 
Michel PlungjanIT ExpertCommented:
element.type is not supported by JavaScript 1.0 which is what IE3 supports

My IE3.02 does not support it.

Are you sure you did that substring outside the loop???
I think that that would be a quite amazing bug in NS4.04

Michel
0
 
kollegovCommented:
Michele, I also beleive that detecting type by secondary
objects/properties can lead sometimes to unredictable results..
(due to browsers differences..)

But I like your agressive manner to use others ideas
(note that original idea of using replace with GET method was mine as well as way to form querry string. :)

0
 
kollegovCommented:
Good guess, Michele, you are right, I occasionly put it inside the loop :)
So with this correction my script should be:

<script>

function makeit()
{f=document.forms[0];
 s="";
 for(i=0;i<f.length;i++)
   {var n=f.elements[i].name;
    var v=f.elements[i].value
    var t=f.elements[i].type

    if((t=="text") || (t=="hidden") || (t=="password") || (t=="textarea"))
      {v=f.elements[i].value;
       s+=escape(n)+"="+escape(v)+"&";
      }
    if(t=="select-one")
      {v=f.elements[i].options[f.elements[i].selectedIndex].value
       s+=escape(n)+"="+escape(v)+"&";
      }
    if(t=="checkbox")
      {if(f.elements[i].checked)
        {v="on"
         s+=escape(n)+"="+escape(v)+"&";
        }
      }

    if(t=="select-multiple")
      {for(j=0;j<f.elements[i].options.length;j++)
         {if(f.elements[i].options[j].selected)
           {v=f.elements[i].options[j].value;
            s+=escape(n)+"="+escape(v)+"&";    
           }
         }
      }
     
    if(t=="radio")
      {if(f.elements[i].checked)
        {v=f.elements[i].value
         s+=escape(n)+"="+escape(v)+"&";
        }
      }

   }
 s=s.substring(0,s.length-1);
 document.forms[1].elements[0].value=s;
 return s;
}


</script>

<form >
 <input type="text" name="t" value="some" >
 <input type="hidden" name="h" value="hid" >
 <input type="password" name="p" value="pwd" >
 <textarea name="ta">tatata</textarea>
 <select name="s" >
  <option value="o1" SELECTED>a23456
  <option value="o2">asfdsdfsdf
 </select>
 <select name="s2" multiple rows=2>
  <option value="o1" SELECTED>a23456
  <option value="o2">asfdsdfsdf
 </select>

 <input type="button" name="but" value="JavaScript" onClick="makeit()">
<B>Specify your music preferences (check all that apply):</B>
<BR><INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B
<BR><INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Jazz
<BR><INPUT TYPE="checkbox" NAME="musicpref_blues" > Blues
<BR><INPUT TYPE="checkbox" NAME="musicpref_newage" CHECKED> New Age


<br><INPUT TYPE="radio" NAME="conversion" VALUE="upper"> Upper case
<br><INPUT TYPE="radio" NAME="conversion" VALUE="lower"> Lower case
<br><INPUT TYPE="radio" NAME="conversion" VALUE="noChange"> No conversion
<br><input type="submit" value="GET method">
</form>

<script>
for (var i = 0; i < document.forms[0].elements.length; i++)
{document.writeln("<BR>type is " + document.forms[0].elements[i].type +" "+document.forms[0].elements[i].name+" "+document.forms[0].elements[i].value)
}
</script>
<form>
 <input type="text " size=50;>
</form>


0
 
Michel PlungjanIT ExpertCommented:
Kollegov, you really aught to change at least the multiple select to this:

if(t=="select-multiple")
   {for(j=f.elements[i].selectedIndex, k=f.elements[i].options.length;j<k;j++)
      {if(f.elements[i].options[j].selected)
         {v=f.elements[i].options[j].value;
            s+=escape(n)+"="+escape(v)+"&";      
         }
      }
   }

It will initialise to the first selected and save the options.length.

Java and JavaScript will always calculate an array length in case something changed in the loop. if you initialise a variable with the length, it will only be calculated once.

Michel

0
 
kollegovCommented:
That's not bad idea, Michele, I use this way when I need to
process long arrays, but in case of few options in select
this isn't a critical point.. I'd better make short
ee=f.elements[i];
and change
'f.elements[i]' to 'ee' evrywhere

to reduce script size in order to fasten loading...
But this is minor improvements....

Sure, nearly every code written once can be optimized!
0
 
dapperryAuthor Commented:
I get a javascript error in Communicator 4.5  Heres the page I'm testing it with:

<!-- Javascript section --!>
<SCRIPT LANGUAGE="JavaScript">
      function MakeIt() {
            f=document.forms[0];
                 s="";
                  for(i=0;i<f.length;i++) {
                    var n=f.elements[i].name;
                     var v=f.elements[i].value;
                     var t=f.elements[i].type;

                    if((t=="text") || (t=="hidden") || (t=="password") || (t=="textarea"))
                          v=f.elements[i].value;
                              s+=escape(n)+"="+escape(v)+"&";
                       }
                     if(t=="select-one") {
                             v=f.elements[i].options[f.elements[i].selectedIndex].value;
                              s+=escape(n)+"="+escape(v)+"&";
                       }
                     if(t=="checkbox"){
                             if(f.elements[i].checked) {
                                     v="on";
                                      s+=escape(n)+"="+escape(v)+"&";
                               }
                       }

                     if(t=="select-multiple") {
                             for(j=0;j<f.elements[i].options.length;j++) {
                                      if(f.elements[i].options[j].selected) {
                                        v=f.elements[i].options[j].value;
                                         s+=escape(n)+"="+escape(v)+"&";      
                                  }
                                }       
                       }
           
                     if(t=="radio") {
                             if(f.elements[i].checked) {
                                     v=f.elements[i].value;
                                      s+=escape(n)+"="+escape(v)+"&";
                               }
                       }
              }
                  s=s.substring(0,s.length-1);
                  document.forms[1].elements[0].value=s;
                  return s;
      }

      function SubmitTheForm() {
            urlstring=MakeIt();
            location.replace(urlstring);
      }
      
</SCRIPT>

<!-- CFQUERY is in this section --!>

<!-- HTML section --!>
<HTML>
Please fill out this test form.<BR>

<FORM NAME="TestForm1" ACTION="test2.cfm">
<PRE>
Your Name:      <INPUT TYPE="text" NAME="YourName" LENGTH="30" MAXLENGTH="30">
Your Email:      <INPUT TYPE="text" NAME="YourEmail" LENGTH="50" MAXLENGTH="50">
Your Occupation:
            <SELECT NAME="YourOccupation" SIZE="5"><OPTION VALUE="Lawyer" SELECTED>Lawyer<OPTION VALUE="Doctor">Doctor<OPTION VALUE="Programmer">Programmer<OPTION VALUE="Construction">Construction Worker</SELECT>

Are you happy?      <INPUT TYPE="radio" NAME="Happy" VALUE="Yes" CHECKED>Yes      <INPUT TYPE="radio" NAME="Happy" VALUE="No">No

Check all that Apply: <INPUT TYPE="checkbox" NAME="Cool">I'm Cool  <INPUT TYPE="checkbox" NAME="RealCool">I'm Real Cool  <INPUT TYPE="checkbox" NAME="TooCoolToDescribe">I'm too cool to describe

Select all that Apply:
            <SELECT NAME="YourInterests" SIZE="5" MULTIPLE="yes"><OPTION VALUE="I like baseball">I like baseball<OPTION VALUE="I like football">I like football<OPTION VALUE="I like basketball">I like basketball<OPTION VALUE="I like hockey">I like hockey</SELECT>
</PRE>
<INPUT TYPE="button" NAME="SubmitButton" VALUE="Submit" onClick="SubmitTheForm()">
</FORM>
</HTML>

Obviously the page formatting in this site, is terrible, but there it is.

test2.cfm is just a page that outputs the submitted form values.  Now I'm getting an error that the SubmitTheForm function doesn't exist, and also one about the 'return s; ' statement at the bottom of the MakeIt() function.  Let me know on this.

:) D Perry
0
 
dapperryAuthor Commented:
Kollegov,
Maybe its something stupid - your code could be alright and I just screwed up somewhere.  If so, submit another answer with what you think the screwup is.

:) David

PS - You guys seem to be having your own private shouting match back here, its kinda funny to watch!
0
 
dapperryAuthor Commented:
A final version of the page (using my example) , and all the updates going back and forth, might be nice too.

:) D Perry
0
 
kollegovCommented:
You was just missing { after
if((t=="text") || (t=="hidden") || (t=="password") || (t=="textarea")) {

Well, incorporating improvements of for loop now it's the following using your example :


<!-- Javascript section --!>
      <SCRIPT LANGUAGE="JavaScript">
      function MakeIt() {
      f=document.forms[0];
            s="";
             for(i=0;i<f.length;i++) {
               var n=f.elements[i].name;
                var v=f.elements[i].value;
                var t=f.elements[i].type;

               if((t=="text") || (t=="hidden") || (t=="password") || (t=="textarea")) {
               v=f.elements[i].value;
                   s+=escape(n)+"="+escape(v)+"&";
                  }
                if(t=="select-one") {
                  v=f.elements[i].options[f.elements[i].selectedIndex].value;
                   s+=escape(n)+"="+escape(v)+"&";
                  }
                if(t=="checkbox"){
                  if(f.elements[i].checked) {
                    v="on";
                     s+=escape(n)+"="+escape(v)+"&";
                    }
                  }

                 if(t=="select-multiple") {
                   l=f.elements[i].options.length;
                   for(j=f.elements[i].selectedIndex;j<l;j++) {
                     if(f.elements[i].options[j].selected) {
                       v=f.elements[i].options[j].value;
                        s+=escape(n)+"="+escape(v)+"&";      
                       }
                     }
                  }
                   
                if(t=="radio") {
                  if(f.elements[i].checked) {
                    v=f.elements[i].value;
                     s+=escape(n)+"="+escape(v)+"&";
                    }
                  }
               }
             s=s.substring(0,s.length-1);
             alert(s);
             return s;
      }

      function SubmitTheForm() {
      urlstring=MakeIt();
      location.replace(urlstring);
      }

      </SCRIPT>

      <!-- CFQUERY is in this section --!>

      <!-- HTML section --!>
      <HTML>
      Please fill out this test form.<BR>

      <FORM NAME="TestForm1" ACTION="test2.cfm">
      <PRE>
      Your Name: <INPUT TYPE="text" NAME="YourName" LENGTH="30" MAXLENGTH="30">
      Your Email: <INPUT TYPE="text" NAME="YourEmail" LENGTH="50" MAXLENGTH="50">
      Your Occupation:
      <SELECT NAME="YourOccupation" SIZE="5"><OPTION VALUE="Lawyer"
      SELECTED>Lawyer<OPTION VALUE="Doctor">Doctor<OPTION
      VALUE="Programmer">Programmer<OPTION VALUE="Construction">Construction
      Worker</SELECT>

      Are you happy? <INPUT TYPE="radio" NAME="Happy" VALUE="Yes" CHECKED>Yes <INPUT
      TYPE="radio" NAME="Happy" VALUE="No">No

      Check all that Apply: <INPUT TYPE="checkbox" NAME="Cool">I'm Cool  <INPUT TYPE="checkbox"
      NAME="RealCool">I'm Real Cool  <INPUT TYPE="checkbox" NAME="TooCoolToDescribe">I'm too
      cool to describe

      Select all that Apply:
      <SELECT NAME="YourInterests" SIZE="5" MULTIPLE="yes"><OPTION VALUE="I like baseball">I
      like baseball<OPTION VALUE="I like football">I like football<OPTION VALUE="I like basketball">I
      like basketball<OPTION VALUE="I like hockey">I like hockey</SELECT>
      </PRE>
      <INPUT TYPE="button" NAME="SubmitButton" VALUE="Submit" onClick="SubmitTheForm()">
      </FORM>
      </HTML>
0
 
Michel PlungjanIT ExpertCommented:
It is always good to throw ideas back and forth... I wouldn't call it a shouting match, although I did feel slightly miffed that I was not allowed to sleep and post my improved version in the morning ;-)

If the end result is a well behaved and efficient script we are all happy.
I am always trying to make my script comaptible with as many browsers I can.
I have even thought of a better way than prefixing the field names for generic form handling It works in IE3 and NS2 too:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
/* Generic form2url script
   Collaboration between EE experts Kollegov & Michel Plungjan
   (c) 1998 Kollegov & Michel Plungjan
*/
function makeit(test) {
   var f=document.forms[0];
   var s='', n='', v='', t='';
   for(var i=0,l=f.elements.length;i<l;i++) {
      n=f.elements[i].name;
      v='';
      t = f.elements[i].type + ''; // Java Script 1.1 unless added to form. Force string for NS2
     
      if (t.indexOf('select') !=-1) { // any select box
         for(j=f.elements[i].selectedIndex, k=f.elements[i].options.length;j<k;j++)
            if(f.elements[i].options[j].selected) v=f.elements[i].options[j].value;
      }
      else if (t=='checkbox' || t=='radio') {
          if (f.elements[i].checked==true) v=f.elements[i].value;
          else n=''; // ignore unchecked fields
      }
      else if (t=='text' || t=='textarea' || t=='password' || t=='hidden') v=f.elements[i].value;
      if (t!='button' && n!='') s+='&'+escape(n)+'='+escape(v);

   }
   document.forms[1].elements[0].value=s.substring(1); // strip leading & 
   if (test==1) alert(s);
   return s;
}
// uncloak --></SCRIPT>
</HEAD>
<BODY>
<form onSubmit="location='/cgi-bin/formparse.pl?' + makeit(); return false;">
<input type="text" name="t" value="some" > 
<input type="hidden" name="h" value="hid" > 
<input type="password" name="p" value="pwd" > 
<textarea name="ta">tatata</textarea>
<select name="s" > 
<option value="o1" SELECTED>a23456
<option value="o2">asfdsdfsdf
</select>
<select name="s2" multiple rows=2>
<option value="o1" SELECTED>a23456
<option value="o2">asfdsdfsdf
</select>
<BR><B>Specify your music preferences (check all that apply):</B>
<BR><INPUT TYPE="checkbox" NAME="musicpref" VALUE="rnb" CHECKED> R&B
<BR><INPUT TYPE="checkbox" NAME="musicpref" VALUE="jazz" CHECKED>Jazz
<BR><INPUT TYPE="checkbox" NAME="musicpref" VALUE="blues" CHECKED> Blues
<BR><INPUT TYPE="checkbox" NAME="musicpref" VALUE="newage"CHECKED> New Age

<BR><INPUT TYPE="radio" NAME="conversion" VALUE="upper"> Upper case
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="lower"> Lower case
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="noChange" CHECKED> No conversion
<BR><input type="button" name="but" value="test" onClick="makeit(1)">
<input type="submit" value="send">
</form>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
    CurrentForm = 0;
    if (document.forms[CurrentForm].elements[0].type) ; // nothing
    else {
      document.forms[CurrentForm].elements[0].type = 'text';
      document.forms[CurrentForm].elements[1].type = 'hidden';
      document.forms[CurrentForm].elements[2].type = 'password';
      document.forms[CurrentForm].elements[3].type = 'textarea';
      document.forms[CurrentForm].elements[4].type = 'select-one';
      document.forms[CurrentForm].elements[5].type = 'select-multiple';
      document.forms[CurrentForm].elements[7].type = 'checkbox';
      document.forms[CurrentForm].elements[8].type = 'checkbox';
      document.forms[CurrentForm].elements[9].type = 'checkbox';
      document.forms[CurrentForm].elements[10].type = 'checkbox';
      document.forms[CurrentForm].elements[11].type = 'radio';
      document.forms[CurrentForm].elements[12].type = 'radio';
      document.forms[CurrentForm].elements[13].type = 'radio';
      document.forms[CurrentForm].elements[6].type = 'button';
      document.forms[CurrentForm].elements[14].type = 'submit';
    }

    for (var i = 0, n=document.forms[0].elements.length;i<n; i++)
    {
       document.writeln("<BR>type is " + document.forms[0].elements[i].type +" "+document.forms[0].elements[i].name+" "+document.forms[0].elements[i].value)
    }
// uncloak --></SCRIPT>
<form>
   <input type="text" size=50;>
</form>
</BODY>
</HTML>
0
 
Michel PlungjanIT ExpertCommented:
Oops, I moved a button but didn't change the number
             document.forms[CurrentForm].elements[0].type = 'text';
             document.forms[CurrentForm].elements[1].type = 'hidden';
             document.forms[CurrentForm].elements[2].type = 'password';
             document.forms[CurrentForm].elements[3].type = 'textarea';
             document.forms[CurrentForm].elements[4].type = 'select-one';
             document.forms[CurrentForm].elements[5].type = 'select-multiple';
             document.forms[CurrentForm].elements[6].type = 'checkbox';
             document.forms[CurrentForm].elements[7].type = 'checkbox';
             document.forms[CurrentForm].elements[8].type = 'checkbox';
             document.forms[CurrentForm].elements[9].type = 'checkbox';
             document.forms[CurrentForm].elements[10].type = 'radio';
             document.forms[CurrentForm].elements[11].type = 'radio';
             document.forms[CurrentForm].elements[12].type = 'radio';
             document.forms[CurrentForm].elements[13].type = 'button';
             document.forms[CurrentForm].elements[14].type = 'submit';
0
 
dapperryAuthor Commented:
I noticed two problems. - 1) If you check one of the checkboxes (such as 'Cool') the var is passed in the url append string, but if you don't check it, the var is not passed (eg - if 'Cool' checkbox is checked then Cool=on, but Cool is no where to be found if box is unchecked.

2) More importantly, the multi-select box 'YourInterests' is a problem.  If the URL append string says ..&YourInterests=I%20like%20baseball&YourInterests=I%20like%20football , (which it would if you selected those two options), the value of YourInterests on the receiving page only takes the last value (eg YourInterests="I like football")I would think that I would get a delimited string for YourInterests that would include both entries.

Other than that the function seems to work good.  Let me know.

:) D Perry
0
 
Michel PlungjanIT ExpertCommented:
But that is exactly how the form on it's own would be submitted!
Unchecked checkbox or radio is not sent along with the form data
and a multi select will send the name of the select + value for each selected!

The script can of course be changed to pass whatever you want, but that would in princible violate the form submission standards.

Michel
0
 
kollegovCommented:
mplungajan Right. If checkbox not checked, it shouldn't be submited at all.
In my test page version of script there are two buttons
one work as normal submit, so you can watch the querry
with results of java fuction, so I just make it to receive identical results :)

0
 
Michel PlungjanIT ExpertCommented:
By the way, the script does currently not handle the file upload and the image 'button'. There is no point in handling the fileupload since the enctype must be set in such a case. Let me know if you need support for the image button and I wil add it.

Michel
0
 
dapperryAuthor Commented:
There's no problem with the checkbox var not being passed (if unchecked).  I can check for the existence of a var on the other end.  The problem is with the multi-select box.  At least in Cold Fusion (on a regular form submit) the var comes back in a delimited list (eg I like baseball,I like football,I like hockey).  In this case the var only seems to be the last selected option (eg I like hockey)  I need to figure this out, its important, so I'll up the points a bit.

By the way, I don't need file upload or image.  Just this little thing and we're all set.

:) David
0
 
kollegovCommented:
I just noticed one more problem :)
with no selected items in multiple select and fixed it!

Dappery, please test this solution:
It handles multiple selects as the answer I posted long ago

<!-- Javascript section --!>
<SCRIPT LANGUAGE="JavaScript">
 function MakeIt() {
   f=document.forms[0];
   s="";
   for(i=0;i<f.length;i++) {
     var n=f.elements[i].name;
     var v=f.elements[i].value;
     var t=f.elements[i].type;

   if((t=="text") || (t=="hidden") || (t=="password") || (t=="textarea")) {
     v=f.elements[i].value;
     s+=escape(n)+"="+escape(v)+"&";
    }
   if(t=="select-one") {
     v=f.elements[i].options[f.elements[i].selectedIndex].value;
     s+=escape(n)+"="+escape(v)+"&";
    }
   if(t=="checkbox"){
     if(f.elements[i].checked) {
       v="on";
       s+=escape(n)+"="+escape(v)+"&";
      }
    }

  if(t=="select-multiple") {
    if(f.elements[i].selectedIndex!=-1)
    {l=f.elements[i].options.length;
     for(j=f.elements[i].selectedIndex;j<l;j++) {
       if(f.elements[i].options[j].selected) {
         v=f.elements[i].options[j].value;
         s+=escape(n)+"="+escape(v)+"&";        
        }
       }
     }
    }
                       
  if(t=="radio") {
    if(f.elements[i].checked) {
       v=f.elements[i].value;
       s+=escape(n)+"="+escape(v)+"&";
      }
    }
  }
  s=s.substring(0,s.length-1);
  loc=f.action+"";
  inx=loc.indexOf("?");
  if(inx!=-1) loc=loc.substring(0,inx);
  s=loc+"?"+s;
  alert(s);
  return s;
}

 function SubmitTheForm() {
 urlstring=MakeIt();
 location.replace(urlstring);
}

</SCRIPT>

<!-- CFQUERY is in this section --!>

<!-- HTML section --!>
<HTML>
   Please fill out this test form.<BR>

   <FORM NAME="TestForm1" ACTION="test2.cfm">
   <PRE>
    Your Name: <INPUT TYPE="text" NAME="YourName" LENGTH="30" MAXLENGTH="30">
    Your Email: <INPUT TYPE="text" NAME="YourEmail" LENGTH="50" MAXLENGTH="50">
    Your Occupation:
    <SELECT NAME="YourOccupation" SIZE="5"><OPTION VALUE="Lawyer"
     SELECTED>Lawyer<OPTION VALUE="Doctor">Doctor<OPTION
     VALUE="Programmer">Programmer<OPTION VALUE="Construction">Construction
     Worker</SELECT>
     Are you happy? <INPUT TYPE="radio" NAME="Happy" VALUE="Yes" CHECKED>Yes <INPUT
     TYPE="radio" NAME="Happy" VALUE="No">No
     Check all that Apply: <INPUT TYPE="checkbox" NAME="Cool">I'm Cool  <INPUT TYPE="checkbox"
     NAME="RealCool">I'm Real Cool  <INPUT TYPE="checkbox" NAME="TooCoolToDescribe">I'm too
     cool to describe
     Select all that Apply:
     <SELECT NAME="YourInterests" SIZE="5" MULTIPLE="yes"><OPTION VALUE="I like baseball">I
     like baseball<OPTION VALUE="I like football">I like football<OPTION VALUE="I like basketball">I
     like basketball<OPTION VALUE="I like hockey">I like hockey</SELECT>
     </PRE>
     <INPUT TYPE="button" NAME="SubmitButton" VALUE="Submit" onClick="SubmitTheForm()">
     </FORM>
     </HTML>

0
 
Michel PlungjanIT ExpertCommented:
Sorry! EE was hard to get at yesterday and this morning I had to bring my daugther to the hospital (she will be ok...)

Here is an untested change to use commas in the select statement

if (t.indexOf('select') !=-1) { // any select box
   var sval='';
   var isSelected = false;
   for(j=f.elements[i].selectedIndex, k=f.elements[i].options.length;j<k;j++) {
      if(f.elements[i].options[j].selected) {
         sval+=','+f.elements[i].options[j].value;
         isSelected=true;
      }
   }
   if (isSelected) {
      sval = sval.substring(1);
      s+=f.elements[i].name+'='+escape(sval);
      n=''; // we have taken care of it    
   }
}

If you want the commas not to be escaped, put the escape
around f.elements[i].options[j].value inside the loop...

Michel

0
 
dapperryAuthor Commented:
Kollegov,
I appreciate your answer and time but I'm going to have to reject your answer until this multi-select delimited list thing is solved.  Because if it can't be the whole methodology fails.  Hope to hear from you soon on this matter.

Mplungjan,
Sorry to hear about your daughter.  Glad she's OK.  Tried re-vamping the latest answer from Kollegov with your subroutine, but I'm getting an error on:

if (t.indexOf('select') !=-1)

I think it has something to do with !=-1  .Maybe it was just a typo.  If you could get back to me with that, that would be great.

:) David
0
 
kollegovCommented:
Oppppps.... Sure I make mistake somewhere..
Probably forget to reload dobument after editions :(

HTML submit:
file:///C|/OMNI/HTDOCS/kaka/kaka1.html?YourName=&YourEmail=&YourOccupation=Lawyer&Happy=Yes&YourInterests=I+like%0D%0A++++++baseball&YourInterests=I+like+football&SubmitButton=Submit

Script submit:
file:///C|/OMNI/HTDOCS/kaka/kaka.html?YourName=&YourEmail=&YourOccupation=Lawyer&Happy=Yes&YourInterests=I%20like%0D%0A%20%20%20%20%20%20baseball&YourInterests=I%20like%20football

IN BOTH CASES MULTIPLE SELECT present as multiple NAME/VALUE
pairs

The only difference is in Handling of spaces
in one case as + and in other case as %20 (as encode do)
Should I replace %20 with + ? This actually doesn't matter,
but if you need it, why not?

Well, going ahead and fixing this too!!!!
-----------------------------------------

<!-- Javascript section --!>
<SCRIPT LANGUAGE="JavaScript">

 function MakeIt() {
   f=document.forms[0];
   s="";
   for(i=0;i<f.length;i++) {
     var n=f.elements[i].name;
     var v=f.elements[i].value;
     var t=f.elements[i].type;

   if((t=="text") || (t=="hidden") || (t=="password") || (t=="textarea")) {
     v=f.elements[i].value;
     s+=escape(n)+"="+escape(v)+"&";
    }
   if(t=="select-one") {
     v=f.elements[i].options[f.elements[i].selectedIndex].value;
     s+=escape(n)+"="+escape(v)+"&";
    }
   if(t=="checkbox"){
     if(f.elements[i].checked) {
       v="on";
       s+=escape(n)+"="+escape(v)+"&";
      }
    }

  if(t=="select-multiple") {
    if(f.elements[i].selectedIndex!=-1)
    {l=f.elements[i].options.length;
     for(j=f.elements[i].selectedIndex;j<l;j++) {
       if(f.elements[i].options[j].selected) {
         v=f.elements[i].options[j].value;
         s+=escape(n)+"="+escape(v)+"&";
        }
       }
     }
    }

  if(t=="radio") {
    if(f.elements[i].checked) {
       v=f.elements[i].value;
       s+=escape(n)+"="+escape(v)+"&";
      }
    }
  }
  s=s.substring(0,s.length-1);

  while((inx=s.indexOf("%20"))!=-1)
    {//check for %%20
     if(inx>0)
      {if(s.charAt(inx-1)=='%')
         {//do nothing
         }
       else
         {s=s.substring(0,inx)+"+"+s.substring(inx+3);}
      }
     else
      {s=s.substring(0,inx)+"+"+s.substring(inx+3);}
    }

  loc=f.action+"";
  inx=loc.indexOf("?");
  if(inx!=-1) loc=loc.substring(0,inx);
  s=loc+"?"+s;
  alert(s);
  return s;
}

 function SubmitTheForm() {
 urlstring=MakeIt();
 location.replace(urlstring);
 return false;
}

</SCRIPT>

<!-- CFQUERY is in this section --!>

<!-- HTML section --!>
<HTML>
   Please fill out this test form.<BR>

   <FORM NAME="TestForm1" >
   <PRE>
    Your Name: <INPUT TYPE="text" NAME="YourName" LENGTH="30" MAXLENGTH="30">
    Your Email: <INPUT TYPE="text" NAME="YourEmail" LENGTH="50" MAXLENGTH="50">
    Your Occupation:
    <SELECT NAME="YourOccupation" SIZE="5"><OPTION VALUE="Lawyer"
     SELECTED>Lawyer<OPTION VALUE="Doctor">Doctor<OPTION
     VALUE="Programmer">Programmer<OPTION VALUE="Construction">Construction
     Worker</SELECT>
     Are you happy? <INPUT TYPE="radio" NAME="Happy" VALUE="Yes" CHECKED>Yes <INPUT
     TYPE="radio" NAME="Happy" VALUE="No">No
     Check all that Apply: <INPUT TYPE="checkbox" NAME="Cool">I'm Cool  <INPUT
TYPE="checkbox"
     NAME="RealCool">I'm Real Cool  <INPUT TYPE="checkbox" NAME="TooCoolToDescribe">I'm
too
     cool to describe
     Select all that Apply:
     <SELECT NAME="YourInterests" SIZE="5" MULTIPLE="yes"><OPTION VALUE="I like
baseball">I
     like baseball<OPTION VALUE="I like football">I like football<OPTION VALUE="I like basketball">I

     like basketball<OPTION VALUE="I like hockey">I like hockey</SELECT>
     </PRE>
     <INPUT TYPE="submit" NAME="SubmitButton" VALUE="Submit" onClick="return SubmitTheForm();">
     </FORM>
     </HTML>

-----------------------------------------
Now output produced by
Script:

file:///C|/OMNI/HTDOCS/kaka/kaka.html?YourName=&YourEmail=&YourOccupation=Lawyer&Happy=Yes&YourInterests=I+like%0D%0A++++++baseball&YourInterests=I+like+football

HTML submit:

file:///C|/OMNI/HTDOCS/kaka/kaka1.html?YourName=&YourEmail=&YourOccupation=Lawyer&Happy=Yes&YourInterests=I+like%0D%0A++++++baseball&YourInterests=I+like+football&SubmitButton=Submit

The only difference in SubmitButton=Submit
(as you told you don't need it :)
(and this two different files have different action :)

What's next?
---------------
0
 
kollegovCommented:
I also checked the identity of querry string in MIE4
now.
With the same result, Everywhere MULTIPLE select
presents as name=value1&name=value2&name=value3

Just guessing, Where Michele found this way
of QUERRY forming for multiple selects.

0
 
dapperryAuthor Commented:
What I need it to do (I think) is to say something like:

&YourInterests=I%20Like%20Baseball,I%20Like%Football

instead of varieties of
&YourInterests=I%20Like%20Baseball&YourInterests=I%20Like%20Football

The latter may be a normal statement, but in Cold Fusion the var YourInterests only gets to equal "I Like Football" instead of "I Like Baseball,I Like Football"  Hope this clarifies my needs a bit.

:) D Perry
0
 
kollegovCommented:
Actually, this is violation of HTTP protocol :)
"," should be escaped!
I make as you requested (notescaped ",")
If you would like it to be escaped change
vsel+=","+escape(v);
to
vsel+=escape(","+v);
and
vsel=vsel.substring(1);
to
vsel=vsel.substring(3);

These lines are commented in code, so just move comment to other
ones.

<!-- Javascript section --!>
<SCRIPT LANGUAGE="JavaScript">

 function MakeIt() {
   f=document.forms[0];
   s="";
   for(i=0;i<f.length;i++) {
     var n=f.elements[i].name;
     var v=f.elements[i].value;
     var t=f.elements[i].type;

   if((t=="text") || (t=="hidden") || (t=="password") || (t=="textarea")) {
     v=f.elements[i].value;
     s+=escape(n)+"="+escape(v)+"&";
    }
   if(t=="select-one") {
     v=f.elements[i].options[f.elements[i].selectedIndex].value;
     s+=escape(n)+"="+escape(v)+"&";
    }
   if(t=="checkbox"){
     if(f.elements[i].checked) {
       v="on";
       s+=escape(n)+"="+escape(v)+"&";
      }
    }

  if(t=="select-multiple") {
    if(f.elements[i].selectedIndex!=-1)
    {l=f.elements[i].options.length;
     if(f.elements[i].selectedIndex>=0)
       {s+=escape(n)+"=";}
     vsel="";
     for(j=f.elements[i].selectedIndex;j<l;j++) {
       if(f.elements[i].options[j].selected) {
         v=f.elements[i].options[j].value;
         // escape , or not?
         vsel+=","+escape(v);
         //vsel+=escape(","+v);
        }
       
       }
      if(f.elements[i].selectedIndex>=0)
       {// escape , or not?        
        vsel=vsel.substring(1);
        //vsel=vsel.substring(1);
        s+=vsel+"&"
       }
     }
    }

  if(t=="radio") {
    if(f.elements[i].checked) {
       v=f.elements[i].value;
       s+=escape(n)+"="+escape(v)+"&";
      }
    }
  }
  s=s.substring(0,s.length-1);

  while((inx=s.indexOf("%20"))!=-1)
    {//check for %%20
     if(inx>0)
      {if(s.charAt(inx-1)=='%')
         {//do nothing
         }
       else
         {s=s.substring(0,inx)+"+"+s.substring(inx+3);}
      }
     else
      {s=s.substring(0,inx)+"+"+s.substring(inx+3);}
    }

  loc=f.action+"";
  inx=loc.indexOf("?");
  if(inx!=-1) loc=loc.substring(0,inx);
  s=loc+"?"+s;
  alert(s);
  return s;
}

 function SubmitTheForm() {
 urlstring=MakeIt();
 location.replace(urlstring);
 return false;
}

</SCRIPT>

<!-- CFQUERY is in this section --!>

<!-- HTML section --!>
<HTML>
   Please fill out this test form.<BR>

   <FORM NAME="TestForm1" >
   <PRE>
    Your Name: <INPUT TYPE="text" NAME="YourName" LENGTH="30" MAXLENGTH="30">
    Your Email: <INPUT TYPE="text" NAME="YourEmail" LENGTH="50" MAXLENGTH="50">
    Your Occupation:
    <SELECT NAME="YourOccupation" SIZE="5"><OPTION VALUE="Lawyer"
     SELECTED>Lawyer<OPTION VALUE="Doctor">Doctor<OPTION
     VALUE="Programmer">Programmer<OPTION VALUE="Construction">Construction
     Worker</SELECT>
     Are you happy? <INPUT TYPE="radio" NAME="Happy" VALUE="Yes" CHECKED>Yes <INPUT
     TYPE="radio" NAME="Happy" VALUE="No">No
     Check all that Apply: <INPUT TYPE="checkbox" NAME="Cool">I'm Cool  <INPUT
TYPE="checkbox"
     NAME="RealCool">I'm Real Cool  <INPUT TYPE="checkbox" NAME="TooCoolToDescribe">I'm
too
     cool to describe
     Select all that Apply:
     <SELECT NAME="YourInterests" SIZE="5" MULTIPLE="yes"><OPTION VALUE="I like
baseball">I
     like baseball<OPTION VALUE="I like football">I like football<OPTION VALUE="I like basketball">I

     like basketball<OPTION VALUE="I like hockey">I like hockey</SELECT>
     </PRE>
     <INPUT TYPE="submit" NAME="SubmitButton" VALUE="Submit" onClick="return SubmitTheForm();">
     </FORM>
     </HTML>

0
 
Michel PlungjanIT ExpertCommented:
The if (t.indexOf('select') !=-1) { // any select
is in principle correct since t.indexOf() returns -1 (minus one) if the string is not found since a return of zero would mean that the string was found in position 0 of t.
asking if (t.indexOf('select') !=-1) is the same as asking if select is anywhere in the string t. There must be some other error (f.ex. if t is empty for some reason.)
I have a really hard time answering this questions since it crashes my browser at home (too big a file with too many tables) but I will look at work from time to time...
Michel
0
 
kollegovCommented:
This thread is SOOOOOOOOO long that it takes over 10 minutes to me to load it too :)
0
 
Michel PlungjanIT ExpertCommented:
Kollegov: You can cut and paste the form from EE, change the hidden to TEXT and change that number and submit the form without checking the boxes. That will load the last 4 entries only.

Michel
0
 
dapperryAuthor Commented:
That works fine.  Thanks.  Even though I accepted Kollegovs answer, I'll leave some points out there for you MPlunjian.  Thanks again to all.

:) D Perry
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.