form-submit 相关问题

当用户尝试提交表单时，submit事件将发送到元素。它只能附加到表单元素。可以通过单击显式<input type =“submit”>，<input type =“image”>或<button type =“submit”>，或者在某些表单元素具有焦点时按Enter键来提交表单。

HTML 表单问题 - form.addEventListener 不起作用

我正在构建一个网络应用程序，但无法让我的表单提交响应。我正在使用 firebase，希望将响应存储在数据库中。我的 HTML 表单代码：我正在构建一个网络应用程序，但无法让我的表单提交响应。我正在使用 firebase，希望将响应存储在数据库中。我的 HTML 表单代码： <form action="#" method="POST" class="u-clearfix u-form-spacing-10 u-form-vertical u-inner-form" style="padding: 10px;" id="waitlist"> <div class="u-form-group u-form-name"> <label for="name" class="u-label">Name</label> <input type="text" placeholder="Enter your Name" id="name" name="name" class="u-grey-10 u-input u-input-rectangle u-radius-10" required="" autocomplete="name"> </div> <div class="u-form-email u-form-group"> <label for="email" class="u-label">Email</label> <input type="email" placeholder="Enter a valid email address" id="email" name="email" class="u-grey-10 u-input u-input-rectangle u-radius-10" required="" autocomplete="name"> </div> <div class="u-form-group u-form-phone u-form-group-3"> <label for="phone" class="u-label">Phone(Optional)</label> <input type="tel" pattern="[$\-]?([0-9]{3})[$\-]?[\/\s]?([0-9\-]{3,9})" placeholder="Enter Phone #" id="phone" name="phone" class="u-grey-10 u-input u-input-rectangle u-radius-10" autocomplete="tel"> </div> <div class="u-align-left u-form-group u-form-submit"> <button type="submit" class="u-active-palette-3-base u-border-none u-btn u-btn-round u-btn-submit u-button-style u-hover-palette-3-base u-palette-1-base u-radius-10 u-btn-1">Submit</button> </div> </form> 我的Javascript： <script type="module"> document.addEventListener("DOMContentLoaded", function () { console.log("Page fully loaded"); const form = document.querySelector("#waitlist"); const thankYouMessage = document.getElementById("thank-you-message"); if (!form) { console.error("Form #waitlist not found"); return; } form.addEventListener("submit", async function (e) { e.preventDefault(); try { console.log("Form submitted"); const name = document.getElementById("name").value; const email = document.getElementById("email").value; const phone = document.getElementById("phone").value; const collectionRef = collection(firestore, 'responses'); await addDoc(collectionRef, { name: name, email: email, phone: phone, timestamp: firebase.firestore.FieldValue.serverTimestamp() }); document.getElementById("name").value = ""; document.getElementById("email").value = ""; document.getElementById("phone").value = ""; thankYouMessage.style.display = "block"; } catch (error) { console.error("Error adding response. Please try again later.", error); thankYouMessage.innerText = "Sorry, something went wrong. Please try again."; thankYouMessage.style.color = "red"; thankYouMessage.style.display = "block"; } }); }); </script> 我正在尝试在网络控制台中使用断点，我发现一切都“很好”，直到到达下面的行，然后它一直跳到底部。 form.addEventListener("submit", async function (e) { 我是个十足的菜鸟，还没有像我现在知道的那样使用 github。我的网站加载正确，但我只有一种表单。当我点击提交时，什么也没有发生。在后端，它卡在 addEventListener 的那一行上。我遇到的一些错误： (index):299 未捕获类型错误：form.addEventListener 不是函数在 HTML 文档中。（（索引）：299：12） DOMException：无法在“Element”上执行“querySelectorAll” （但我没有在代码的任何部分使用 querySelectorALL。）使用 document.getElementById 而不是 querySelector。 form = document.getElementById("#awaitlist") form.addEventListener("submit", async function() {})

javascript html forms addeventlistener form-submit

回答 1 投票 0

当有多个表单时，提交事件会被多次触发

我在一个php页面中有多个表单，我像这样在parentForm数组中添加了表单 ParentForm.push($('.js-address-form 表单')); 问题是当我提交一份表单时 onsubmit 事件被触发......

javascript jquery forms form-submit onsubmit

回答 1 投票 0

Python Selenium 提交仅在调试模式下有效

我的带有selenium的python程序有一个奇怪的行为：当我在调试模式下启动它但在正常模式下启动它时它运行得很好。在正常模式下不考虑 FromDate。我以为...

python selenium-webdriver debugging form-submit webdriverwait

回答 1 投票 0

在javascript弹出窗口中发送POST请求

我正在尝试将 POST 请求发送到 javascript 弹出窗口。我可以使用新选项卡来完成此操作，但想使用弹出窗口来完成。 var mapForm = document.createElement("form"); 地图表单.target =

javascript forms form-submit

回答 1 投票 0

“event.preventDefault();”不适用于提交按钮

问题是，当我单击提交按钮时，页面正在重新加载，从而阻止代码工作，尽管我有“event.preventDefault();”。 HTML：问题是，当我单击提交按钮时，页面正在重新加载，从而阻止代码工作，尽管我有“event.preventDefault();”。 HTML： <form class="links-add-container hidden"> <input type="text" class="links-name-input links-input" spellcheck="false" placeholder="Название ссылки" /> <input type="text" class="links-link-input links-input" spellcheck="false" placeholder="Ссылка" /> <button class="links-add-button button submit-button" type="submit"> <i class="fas fa-plus-square"></i> </button> </form> JS： const addLinkButton = document.querySelector(".links-add-button"); addLinkButton.addEventListener("click", addLink); function addLink(event) { event.preventDefault(); //the actual code. It doesn't work because of the page reload. } 我尝试更改“按钮”上按钮的类型，但这导致了另一个问题。页面不会重新加载，但代码不起作用。当我单击按钮时没有任何反应，甚至控制台中的错误也不会出现。我应该补充一点，这是我的旧代码，半年前我使用它时没有出现这样的问题。我很可能错过了一些明显的东西，但我不明白是什么。请帮忙。您的 JavaScript 事件侦听器似乎正确阻止了默认的表单提交行为。但是，该问题可能与您在表单中使用 <button> 有关。当表单中有 <button> 且未指定 type 属性时，它默认为 "submit"，导致表单提交。在您的情况下，您正在阻止默认行为，但由于按钮具有默认的 type "submit"，因此它可能仍会触发表单提交。要解决此问题，请将按钮的 type 属性明确设置为 "button" 以防止其触发表单提交： html <form class="links-add-container hidden"> <input type="text" class="links-name-input links-input" spellcheck="false" placeholder="Название ссылки" /> <input type="text" class="links-link-input links-input" spellcheck="false" placeholder="Ссылка" /> <button class="links-add-button button submit-button" type="button"> <i class="fas fa-plus-square"></i> </button> </form> 现在，使用 type="button"，单击按钮将不会触发表单提交，并且 addLink 函数内的 JavaScript 代码应该按预期工作。确保检查您的环境中是否有任何其他脚本或更改可能会影响行为，因为提供的代码应该会阻止提交表单。

javascript html submit form-submit preventdefault

回答 1 投票 0

为表单提交时的每条记录创建唯一 ID

我是 Google Apps 脚本的新手，刚刚开始了解其工作原理。一位团队成员为我正在做的一些工作编写了一个简单的脚本。该脚本本质上是在以下任意一个

excel google-apps-script google-sheets form-submit unique-key

回答 2 投票 0

表单提交被取消，因为表单未连接 - Laravel 8 中的 VueJs

我想测试控制台日志中的响应。我正在使用谷歌检查工具。我在网络>>XHR 中看不到任何响应。但我看到“表单提交被取消，因为 f...

laravel forms vue.js form-submit code-inspection

回答 2 投票 0

Formsubmit.co 表单在reactapp 中不起作用

我在我的反应应用程序简单个人网站上的电子邮件表单中添加了表单提交服务。但它似乎不起作用。它什么也不做。那里额外的 javascript 是否会干扰