I have a simple page with a form.
For some reason the form gets sent 1000s of times until I both close the webpage and Wappler.
I also have a custom JS script that refers to a canvas within the form.
Could this trigger the form to submit continuously?
I’ve been trying to locate what triggers the submit, but I cannot seem to trace it.
Any debug suggestions how to trace the error?
Any suggestion welcome.
Very hard to help you without seeing the code.
If there is no other way to share your code, you can always paste it here.
If the form is called form1, using Visual Studio Code I’d search in all files form1.submit()
The same search can be made using Wappler:
Is it a normal form that is submitted or a serverconnect form and when exactly does it submit, is this on page load or after some action?
Thanks for the suggestions.
It’s a serverconnect form:
<form id="form1" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/uploadaction.php" dmx-param:receiver="" dmx-on:upload="notifies1.success('uploaded')">
The form gets triggered by a flow (that is triggered by a (non-submit) button):
<script is="dmx-flow" id="add_tap" type="text/dmx-flow">[
{ runJS: {function: "canvastoimg", name: "canvastoimg"} },
{ run: {action: "{{form1.submit(true)}}", name: "submit"} }
]
</script>
In the JS (canvastoimg) I include a blob process:
canvas.toBlob(function(blob) {
var newImg = document.createElement('img'),
url = URL.createObjectURL(blob);
var form = document.getElementById('form1');
form.dmxExtraData['file'] = blob;
}, 'image/jpeg', 0.80
);
}
Could it be that the getElementById triggers the form? Or the dmxExtraData (couldnt’ find any documentation on this one)?
Does the button have type="button" on it, when you don’t set the type of a button and it is inside a forn it will be handled as a submit button.
The getElementById and dmxExtraData can’t trigger the form. The toBlob method is asynchronous, the callback will probably be called after your submit and the file data you added will not be included in the submit. You should return a promise and resolve that when the blob is created, the flow action runJS will wait until the promise is resolved before the next action is executed.
I can’t tell with the current code you’ve given what is causing the recursion of the submit, you could add a console.log to your canvastoimg function to see if that is also called multiple times, then you know if the whole flow is also called each time.
Thanks Patrick,
The trigger button is outside the form.
I just found that it occurs within Wappler. As soon as I saved the file (without opening in the browser and without it being open anywhere) it starts firing.
So it is a mystery what is triggering the form.
Are there other ways to see what is going on “behind the scenes” ? i.e. what wappler is sending (only uploading on save I assume?)
ps. also the design view gets greyed out after some time. I recall reading somewhere the design view triggers things?
Happy to share the code to a private message to save some time going back and forth?
To see what the form submits you have to open it in the browser and then you can inspect the data being submitted in devtools.
The design view probably stops responding after a while due to the many commits and that is causing it to grey out.
Saving the file should not trigger anything on the page, try commenting out the flow component and button and check if it then still submits the form. Commenting in html can be done by placing <!-- and --> around the tags.
As soon as I add something within the form part of the code and save it, it starts submitting form.
When I comment out the flow it doesn’t occur (which I tried already earlier).
The issue is, that it seems not to get triggered when using the page in the browser.
It only seems to occur when I work on the page within Wappler… and there is no console in Wappler to trace what is happening… or is there?
ps. also this is also happening (as mentioned elsewhere too) - not sure if it’s related (CPU 149%):
Perhaps you could send me that specific page in a private message, then I can try to reproduce the problem. Also send me the Wappler log file, it could perhaps contain some useful information.
Hi Patrick, I’ve sent you all info a week ago, just wanted to make sure you received my message.
Is there a way to see what is going on under the hood, ie. what Wappler is sending out to the server? A type of console or detailed log that shows all commands sent to the server?
Doing a console.log in javascript is visible in Wappler by clicking on 
.
Do you have a datetime object on the page? (Sometimes it’s the simple things!)
Thanks for thinking along @scalaris but there is no datetime object.
I stripped the page to the bare minimum to see where the error is. This is what I have now:
<!doctype html>
<html>
<head>
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<meta name="ac:base" content="/test">
<meta charset="UTF-8">
</head>
<body is="dmx-app">
<script is="dmx-flow" id="test" type="text/dmx-flow">[
{
run: {action: "{{form1.submit(true)}}", name: "submit"}
}
]</script>
<form id="form1" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/SCtest.php">
<div> when I type / add anything there it starts </div>
</form>
<button dmx-on:click="test.run()">
Button
</button>
</body>
</html>
As soon as I type in a single character in the DIV section within the FORM block, it starts triggering the FORM submit.
When I delete the DIV section within the FORM block, and type something within the FORM block the error does not occur.
I’ve also emptied all columns in the server side connect to ensure this is not causing any trouble:
Still… as soon as I type something within the DIV it starts…
This is an absolute mystery to me and starts to look like a bug.
Ideas and suggestions how to further investigate are very welcome.
Why do you have the submit in a flow? Why not just set the button to submit?
I think the way you have it now will not work. You are running the form action twice. Once on submitting the form and once in the flow. Take the action out of the form tag and put it in your flow if you want to use a flow.
Sorry if I don’t understand what it is you are trying to do. 
Thanks for your comments Brad. I stripped the page to the bare minimum to narrow down the issue. I am aware this seems illogical in this simplified page, but I have reasons to do it this way =)
I do not think the form is submitted twice in this set up. The button is outside of the form so it should not trigger the form only the flow… Unless I missed something?
How and where are you typing something the div? I see in your code where you have a div. SHouldn’t that be a form field? How are you typing in that div?
