• View
• Edit
• History
• Attach
• Print
• Backlinks

InputFormsAndJavaScript

Questions answered by this recipe

How can my javascript add values to input forms, for further processing in php?
How can forms and javascript be combined?

Description

For developers Some ideas of combining javascript with PmWiki Input forms.

The important part is to define (: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:
A onsubmit handler for the (:input form :) control, and
a onlick handler for the submit button (:input submit :)

PmWiki's scripts/forms.php defines the default (:input :) controls, but it does not include javascript handlers for security reasons, as it 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 onclick and onsubmit are case-sensitive keywords, 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 an example custom form, add to config.php:

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

Then use markup (:input myform ...:), which will call the javascript function checkInput on submission first.

Example:

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

$HTMLHeaderFmt['javascripttest'] = "
  <script type='text/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 creates 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 "Using JavaScript and forms"

HansB July 14, 2008, at 11:06 AM

Notes

Release Notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See Also

Contributors

Comments