Forms in DHTML scroller

This has been covered in the forum before, but I thought to introduce it again, for those who don't want to search the whole forum.

It is difficult to use forms in the DHTML scroller. When a regular form is submitted, it opens in a new window, instead of the scroller. I found a way to fix that.

Put this function in the MAIN BODY of your page -- better still, in the divscroll.js file.

  function  submitToDiv(f,d) {
    var  end, url, amp, div, nam, val;
    end = f.elements.length;
    url  = f.action + (f.action.indexOf('?')<0? '?' : '&');
div = eval(d);
    amp = '';
for (i=0; i<end; i++) {
      p = f.elements[i];
nam = escape(p.name).replace(/%20/g,'+')
      val = escape((p.type.substring(0,6)=="select")  ?
          p.options[p.selectedIndex].value :
          p.value).replace(/%20/g,'+')
url += amp + nam + '='  + val;
      amp = '&';
    }
div.load(url);
    return  false;
  }

In  your included HTML pages, add the function call to your forms:

<form action="handler.cgi" action="post"
          onsubmit="return submitToDiv(this,'contentDiv')">

where "contentDiv"  is the name of (you guessed it) your DHTML scroller. The action should probably be a fully-realized URL, such as "http://myurl.com/forms/handler.cgi" -- in some cases, a relative URL did not work for me.

That's all you have to do. The function extracts the action from the form, and accounts for the possibility that it might already have a query string. It handles all types of form inputs (but does not disquise passwords). The value and name of each item are escaped, as required for some shopping carts.

Currently, it doesn't handle the values of submit buttons, but I'm working on that. If you have only one submit button, you can use a hidden field to pass that value. When I have submit-button support added, I'll post that here.

Angus should think about including this (or something like it) in his next release.

Okay the above won't work exactly as I figured. It includes checkboxes and radio buttons when they aren't set, and only does one value of multiple select boxes. :(

So  the for loop above should be replaced with:
    for (i=0;  i<end; i++) {
      p = f.elements[i];
typ = p.type.substring(0,6);
      nam = escape(p.name).replace(/%20/g,'+');
if (nam!='') {
        if  (typ=="select") {
          for (j=0;  j<p.length; j++) {
          if (p.options[j].selected)  {
          val = escape(p.options[j].value).replace(/%20/g,'+');
          url  += amp + nam + '=' + val;
amp = '&';
          }
          }
} else if ((typ=="radio") || (typ=="checkb")) {
if (p.checked) {
          val  = escape(p.value).replace(/%20/g,'+');
          url += amp + nam  + '=' + val;
          amp = '&';
}
        } else {
          val  = escape(p.value).replace(/%20/g,'+');
          url += amp + nam  + '=' + val;
          amp = '&';
}
      }
    }

There is probably a prettier, more concise way of doing this, but I can't spend the time to find it. This will do for now.

-garison

dear angus
i did a page with the divscroll and there is a form in it. i had the known problem that after the submit the page didn't open in the content. i saw the solutions of garison. but it doesn't work.
the first one is opening in the content but it has like garison mentioned the problem with the radio buttons.
so i included the second script. now it shows me instead of the page only the loading message. and if i click on a link from the menu (target="content") the page opens in a second window.
is there a solution for the problem with the radio buttons?