search

RPTools / maptool

Virtual Tabletop for playing roleplaying games with remote players or face to face.
http://rptools.net
GNU Affero General Public License v3.0
786 stars 259 forks source link

JS added elements to a form in a DIALOG do not get passed to the action macro #2310

Open tomcouperus opened 3 years ago

tomcouperus commented 3 years ago

Describe the bug After adding input elements (be they input, select or textarea) to an html form in a dialog with javascript, those elements do not get passed to the macro specified in the action attribute of the form. Despite rendering correctly, and able to be interacted with with javascript.

To Reproduce

  1. Make a dialog with a form in it, with the action attribute set to a macro that reads out the macro.args and method to json.
  2. Add an input to the form, with the name "thisWorks". Type does not matter.
  3. Add an input type="submit".
  4. Make a javascript to append a new input, with the name "doesNotWork", to the form.
  5. Open the dialog, fill something in both inputs
  6. Hit submit and watch as only "thisWorks" get displayed.

Expected behavior The input elements added by javascript to also be passed to the macro.args of the action macro.

MapTool Info

Desktop (please complete the following information):

Current workaround:

  1. Make an input type="button" element instead of a type="submit". Have that execute a js function to collect all the inputs' names and values in the form in question, formatted whichever way you like (stringproplist, json, etc.).
  2. Make a second form, with just one input of type="hidden".
  3. Make the js collector function put the collected data in this hidden input's value.
  4. Submit this second form via the form.submit() method of js.
  5. Use mtMacro to reassemble the data
aliasmask commented 3 years ago

Important Note. My bug occurs in 1.8 beta 2, but not in 1.7.0.

This may be related. I found using the type="button" to submit the form (is it supposed submit at all?) but it submits the form data before any related onClick js actions. Here's the code I used to test.

text() - UDF used to get text from a macro

[H: macroName = arg(0)]
[H, if(argCount() >= 2): this = arg(1); this = getMacroLocation()]
[H: mapName = getTokenMap(this)]

[H, if(!json.isEmpty(mapName)): index = getMacroIndexes(macroName,",",this,mapName); index = ""]
[H, if(!json.isEmpty(index)): output = getMacroCommand(index,this,mapName); output = ""]

[H: macro.return = output]

test.js - js macro holding functions

function check() {
  document.getElementById("myCheck").checked = true;
}

function uncheck() {
  document.getElementById("myCheck").checked = false;
}

test - main macro to demonstrate

[H: link = macroLinkText("process@"+getMacroLocation())]

[H: js = text("test.js",getMacroLocation())]
[H: html = strformat('
<html>
<head>
   <script>%{js}</script>
</head>
<body>
<form method="json" action="%{link}" >
<input type="hidden" name="checked" value="0" />
Checkbox: <input name="checked" value="1" type="checkbox" id="myCheck">

<button onClick="check()">Check Checkbox</button>
<button onClick="uncheck()">Uncheck Checkbox</button>
</form>

</body>
</html>
')]

[frame5("test"):{

[r: html]

}]

process - macro to show passed form variables [dialog("D"):{<pre>[R: json.indent(replace(macro.args,"<","&lt;"))]</pre>}]

Video Demo: https://drive.google.com/file/d/1sG3i4UtN6k8twVP_rDGXTbrgZogparqQ/view?usp=sharing (video is very blurry viewing with google, but if you download it's much clearer)

aliasmask commented 3 years ago

Regarding my post, I seem to recall the type="button" not submitting before and was latter added as a feature. Now that we have javascript, I'm thinking this should be undone. That's if I'm remembering correctly.

aliasmask commented 3 years ago

Important Note. My bug occurs in 1.8 beta 2, but not in 1.7.0.