Any way to intercept the form submit

[amnesia7]

I have a function that needs to be run when I submit my wiselinks-form but before wiselinks actually processes the form fields and loads the new page.

Before I added wiselinks I was using e.originalEvent.type.toLowerCase() === "submit" to check for the form being submitted. If it was then I used e.preventDefault(); to stop it, then I ran my function and then on completion of my function I submitted my form using myForm.submit();

Unfortunately, wiselinks seems to be processing the page as soon as the form is submitted which means my code above actually seems to be causing it to be submitted twice (the original key press and then .submit()) and so the page gets processed twice.

Is there any way I can prevent wiselinks from processing the page as soon as the form is submitted and only do it when I submit it using myForm.submit();?

Thanks

[amnesia7]

I think an easier to understand example would be only submitting the form once a function had been run to check the form fields were valid.

[amnesia7]

Should I be using something like $(document).off('submit', 'form[data-push], form[data-replace]').on('submit', '#myform', myFunction) so that calling the actual wiselinks function on submit is cancelled and it just uses mine and then maybe reapplying it at the end of my function using the code here: https://github.com/igor-alexandrov/wiselinks/blob/master/build/wiselinks-1.1.2.js#L198-L205

If that's correct, I could do with some guidance on how to re-apply the wiselinks submit function correctly.

The rest of the function looks ok but I'm not sure what I would replace this line with

if ((form = new _Wiselinks.Form(self, $(this)))) {

Thanks

[amnesia7]

I got it to work using:

// disconnect wiselinks form submit so it can be applied on-demand
$(document).off('submit', 'form[data-push], form[data-replace]');

// actually submit the form using wiselinks
var form;
if (form = new _Wiselinks.Form(window.wiselinks.page, $("#myForm"))) {
  form.process();
  event.preventDefault();
}

but I'm a bit unsure that this code is the right way to do it because it uses _Wiselinks which will be calling something on the internals of wiselinks rather than something I can rely on.

What can be done about this?

[igor-alexandrov]

Hello, sorry for delay. Rather good question. Maybe some callbacks should be added? What do you think?

Did you tried something like this:

$('your_form').off('submit').on('submit'
      (event) ->
        event.stopPropagation()

        # process your data here
    )

[amnesia7]

Callbacks sound promising @igor-alexandrov.

Hopefully, that should allow me to listen out for the trigger when the form is submitting.

At this point I could then run my function and let the form continue to submit or event.preventDefault() if I need it to not submit for any reason.

I've tried your code and that stops the form working like a wiselinks-form so that the form data could be checked but it also means that if my function/checks does pass successfully then it loads the form results using a page refresh rather than as a wiselinks-form and just update a partial. I need it to put it back as a wiselinks-form again after I've run my function/checks.

Col

[amnesia7]

After a little more thought, the function that I need to call onsubmit needs to prevent form submission, then do an async lookup and use the result of this lookup to decide whether the form should then be submitted or not (ie don't submit or call the equivalent of the wiselinks-form submit function). So it would be useful to have a way to listen for the trigger and cancel the form submission but then be able to submit the form as a wiselinks-form from my own code.

[igor-alexandrov]

Do you have any working examples of such code?

[amnesia7]

Sorry, I don't but hopefully this will give you a clue.

$('body').on('submit', '#my_form', lookupSomething);

function lookupSomething(e) {
  ...
  if (e.originalEvent && e.originalEvent.type && e.originalEvent.type.toLowerCase() === "submit") {
    e.preventDefault();
  }
  // Perform lookup
  if (valueSet && !lookedUp) {
    .... do lookup
    lookedUp = true;
    submitMyFormRequired(e);
  }
  else {
    submitMyFormRequired(e);
  }
}

function submitMyFormRequired(e) {
  e.preventDefault();

  // Submit form if that was the intention
  if (e.type.toLowerCase() === "submit" || e.originalEvent && e.originalEvent.type && e.originalEvent.type.toLowerCase() === "submit") {
    var submitForm = $(e.target).closest('form').attr("id"),
        myForm = $("#" + submitForm);

    ... submit form here
  }
}

Something like that.

If I had a trigger to listen for then I could probably preventDefault() if valueSet && !lookedUp, then continue to perform my lookup and set lookedUp = true and after doing it submitMyFormRequired would perform the submit using .submit(); which would then bypass the lookup functions and just submit the form as expected.

I think a callback after submitting but before anything was processed would just mean I would change it to be:

$('body').on('form:submitting', '#my_form', lookupSomething);

Does that help?

Col

[amnesia7]

@igor-alexandrov, I've just been trying to add a form:submitting trigger to your javascript file (https://github.com/igor-alexandrov/wiselinks/blob/master/lib/assets/javascripts/_form.js.coffee#L6) to see if it would resolve my problem.

My new trigger gets called but my form ends up being submitted twice - once normally and the other time because my submitMyFormRequired function calls .submit() and I can't use .off() to disable the wiselinks submitting because there's no way to re-enable it again.

Therefore, I think it would be good if there was an approved way of doing what I've shown in https://github.com/igor-alexandrov/wiselinks/issues/54#issuecomment-30167661 without having to use the private _Wiselinks so that wiselinks form submitting could be removed and then re-applied as required.

I would offer to help with a pull request if I could but I've not really used coffeescript (I just tested my trigger using the built js file).

Thanks

Col

[igor-alexandrov]

Ok, I think that we can add some method (process) for example to Wiselinks class that will accept jQuery selector as an argument and process it with Form or Link class depending on what it actually is.

What do you think? Then you will be able to add custom processing for some links and forms.

[amnesia7]

Yes, that's sounds like it would resolve my issue because I could then use .off() to turn off the default form processing and use this new method to apply it after I've processed the form data.

Thanks