Question

我尝试使用下一个按钮（将隐藏当前字段集并显示下一个字段集）以及上一个 one（将隐藏当前字段集并显示前一个字段集）。这两个输入有一个onclick函数，它将fieldset className从active变为active，具体取决于我们是哪个fieldset。我想在用户到达最终字段集时更改下一个按钮输入类型，以便他可以提交，但似乎它会自动触发提交事件，这意味着当用户进入最后的字段集，他无法填写任何输入，因为表单将自动提交。

所以这里是代码：

//When the last fieldset show 
if (fieldset[4].className == "active") {
    var next = document.getElementById('next');
    next.onclick='';
    next.type="submit";
    next.value="Submit";
    next.id='submit';
}

我是否应该添加一些内容来停止提交自动触发？

Answer 1

我已经在JSFiddle中测试了你的代码并且它运行良好。这意味着有一些东西触发提交。也许你可以在该页面发布整个javascript然后我可以检查问题是什么。

var next = document.getElementById("next");

//next.type="submit";
next.setAttribute('type', 'submit'); // I prefer using .setAttribute method
next.onclick='';
next.value="Submit";
next.id='submit';

<form>
	<input name="q" value="hello">
	<input type="text" id="next">
</form>

Answer 2

我认为而不是试图＆＃34; hack＆＃34;现有的按钮并将其转换为提交，你可以只有两个按钮，一个＆＃34;下一个＆＃34;另一个提交按钮＆＃34; （最初隐藏），一旦用户前进到最后一步，你可以隐藏＆＃34;下一步＆＃34;按钮并显示＆＃34;提交按钮＆＃34;按钮。

可能是这样的：

//When the last fieldset show 
if (fieldset[4].className == "active") {
    // hide the next button
    document.getElementById('next').style.display='none';
    // show the submit button
    document.getElementById('submit-button').style.display='';
}

使这些按钮与css完全出现在同一个地方并不复杂，因此用户不会注意到替换。

Answer 3

出于安全原因，有些浏览器不允许您更改类型。所以你经常遇到问题。只需在Boris提到的两个输入之间切换（或完全替换它）。但要回答你的问题：

您可以在提交事件中捕获另一个自动提交。首先单击标记具有类和数据属性的按钮，如＆＃34; preventSubmit＆＃34;。在提交事件内检查此类或数据属性是否存在并阻止提交（f.ex with prevent default（））并删除所有希望由用户单击提交的类不会停止。

Answer 4

为什么不添加一个事件来提交您当前所在的表单：

if (fieldset[4].className == "active") {
   var next = document.getElementById('next');
   next.onclick=(function() { document.forms[0].submit(); });
   //next.type="submit";
   next.value="Submit";
   next.className="MySubmit"; // try to style it as a button for better UX
   //next.id='submit';
}

将输入类型= text更改为type = submit with javascript会触发提交

4 个答案: