Forum Discussion

dreamweaver's avatar
dreamweaver
Copper Contributor
Nov 29, 2019

WebPart form with JS submit preventDefault

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

developer
SharePoint Online

1 Reply

Sort By
  • dreamweaver's avatar
    dreamweaver
    Copper Contributor
    Nov 29, 2019

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


    };

     

Resources