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

Question

我正在尝试编写表单，您可以使用下一个按钮（将隐藏当前字段集并显示下一个按钮）和前一个按钮（将隐藏当前字段集并显示前一个字段集）进行导航。 这两个输入有一个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

我认为，不是试图“破解”现有按钮并将其转换为提交，您可以只有两个按钮，一个“下一个”，另一个“提交按钮”（最初隐藏），一旦用户进入最终步骤，您可以隐藏“下一步”按钮并显示“提交按钮”按钮。

它可以是这样的：

//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提到的两个输入之间切换（或完全替换它）。 但要回答你的问题：

您可以在提交事件中捕获另一个自动提交。 首先单击标记具有类或数据属性的按钮，如“preventSubmit”。 在提交事件内检查此类或数据属性是否存在并阻止提交（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';
}