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

有什么东西我应该添加以停止提交自动触发?

===============>>#1 票数:2

我已经在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> 

===============>>#2 票数:1

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

它可以是这样的:

//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完全出现在同一个地方并不复杂,因此用户不会注意到替换。

===============>>#3 票数:0

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

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

===============>>#4 票数:0

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

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';
}

  ask by Jorel Amthor translate from so

未解决问题?本站智能推荐:

1回复

jQuery enter事件不会触发表单提交

通常,当我们在带有表单提交按钮的表单中按Enter时,它会触发表单提交,但是当我尝试通过调用JQuery的触发函数来获得相同的结果时,它将不起作用。 知道为什么吗? 该事件被调用,但是表单未提交。
1回复

输入类型文本旁边提交,Y偏移

我有以下代码: 您可以看到2个输入标签直接排成一行,否则中断会很烦人。 无论如何,这是结果: 那么,这里有什么呢? 为什么chrome和Safari表现奇怪? 我尝试了所有方法,将边框,边距和填充重置为0甚至行高。
1回复

为什么我不能单击此按钮? (输入类型提交)

我有此输入类型提交: 如果我对该按钮.val()进行console.log,则会得到: 我把下面的触发器单击按钮: 并且不起作用。 如果我在检查中编写此代码,则可以正常工作。 问题出在哪儿? 问候
7回复

为什么我不能改变要提交的输入元素的类型?

我正在调用这个函数: 使这个按钮类型=提交而不是按钮: 我得到这个错误(在Firefox中): 未捕获的异常:类型属性无法更改 有没有工作?
4回复

单击按钮时,单击提交类型输入

单击按钮时如何单击类型为提交的输入? 上面的代码段是我到目前为止的代码,但这行不通吗? 谢谢! =====编辑===== 让我更确切地解释我的问题! 我想通过一个按钮提交许多表格。 我之前尝试过的以下事情: =====================
2回复

在输入类型图像上单击会导致表单提交

情境 我有这个表格: checkShippingInfo函数运行一些输入验证控件。 最终,它通过AJAX运行服务器端控件: 但是,即使形式当m!= 0提交反正被触发。 题 我只想在特定条件下触发form.submit 。 input type="image"
1回复

输入类型提交的跨浏览器问题

我制作的表单存在问题,它可以在Firefox中运行,但是在IE和Chrome中却不能! 当我在IE和Chrome中按“提交”按钮时,什么也没发生! 我之前没有检查过,因为我没有想到我会遇到这样的问题! 我不知道我在这里想念什么! 是否存在任何已知问题(错误) 表格: 感谢您
1回复

寻找如何使用输入类型=提交表单发送多个值

一些背景:我正在一个成员目录页面上,该页面显示从MySqL数据库收集的成员信息。 我设置了一个循环,以显示每个成员的名称,id#,标题等-每行一个成员。 可以搜索和排序显示的成员列表,因此长度为0-20个条目(每页最多20个)。 可以单击每个成员的姓名,并显示与他们有关的更多信息。
2回复

我做错了什么? CSS输入类型文件并提交

我做错了什么? 为什么两个按钮不在同一行? 为什么“提交”按钮的顶部比“文件”按钮的间隙高1像素。 我正在使用Google Chrome桌面。 在桌面浏览器中,这不是很好。 在移动版Google chrome浏览器中,外观不错。 为什么? 我必须用CSS编写的内容才能在其他浏览
1回复

IE9输入类型=提交错误地呈现边框底部。 IE7和8很好

我正在尝试仅将边框底部和所有其他边都设置为0。这似乎导致IE9根据文本颜色呈现边框底部颜色。 在所有其他浏览器以及IE9的早期版本中均可正常运行。 如果删除border: 0; border-bottom将在IE9中正确呈现border: 0; ,但其他边框会出现。 http: