[pmwiki-users] JavaScript and Fox forms

[Hans]

Saturday, July 12, 2008, 3:50:51 AM, Scott Smith wrote:

> I'm trying to use JavaScript and Fox forms in a single page. The values I
> pull from the JavaScript portion of the page are not transferring to the Fox
> form. Can someone point me in the right direction?

I guess this has nothing to do with Fox, as fox.php is the script
processing input from the form submitted __on the server___.
But I guess it is a matter of defining (:input :) controls with the
right hooks for the javascript, specifically with event handlers
which call some function of the javascript. Most useful would be  a
onsubmit=... and a onclick=... handler. The onsubmit handler for the
(:input form :) control, and the onlick= handler for the submit button
(:input submit :)

PmWiki's scripts/forms.php which defines the default (:input :)
controls does not include javascript handlers for security reasons, a
sit would be possible to construct forms which could run any
arbitrary javascript.

If your wiki is safe enough, you can define customised versions of the
(:input:) markup which include such handlers as onsubmit and onclick.
To allow these generally add to config.php:

include_once('scripts/forms.php');
$InputAttrs[] = 'onclick';
$InputAttrs[] = 'onsubmit';


Note that scripts/forms.php needs to be called first.
Note also these are case-sensitive, so onClick= won't work!

With this change you armed any input markup to execute any kind of
javascript!! If you wish to be safe, you could restrain from this
general addition of event handlers, and define a custom input control
instead, with the precise javascript calls you need.
for instance add to config.php:

$InputTags['form2'] = array(
  ':args' => array('action', 'method'),
  ':html' => "<form \$InputFormArgs onsubmit='return checkInput(this)'>",
  'method' => 'post');

The use markup (:input form2 ...:) which will call javascript
function checkInput on submission first.

Now an example:

Add this to config.php, which will be inserted in th epage head as
javascript:

$HTMLHeaderFmt['javascripttest'] = "
  <script type='text/javascript' language='javascript'>
  function readText (form) {
    TestVar =form.inputbox.value;
    alert (\"You typed: \" + TestVar);
    return false;
  }
  function writeText (form) {
    form.inputbox.value = \"Have a nice day!\"
    return false;
  }
  </script>
";

Then create a wiki page with this markup:

(:input form "{$PageUrl}" :)
Enter something in the box:\\
(:input text inputbox "":)\\
(:input submit button1 "Read" onclick="return readText(this.form)":)
(:input submit button2 "Write" onclick="return writeText(this.form)":)
(:input end:)

You see two onclick event handlers, each calling a javascript
function. The first takes a value from the input text box named
"inputbox". The second writes a value into this box. Using named
controls makes the bridge to javascript.
(:input text inputbox "": is rendered as HTML
<INPUT TYPE="text" NAME="inputbox" VALUE="">

Note also the use of 'return' in the javascript:
In the onclick handler it makes sure a value will be returned, and in
the script functions 'return false;' will return 'false' to the form,
which stops data being submitted to the server. without that, or a
'return true;' , the form will submit, after the javascript is done,
and the page reloads, or whatever the php processing script
determines.

I translated the example for PmWiki markup from
http://www.javaworld.com/jw-06-1996/jw-06-javascript.html
which is about "Using JavaScript and forms"

Hope this helps a bit!

  ~Hans