-1

I have this code:

<a href="javascript:void(0);" title="Save" onclick="return validate(event, document.thisForm)"></a>

and I would like to add at runtime by JS something like this:

<a href="javascript:void(0);" title="Save" onclick="return validate(event, document.thisForm) && submitForm(document.thisForm)"></a>

My idea was doing like this but I dont know how to add AND operator:

form.addEventListener('submitForm', function (e) {
  e.preventDefault();
  alert('onclick handler called');
}, false);
step
  • 2,254
  • 2
  • 23
  • 45
  • 1
    you call call two functions like `a(); b();` next to each other – Kaushik Jan 31 '20 at 10:52
  • @Kaushik I need call them with AND operator and with return. – step Jan 31 '20 at 10:56
  • You can try something analog to what is shown here, https://stackoverflow.com/a/9814/10955263 This stores the reference to the existing event handler function first (which can be one created implicitly by `onclick="..."`), and then overwrites the event handler with an new one, that calls the _old_ one, and additionally does its own thing. – 04FS Jan 31 '20 at 11:08
  • @04FS Looks like good solution but still I need AND operator due return of event. – step Jan 31 '20 at 11:13
  • Well then put it between the two function calls that are made there ... `old(); fn();` -> `old() && fn()` – 04FS Jan 31 '20 at 11:15
  • @04FS Yes simple answer but when I will put more different calls? – step Jan 31 '20 at 11:25
  • If you have to add a third function and still join everything with AND, then repeat the same process a second time? `A && B && C == (A && B) && C`, after all. – 04FS Jan 31 '20 at 11:29

2 Answers2

-1
  1. 'submitForm' is referenced as a function in your onclick attribute, but you're trying to use it as an event. It won't work like that, <form> doesn't emit an event called 'submitForm', and it's not being called when you call a submitForm function. <form> does have a submit event.
  2. You should avoid using the onclick attribute (and other on* attributes). Use IDs and addEventHandler to add a click event handler. Then you can just write an entire multi-line function in that handler.
  3. You can also use an <input> or <button> of type=submit and then add an event listener of type submit to the form (if your form is a <form> element). Then you will not need to call any other functions from event listeners. The form will handle that.
Mat Sz
  • 2,524
  • 1
  • 10
  • 23
-1

To not change the HTML itself you can do this

window.addEventListener("load",function() {
  let saveBut = document.querySelector('a[title="Save"]');
  let form = document.querySelector("[name=thisForm]");
  form.addEventListener("submit",function(e) { e.preventDefault(); }); // stop submission by other means than the link
  saveBut.onclick=null; // remove the inline event handler
  saveBut.addEventListener("click",function(e) {
    e.preventDefault(); // stop the link's click 
    if (validate(e, form)) submitForm(form); // call submitForm if valid
  });
});
mplungjan
  • 169,008
  • 28
  • 173
  • 236