Question

I have a form with two submit buttons:

<form>
  ...
  <input type="submit" name="update" value="Update"></input>
  <input type="submit" name="clean"  value="Clean"></input>
</form>

Depending on which button I click, I must do two different things. update will add some form data to internal structures, and clean will clean the form and the internal structures.

The problem I have is that I am unable to catch those two different events with Evently/jQuery. I can either process the form/submit event, but I get no information about which button has been pressed (according to the jQuery documentation “No submit button value is serialized since the form was not submitted using a button”).

Or I have tried catching the update/click and clean/click events, but I have had no success in structuring my Evently directory tree to catch that. This is my current structure to try to catch those events:

evently/filterconf/_init/
evently/filterconf/_init/selectors/form
evently/filterconf/_init/selectors/form/clean
evently/filterconf/_init/selectors/form/clean/click.js
evently/filterconf/_init/selectors/form/update
evently/filterconf/_init/selectors/form/update/click.js
evently/filterconf/_init/mustache.html

But those click.js are not being triggered. Any ideas on how to solve this? Or do you have a suggestion of a completely different approach to handle those two submit buttons in Evently?

Answer 1

Well, since it will just perform ajax call, and not in fact submit whole form with POST, you don’t need those buttons to be submit buttons even. Just do:

  <button id="btn_update" value="Update"></button>
  <button id="btn_clean"  value="Clean"></button>

And structure your evently folders as:

evently/filterconf/_init
evently/filterconf/_init/selectors
evently/filterconf/_init/selectors/#btn_clean/
evently/filterconf/_init/selectors/#btn_clean/click.js
evently/filterconf/_init/selectors/#btn_update
evently/filterconf/_init/selectors/#btn_update/click.js

Or, with your approach it would be something like:

evently/filterconf/_init/selectors/form/submit.js

So you would attach submit event, not click event.

submit handler should look like:

  function() {
      var form = $(this);
      var doc = form.serializeObject();
      // ...
  }