提交函数上的共享点未被调用

Question

我有一个工作表格，其邮政方法将JSON中的值发送到外部网站。但是，如果我在SharePoint上托管表格，它将无法使用。

我必须用DIV包装表格，因为SharePoint不想仅使用表单标签getElementsByClassName。

现在，我陷入了提交按钮的AddEventListener函数，该函数未执行 handleformsubmit 。控制台没有显示错误。

html（缩短）：

<div id="formAbc">
    <form class="content__form abc">
        <div class="abc__input-group">
            <label class="abc__label" for="iNumber">iNumber</label>
            <input class="infrastruktur__input infrastruktur__input--text" id="iNumber" name="iNumber" type="text"/>
        </div>
        <div class="abc__input-group">
            <label class="abc__label" for="machineName">machineName</label>
            <input class="abc__input abc__input--text" id="machineName" name="machineName" type="text"/>
        </div>
        <button class="abc__button" type="submit">Absenden</button>
    </form>
</div>

JavaScript：AddEventListener：

const Formtest = document.getElementById('formAbc');
console.log(Formtest);
Formtest.addEventListener('submit', handleFormSubmit);

thangeformsubmit：

const handleFormSubmit = event => {
  event.preventDefault();
  console.log("default prevented");
 /// handling Data
};

还测试了用

包装我所有的JavaScript

document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
       //code
   }
}

SharePoint接受处理"提交"上的事情，我是否需要在按钮上进行onclick（）事件，还是在其他地方有错误？

Answer 1

问题似乎是<form>标签，因为SharePoint不允许在CEWP内部使用这些标签。我改用<fieldset>标签解决了这一点，然后解决了所有问题。

<fieldset>
 ....
</fieldset>

虽然您可以将服装标签作为<myform>，但这将破坏form.elements，并且它将无法正常工作。