0

So I have a simple form in RiotJS

<tag-form>
  <form onsubmit={handleSubmit} id='someForm'>
    <input name='param1' />
    <button type="submit">Submit</button>
  </form">
  <script>
    this.handleSubmit=function(e) { console.log(e); }
  </script>
</tag-form>

That works just fine when I submit via the button. But when I use an external button to trigger the submit of the form

document.getElementById('someForm').submit();

it doesn't work because it somehow does not run the riotjs onsubmit function, but the native submit function, which is not what I want...

How to fix that?

Gatsbimantico
  • 1,822
  • 15
  • 32
Willem Mulder
  • 12,974
  • 3
  • 37
  • 62

1 Answers1

1

After some fiddling I fixed it like this:

<tag-form>
  <form onsubmit={handleSubmit} id='someForm'>
    <input name='param1' />
    <button type="submit" id="someButton">Submit</button>
  </form">
  <script>
    this.handleSubmit=function(e) { console.log(e); }
  </script>
</tag-form>

and then call .click() on the button, instead of .submit() on the form.

document.getElementById('someButton').click();

This seems to work fine!

Willem Mulder
  • 12,974
  • 3
  • 37
  • 62
  • You can alway call up the riot tag by doing `document.querySelector('tag-form')._tag`. This will give you access to the tag anywhere. Then you can call the `handleSubmit()` function programmatically, rather relying on an id/class being there. Otherwise you can look at `observe()` which is cleaner than hunting down bound elements in the DOM. There are many ways to skin a cat though. – Simon Apr 29 '17 at 08:52