如何防止表单提交 [英] How to prevent form submission
问题描述
我在另一个线程中使用我在这里找到的函数来阻止我的表单在我的笔记本电脑上工作，但是，当我将当前更改推送到我的gh_pages分支以在手机上测试时，我注意到表单是仍在尝试提交。我目前这样做是因为我没有将表单数据发送到后端，但我仍然想要在输入字段中使用'required'属性的功能。感谢您提前提供任何帮助。以下是我的.js和.html文件中的相关代码：
js
document.getElementById（'gameData'）。onsubmit = function（）{
game ['game'] = {};
game.game ['id'] = generateId（20）;
game.game ['courseName'] = document.getElementById（'course'）。value;
game.game ['gameLength'] = courseLength;
game.game ['players'] = {};
var participants = document.querySelectorAll（'。currentPlayers'）;
participants.forEach（function（name）{
game.game.players [generateId（5）] = name.value;
}）
generateCard（game .game.gameLength）
//防止表单提交
返回false;
$ / code>
表格
< form id =gameData>
< h3>你在玩什么课程？< / h3>
< input type =textmaxlength =40id =courserequired>
< h3>您玩过多少个洞？< / h3>
< div class =gameLength noHiLte>
< input type =radioname =gameLengthvalue =9id =ninechecked />
< label class =nine radiofor =nine> 9< / label>
< span>或< / span>
< input type =radioname =gameLengthvalue =18id =18/>
< label class =radiofor =18> 18< / label>
< / div>
< div class =addPlayers>
< h3>加起来四个玩家：< / h3>< i class =fa fa-plus noHiLtearia-hidden =true>< / i>
<！ - 新玩家此处生成的输入字段 - >
< / div>
< input type ='submit'class =startGame hidevalue ='Tee Off！'>
您需要阻止提交事件的原生行为，并防止该事件冒泡或沿着捕获行进行。
下面有一个片段，但Stack Overflow不允许在他们的代码片段中提交表单，所以你也可以看到一个工作版本 here 。
为此，在表单的提交事件处理程序：
var form = document.getElementById（gameData）; //这是表单元素名称= document.getElementById（txtName）; var err = document.getElementById（err）; //事件处理程序会自动传递给引发处理程序的//事件的引用。你必须记得设置//一个函数参数来捕获该引用。这里是evtform.addEventListener（submit，function（evt）{//使用你认为必要的任何逻辑，继续或取消：if（txtName.value ===）{//有一个问题：evt.preventDefault（）; //取消事件evt.stopPropagation（）; //阻止它传播到其他元素err.textContent =ERROR！;}}）;
span {font-weight：bold; color：＃f00;}
< form id = gameDataaction =＃method =post>名称：< input id =txtNametype =text> < input type =submit>< span id =err>< / span>< / form>
I'm using a function I found here in another thread to prevent my form from submitting which works on my laptop, however, when I pushed my current changes to my gh_pages branch to test it on my phone I noticed the form is still trying to submit. I'm currently doing it this way because I'm not sending the form data to a backend yet, but I still would like to utilize the functionality of the 'required' attribute in the input fields. Thanks for any help in advance. Here is the related code from my .js and .html files:
js
document.getElementById('gameData').onsubmit = function() {
game['game'] = {};
game.game['id'] = generateId(20);
game.game['courseName'] = document.getElementById('course').value;
game.game['gameLength'] = courseLength;
game.game['players'] = {};
var participants = document.querySelectorAll('.currentPlayers');
participants.forEach(function(name){
game.game.players[generateId(5)] = name.value;
})
generateCard(game.game.gameLength)
// prevent form submission
return false;
}
Form
<form id="gameData">
<h3>What course are you playing?</h3>
<input type="text" maxlength="40" id="course" required>
<h3>How many holes are you playing?</h3>
<div class="gameLength noHiLte">
<input type="radio" name="gameLength" value="9" id="nine" checked/>
<label class="nine radio" for="nine">9</label>
<span>or</span>
<input type="radio" name="gameLength" value="18" id="eighteen"/>
<label class="radio" for="eighteen">18</label>
</div>
<div class="addPlayers">
<h3>Add up to four players:</h3><i class="fa fa-plus noHiLte" aria-hidden="true"></i>
<!-- New player Input fields generated here -->
</div>
<input type='submit' class="startGame hide" value='Tee Off!'>
You will need to prevent the native behavior from the submit event and prevent that event from bubbling or proceeding down the capture line.
See this for details.
There is a snippet below, but Stack Overflow doesn't allow form submissions in their snippets, so you can also see a working version here.
To do this, in your form's submit event handler:
var form = document.getElementById("gameData"); // This is the form element
var name = document.getElementById("txtName");
var err = document.getElementById("err");
// Event handlers are automatically passed a reference to the
// event that triggered the handler. You must remember to set up
// a function argument to capture that reference. Here, that is "evt"
form.addEventListener("submit", function(evt){
// Using whatever logic you deem necessary, proceed or cancel:
if(txtName.value === ""){
// There is a problem:
evt.preventDefault(); // cancel the event
evt.stopPropagation(); // prevent it from propagating to other elements
err.textContent = "E R R O R !";
}
});
span { font-weight:bold; color: #f00;}
<form id="gameData" action="#" method="post">
Name: <input id="txtName" type="text">
<input type="submit"><span id="err"></span>
</form>
这篇关于如何防止表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
