WebPart form with JS submit preventDefault

%3CLINGO-SUB%20id%3D%22lingo-sub-1039643%22%20slang%3D%22fr-FR%22%3EWebPart%20form%20with%20JS%20submit%20preventDefault%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1039643%22%20slang%3D%22fr-FR%22%3E%3CP%3EI%20created%20a%20web%20part%20and%20generated%20a%20form%20using%20Javascript.%20My%20objective%20is%20to%20handle%20the%20submit%20event.%26nbsp%3BIn%20the%20generated%20form%2C%20I%20have%20a%20button%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%26lt%3Bbutton%20id%3D%22btnOk%22%20name%3D%22btnOk%22%20class%3D%22btn%20btn-primary%22%26gt%3BRechercher%26lt%3B%2Fbutton%26gt%3B%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFor%20this%20I%20added%20an%20eventListener%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%3CSPAN%20class%3D%22pln%22%3Ewindow%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E.%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3EaddEventListener%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E(%3C%2FSPAN%3E%3CSPAN%20class%3D%22str%22%3E%22submit%22%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%2C%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20handleFormSubmit%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E)%3B%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3EWhen%20I%20submit%20i%20shoud%20trig%20the%20function%20handleFormSubmit...%3C%2FP%3E%3CPRE%3E%3CSPAN%20class%3D%22kwd%22%3Econst%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20handleFormSubmit%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3D%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22kwd%22%3Eevent%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22pun%22%3E%3D%26gt%3B%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22pun%22%3E%7B%3C%2FSPAN%3E%0A%20%20%20%20%3CSPAN%20class%3D%22kwd%22%3Econst%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20form%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3D%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20document%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E.%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3EgetElementById%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E(%3C%2FSPAN%3E%3CSPAN%20class%3D%22str%22%3E'requestForm'%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E)%3B%3C%2FSPAN%3E%0A%20%20%20%20%3CSPAN%20class%3D%22kwd%22%3Eevent%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E.%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3EpreventDefault%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E()%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%2F%2F%20converts%20to%20json%0A%20%20%20%20%3CSPAN%20class%3D%22kwd%22%3Econst%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20data%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3D%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20formToJSON%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E(%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3Eform%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E.%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3Eelements%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E)%3B%3C%2FSPAN%3E%0A%0A%20%20%20%20%3CSPAN%20class%3D%22kwd%22%3Eif%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22pun%22%3E(%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3ElistLoaded%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E)%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22pun%22%3E%7B%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22kwd%22%3Elet%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20btn%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3D%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20document%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E.%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3EgetElementById%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E(%3C%2FSPAN%3E%3CSPAN%20class%3D%22str%22%3E'btnOk'%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E)%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20%20%20%20%20btn%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E.%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3Edisabled%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3D%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22kwd%22%3Etrue%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20%20%20%20%20btn%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E.%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3EinnerText%20%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3D%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20handleMessages%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E(%3C%2FSPAN%3E%3CSPAN%20class%3D%22str%22%3E%22ongoingStatus%22%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E)%3B%3C%2FSPAN%3E%0A%0A%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22kwd%22%3Elet%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20msg%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3D%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20document%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E.%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3EgetElementById%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E(%3C%2FSPAN%3E%3CSPAN%20class%3D%22str%22%3E'showMessage'%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E)%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20%20%20%20%20msg%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E.%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3EinnerHTML%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3D%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20handleMessages%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E(%3C%2FSPAN%3E%3CSPAN%20class%3D%22str%22%3E%22ongoing%22%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E)%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20%20%20%20%20console%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E.%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3Elog%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E(%3C%2FSPAN%3E%3CSPAN%20class%3D%22str%22%3E%22BREAK%22%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E)%3B%3C%2FSPAN%3E%0A%20%20%20%20%3CSPAN%20class%3D%22pun%22%3E%7D%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20buildQuery%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E(%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3Edata%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E)%3B%3C%2FSPAN%3E%0A%3CSPAN%20class%3D%22pun%22%3E%7D%3B%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3EI%20would%20like%20to%20understand%20why%20the%20click%20on%20the%20button%20it's%20not%20getting%20in%20this%20function.%20The%20same%20code%20displayed%20in%20a%20basic%20HTML%20page%20works%20perfectly.%20I%20replaced%20the%20event.preventDefault()%20with%20event.stopImmediatePropagation()%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1039643%22%20slang%3D%22fr-FR%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1039747%22%20slang%3D%22fr-FR%22%3ERe%3A%20WebPart%20form%20with%20JS%20submit%20preventDefault%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1039747%22%20slang%3D%22fr-FR%22%3E%3CP%3EI%20had%20to%20put%20the%26nbsp%3B%3C%2FP%3E%3CPRE%3E%3CSPAN%20class%3D%22pln%22%3Ewindow%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E.%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3EaddEventListener%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E(%3C%2FSPAN%3E%3CSPAN%20class%3D%22str%22%3E%22submit%22%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%2C%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20handleFormSubmit%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E)%3B%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3EIn%20the%20method%20that%20build%20the%20form%20...%26nbsp%3B%3C%2FP%3E%3CP%3EI%20had%20a%20first%20eventListener%20to%20load%20the%20form%20generated%20with%20JS%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%3CSPAN%3Ewindow%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EaddEventListener%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22load%22%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3EbuildForm%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3Ethen%20in%20buildform()%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%3CSPAN%3Econst%20%3C%2FSPAN%3E%3CSPAN%3EbuildForm%20%3C%2FSPAN%3E%3CSPAN%3E%3D%20()%20%3D%26gt%3B%20%7B%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%3CSPAN%3Elet%20%3C%2FSPAN%3E%3CSPAN%3ErequestForm%20%3C%2FSPAN%3E%3CSPAN%3E%3D%20%3C%2FSPAN%3E%3CSPAN%3Edocument%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EcreateElement%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'form'%3C%2FSPAN%3E%3CSPAN%3E)%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%3CSPAN%3ErequestForm%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3EsetAttribute%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22class%22%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E%22form-horizontal%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%3CSPAN%3ErequestForm%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3EsetAttribute%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22id%22%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E%22requestForm%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%3CSPAN%3Elet%20%3C%2FSPAN%3E%3CSPAN%3EparentFormDiv%20%3C%2FSPAN%3E%3CSPAN%3E%3D%20%3C%2FSPAN%3E%3CSPAN%3Edocument%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetElementById%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22displayForm%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%3CSPAN%3EparentFormDiv%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EappendChild%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3ErequestForm%3C%2FSPAN%3E%3CSPAN%3E)%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20...%20building%20my%20stuff%20...%3CSPAN%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%3CSPAN%3E%2F**%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%20%20%20%20%20*%20Manage%20events%20on%20form%20submit%20%3A%20convert%20the%20form%20data%20in%20json%20and%20send%20to%20caml%20query%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%20%20%20%20%20*%2F%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%3CSPAN%3EformElt%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EaddEventListener%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22submit%22%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3EhandleFormSubmit%3C%2FSPAN%3E%3CSPAN%3E)%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%7D%3B%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

I created a web part and generated a form using Javascript. My objective is to handle the submit event. In the generated form, I have a button : 

 

<button id="btnOk" name="btnOk" class="btn btn-primary">Rechercher</button>

 

For this I added an eventListener :

 

window.addEventListener("submit", handleFormSubmit);

When I submit i shoud trig the function handleFormSubmit...

const handleFormSubmit = event => {
    const form = document.getElementById('requestForm');
    event.preventDefault();
// converts to json const data = formToJSON(form.elements); if (listLoaded) { let btn = document.getElementById('btnOk'); btn.disabled = true; btn.innerText = handleMessages("ongoingStatus"); let msg = document.getElementById('showMessage'); msg.innerHTML = handleMessages("ongoing"); console.log("BREAK"); } buildQuery(data); };

I would like to understand why the click on the button it's not getting in this function. The same code displayed in a basic HTML page works perfectly. I replaced the event.preventDefault() with event.stopImmediatePropagation();

1 Reply

I had to put the 

window.addEventListener("submit", handleFormSubmit);

In the method that build the form ... 

I had a first eventListener to load the form generated with JS : 

 

window.addEventListener("load", buildForm);

then in buildform() : 

 

const buildForm = () => {
let requestForm = document.createElement('form');
requestForm.setAttribute("class", "form-horizontal");
requestForm.setAttribute("id", "requestForm");

let parentFormDiv = document.getElementById("displayForm");
parentFormDiv.appendChild(requestForm);

... building my stuff ...

/**
* Manage events on form submit : convert the form data in json and send to caml query
*/
formElt.addEventListener("submit", handleFormSubmit);


};