0

I am placing my HTML form inside of another system and cannot get my own function to run during the submit event.

I cannot use Form onSubmit='foo' as the system has a script that automatically populates the onSubmit of any form placed inside of it (overwriting anything placed beforehand).

Additionally, this system has its own validation that it performs at the submit event.

So I am trying to use the EventListener to run my function as well as the system one at form submission, however it is not working. The console.log doesn't even show up.

I see that the system function has: 

document.forms[0].submit();

So it must be firing before my function causing mine to never run as the system function either submits or cancels the submit it appears.

Here is my eventListener code.

var formRef = document.forms.myForm;
myForm.addEventListener('submit', function(evt) {
  evt.preventDefault();
  console.log('event fired');
  //checkBlanks function loops through the form looking for blanks,
  //if a field is blank it changes it to red and then fires the system's
  //confirmation dialogue. Else it fires the system's confirmation dialogue.
  checkBlanks();
});

In the event that it matters, my form is inside of the system's form and the submit button is located in the system's portion of the window. I tried to addEventListener the button but it says it cannot get property of undefined reference. Window Example

TheAngryAuditor
  • 39
  • 8
  • 2
    you can try registering your event in capturingphase. hopefully the system's listener is in bubbling phase myForm.addEventListener('submit', function(evt){ .........}, true); – karthick Jun 14 '17 at 20:56
  • Thanks for this, I read up on this and this is good to know. Unfortunately it didn't help in this scenario. – TheAngryAuditor Jun 16 '17 at 19:49
  • 1
    you can't have nested for in HTML https://stackoverflow.com/questions/379610/can-you-nest-html-forms . – gaurang171 Jun 16 '17 at 19:58
  • @karthick I am thinking due to the "nested" nature that myForm is the name of the form I have created and that I need to be accessing the form that the button actually resides in. – TheAngryAuditor Jun 16 '17 at 20:00
  • @TheAngryAuditor. You cant have nested forms. I was under the impression that there is an iframe or something of that sorts. Now after seeing the picture its clear. It wont work. – karthick Jun 16 '17 at 20:01
  • Is it an option just to modify the existing event handler for the parent form to take yours into account? Otherwise you could do a kind of hack, by not using a form at all, only input fields and a button. You could listen for the click event on your button (instead of form submit, because there is no other form), then select the text of the fields you want and call your function along with an AJAX post manually. Not really a great practice, but if you can't modify the other code, it might be worth considering. – cheesenthusiast Jun 16 '17 at 20:03
  • @TheAngryAuditor: can you post your markup also in the question – karthick Jun 16 '17 at 20:09
  • @karthick "Nested" was a misnomer, I was aware that nesting was a no no but was unaware of iframes. (I am not very familiar with HTML). Digging through in the files I found a defined iframe titled "a window containing the HTML form", as well as a dynamic one titled "this is the main content window. Now I can try accessing the other frame i.e. parent.nameofotheriframe.getElementById('foo'). – TheAngryAuditor Jun 16 '17 at 20:23
  • @karthick which part of the markup did you need to see? I am still struggle-bussing trying to figure out how to access the button on the main pages iframe. I have tried using window.frames as well as form.elements to no avail. – TheAngryAuditor Jun 21 '17 at 20:41
  • the parent form and the child form with the submit button. – karthick Jun 21 '17 at 20:44
  • The form code is rather large, around 7K lines. Is there anything specific to look for? I was reading that iframes have to have the same source. Both of the frames are the same .net location, but in different directories. Could that be causing my problems? – TheAngryAuditor Jun 21 '17 at 20:54

1 Answers1

0

All you need to do is to call the form tag or you call an #id to it

enter code here

document.querySelector('form').addEventListener('submit',execute);
 function execute(e){
       console.log('submitting...');
            e.preventDefault();
          }
Dev_Olabid
  • 1
  • 1
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 11 '21 at 20:33