add addToForm utility function

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.8.4 - Add addToForm(n,v) option and $form - to make contextmenu form submission easier.
  - v2.8.3 - Let feedback include lat lon for context menu on general map.
  - v2.8.2 - Improve direction handling of 3d objects.
  - v2.8.1 - Fix old tracks re-appearing afer hide/show. Issue #135

README.md

@@ -11,6 +11,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.8.4 - Add addToForm(n,v) option and $form - to make contextmenu form submission easier.
 - v2.8.3 - Let feedback include lat lon for context menu on general map.
 - v2.8.2 - Improve direction handling of 3d objects.
 - v2.8.1 - Fix old tracks re-appearing afer hide/show. Issue #135
@@ -361,6 +362,16 @@ There are some internal functions available to make interacting with Node-RED ea
 
  - **feedback()** : it takes 2, 3, or 4 parameters, name, value, and optionally an action name (defaults to "feedback"), and optional boolean to close the popup on calling this function, and can be used inside something like an input tag - `onchange='feedback(this.name,this.value,null,true)'`. Value can be a more complex object if required as long as it is serialisable. If used with a marker the name should be that of the marker - you can use `$name` to let it be substituted automatically.
 
+ - **addToForm()** : takes a property name value pair to add to a variable called form. When used with contextmenu feedback (above) you can set the feedback value to `"$form"` to substitute this accumulated value. This allows you to do things like `onChange='addToForm(this.name,this.value)'` over several different fields in the menu and then use `feedback(this.name,"$form")` to submit them all at once. For example a simple multiple line form could be:
+
+ ```
+var menu = "Add some data <input name='foo' onchange='addToForm(this.name,this.value)'></input><br/>"
+menu += "Add more data <input name='bar' onchange='addToForm(this.name,this.value)'></input><br/>"
+menu += '<button name="my_form" onclick=\'feedback(this.name,"$form",null,true)\'>Submit</button>'
+
+msg.payload = { command: { "contextmenu":menu } }
+```
+
  - **delMarker()** : takes the name of the marker as a parameter. In a popup this can be specified as `$name` for dynamic substitution.
 
  - **editPoly()** : takes the name of the shape or line as a parameter. In a popup this can be specified as `$name` for dynamic substitution.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.8.3",
+    "version": "2.8.4",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "cgi": "0.3.1",

worldmap/worldmap.js

@@ -667,9 +667,10 @@ var addThing = function() {
 }
 
 var feedback = function(n,v,a,c) {
+    if (v === "$form") { v = form; }
     if (markers[n]) {
         var fp = markers[n]._latlng;
-        ws.send(JSON.stringify({action:a||"feedback", name:n, layer:markers[n].lay, lat:fp.lat, lon:fp.lng, value:v}));
+        ws.send(JSON.stringify({action:a||"feedback", name:n, value:v, layer:markers[n].lay, lat:fp.lat, lon:fp.lng}));
     }
     else {
         if (n === undefined) { n = "map"; }
@@ -678,10 +679,16 @@ var feedback = function(n,v,a,c) {
     if (c === true) { map.closePopup(); }
 }
 
+var form = {};
+var addToForm = function(n,v) {
+    form[n] = v;
+}
+
 // allow double right click to zoom out (if enabled)
 // single right click opens a message window that adds a marker
 var rclicked = false;
 var rtout = null;
+
 map.on('contextmenu', function(e) {
     if (rclicked) {
         rclicked = false;
@@ -696,6 +703,7 @@ map.on('contextmenu', function(e) {
             rclicked = false;
             if ((hiderightclick !== true) && (addmenu.length > 0)) {
                 rclk = e.latlng;
+                form = {};
                 rightmenuMap.setLatLng(e.latlng);
                 map.openPopup(rightmenuMap);
                 setTimeout( function() {