WebPart form with JS submit preventDefault

Copper 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);


};