Scenario 1
Enable users to send form data and call the form later for editing (so called [mf]-forms)

To enable this behavior, add [mf] if per-user or [mfs] if user-unspecific to the end of your form as follows:
[mf] works user-specifically. Since u5CMS 6.5.1 you may use [mfs] for user-unspecific approaches.

[:h]
[mf][:fi]
[:fo]

Scenario 2
Enable users to use the form for more than one item, let them add, edit, and delete items

1. Create a form, e. g. named !jokesform
   example code
   ×

   
   [fo:]
   [fi:]
   [le:]Your joke[:le]
   [au:]Welcome[:au]
   [h:]
   <input type="hidden" name="thanks" value="!jokeslist" />
   <label>Name*</label><input type="text" name="name_mandatory" />
   <label>Joke*</label><textarea rows="3" style="width:98%" type="text" name="joke_mandatory"></textarea>
   <center><label>&nbsp;</label><input type="submit" value="save" /></center>
   <div style="float:right"><a href="index.php?c=!jokeslist">cancel</a></div>
   <input type="hidden" name="in2my" value="off" /><!-- e-mail notifications to admin off-->
   <input type="hidden" name="em2cu" value="off" /><!-- e-mail notifications to customer off-->
   <input type="hidden" name="em2me" value="off" /><!-- e-mail notifications to me off-->
   <input type="hidden" name="firstsaverwins" /><!--don't set value, just remove input tag if last saver shall win-->
   
   <!-- TOEDITITEMS_LOGINS_SAME_AS_[!jokesform] -->
   <!-- TODELETEITEMS_LOGINS_SAME_AS_[!jokesform] -->
   
   [:h]
   [:fi]
   [:fo]

   Advanced JavaScript in such forms

   ×

   
   If you are a very advanced user you want perhaps to introduce a JavaScript function that does something with the form AFTER it is COMPLETELY loaded INCLUDING all fields pre-filled with the data coming from the database. I. e. the point in time when your function begins to fire is very crucial. It is important to know, that the classic onLoad DOES FIRE TO EARLY because data is written to the form fields after onLoad.
   The solution is, that your function has to be launched by the function starterscript. The function starterscript itself will be automatically launched by the CMS at the earliest point in time possible, i. e. when the form is ready. The function starterscript is only available and only necessary on pages with forms when they are in the edit mode, i. e. when it is a [mf]-tagged form (these are always in edit mode as described on top of the page at hand) or for non-[mf]-forms ONLY when formedit.php is in the browser’s address field). In other words, if it is not an [mf]-tagged form and you want to launch your function in context of the end users visit and form-filling (and not your later editing), start yourscript classicaly at the end of the page and do not use starterscript.
   
   <script>
   yourfunction() {
   //here comes your self-made JavaScript
   }
   function starterscript() {
   yourfunction();
   }
   </script>
   
   Remember, script-tags must be somewhere between [h:] and [:h] !
   

   
   
   

   Please note the exclamation mark in both names !jokesform and !jokeslist. The exclamation mark makes them intranet-pages!
   
   Make sure your thanks-value points exactly to the list with the items, in our example this is !jokeslist
   
   Make sure you mention the above two green steering-html-comments telling the system which logins shall be required for the transactions edit and delete (these transactions are offered on the page !jokeslist).

   
   

   “ONLYMINE”: How to restrict users to edit and delete ONLY their OWN items

   ×

   
   If you want to restrict the users to edit and delete only their own items (meaning when editing/deleting they have to be logged in with the same username as during having added the item), add the prefix SELF_ to the two steering-html-comments:
   
   <!-- SELF_TOEDITITEMS_LOGINS_SAME_AS_[!jokesform] -->
   <!-- SELF_TODELETEITEMS_LOGINS_SAME_AS_[!jokesform] -->
   
   

   
   

   Extension1: User stay on form when save clicked

   ×

   
   

   
   
   1. Remove the Line
      <label>&nbsp;</label><input type="submit" value="save" />
      in !jokesform.

   2. Again in !jokesform, replace the line
      <input type="hidden" name="thanks" value="!jokeslist" />
      with this:
      [$$$:!jokessave]

   3. Create a page exactly named !jokessave, its content must be this:
      
      
      [h:]
      <style>
      @keyframes sbmtbttndv {
      0% {background:yellow;left:-50px;top:-50px;}
      100% {background-color:lightgreen;left:0px;top:0px;}
      }
      </style>
      <script src="u5admin/shortcut.js"></script>
      <script>
      shortcut.add("Ctrl+S",function(){document.getElementById('sbmtbttn').click();})
      foundchanges=0;
      foundupload=0;
      monitorchangesoncedone=0;
      monitorchangesinitialdata='';
      monitorchangescurrentdata='';
      function u5uploaddetected() {
      foundupload=1;
      }
      function save() {
      foundupload=0;
      monitorchangesoncedone=0;
      monitorchangesinitialdata='';
      monitorchangescurrentdata='';
      oldbodybg=document.getElementById('body').style.background;
      document.getElementById('body').style.background='lightgreen';
      setTimeout("document.getElementById('body').style.background=oldbodybg",333);
      document.getElementById('sbmtbttndv').style.background='lightgreen';
      foundchanges=0;
      if(location.href.indexOf('formdataedit.php')<0)location.href='index.php?c=!jokeslist';
      foundchanges=0;
      }
      </script>
      <input type="hidden" name="thanks" value="save()" />
      <div id="sbmtbttndv" style="background:lightgreen;padding:7px;margin-left:20px;opacity:0.9;position:fixed;left:0;top:0;white-space:nowrap;animation-name:sbmtbttndv;animation-duration:1s;">
      <a href="index.php?c=!jokeslist">quit</a>
      &nbsp;&nbsp;&nbsp;
      <input id="sbmtbttn" type="submit" value="save [Ctrl+S]" /><span id="monitorchangesasterisk" style="visibility:hidden;color:red;margin-left:-7px;font-weight:bold;font-size:120%">*</span>
      <script>
      if(location.href.indexOf('formdataedit.php')<0&&location.href.indexOf('formdatadel.php')<0)document.getElementById('sbmtbttn').value='add [Ctrl+S]';
      function monitorchanges() {
      e=document.getElementsByName("u5form")[0].elements;
      monitorchangescurrentdata='';
      for(i=0;i<e.length;i++) {
      if(e[i].type!='hidden') {
      if(monitorchangesoncedone==0)monitorchangesinitialdata+=' '+e[i].value;
      monitorchangescurrentdata+=' '+e[i].value;
      }
      }
      monitorchangesoncedone=1;
      setTimeout("monitorchanges()",777)
      if(monitorchangesinitialdata==monitorchangescurrentdata&&foundupload==0){foundchanges=0;document.getElementById('sbmtbttndv').style.background='lightgreen';document.getElementById('monitorchangesasterisk').style.visibility='hidden';document.title=document.title.replace(/\*/g,'')}
      else {foundchanges=1;document.getElementById('sbmtbttndv').style.background='pink';document.getElementById('monitorchangesasterisk').style.visibility='visible';document.title='*'+document.title.replace(/\*/g,'')}
      }
      window.onload = function() {monitorchanges();}
      window.onbeforeunload = function() {
      if(foundchanges!=0&&location.href.indexOf('formdatadel.php')<0)return('There are unsaved changes which will be lost if you are proceeding!');
      if(top===self)self.focus();
      }
      </script>
      </div>
      [:h]
      
      
      

   
   

   
   

   
   

   Extension 2: Secure delete

   ×

   
   To prevent users from directly deleting content, add these lines somewhere between [fo:] and [:fo]
   
   <span id="scrdlt" style="display:none"><hr>
   <label>Confirm deleting by entering <b>99</b> here: </label><input size="77" style="width:100px" type="text" name="cliving" /><hr></span>
   <script>
   if(location.href.indexOf('formdatadel.php')>0)document.getElementById('scrdlt').style.display='inline';
   else document.u5form.cliving.value=99;
   </script>
   
   

   
   
   
   


2. Create a page rendering a list with all items (jokes) entered in the above form.
   Name this page !jokeslist
   example code
   ×

   
   [:add:!jokesform]
   [h:]<table>[:h]
   [name*,joke*|!jokesform|||1|<tr>
   <td><a href="e?n=!jokesform&id=$id">edit</a></td>
   <td>|<td><a href="d?n=!jokesform&id=$id">delete</a></td>
   </tr>|</td><td>|id desc:dat]
   [h:]</table>[:h]
   
   The :dat-command used here is explained at

   Do not forget to offer a link to !jokesform (that enables users to add new items).
   

   If you implemented “ONLYMINE”...

   ×

   
   ... you want to hide the edit and delete links which won’t work (because the respective items do not belong to the user logged-in).
   
   Add dynamic classnames and further the style to hide all edit and delete links. Then, with JavaScript, re-display only the links blonging to the user who is currently logged-in:
   
   [:add:!jokesform]
   [h:]<table>[:h]
   [name*,joke*|!jokesform|||1|<tr>
   <td><a href="e?n=!jokesform&id=$id" class="$ah" style="display:none">edit</a></td>
   <td>|<td><a href="d?n=!jokesform&id=$id" class="$ah" style="display:none">delete</a></td></tr>|</td><td>|id desc:dat]
   [h:]</table>[:h]
   
   [h:]
   <script> //this script shows all edit and delete links belonging to the user
   show=document.getElementsByClassName('<?php echo md5(u5flatidnlower($_SERVER['PHP_AUTH_USER'])) ?>');
   //If your u5CMS version is before 6.x.x, write strtolower instead of u5flatidnlower
   for(i=0;i<show.length;i++) {
   show[i].style.display='inline';
   }
   </script>
   [:h]
   
   Things to know:
   
   $ah looks like PHP but it is not, it is a recursive variable belonging to the :dat-command delivering the md5-hash of the username to whom the respective record belongs.
   
   The JavaScript re-displaying the edit and delete links uses PHP to get the username of the user currently logged in, therefore you have to switch on PHP in the config.php of your u5CMS installation!