为啥我不能更改要提交的输入元素的类型？

Posted 2023-02-22

【中文标题】为啥我不能更改要提交的输入元素的类型？

【英文标题】：Why can't I change the type of an input element to submit?为什么我不能更改要提交的输入元素的类型？

【发布时间】：2012-01-12 19:04:39

【问题描述】：

我正在调用这个函数：

function submit_button(button_id)
    $('#' + button_id).attr('type', 'submit');

使这个按钮类型=提交而不是按钮。：

<input  name="confirm_button" id="confirm_button" type="button" value="Confirm" class="login_btn" />

我得到了这个错误（在 Firefox 中）：

未捕获的异常：类型属性无法更改

有什么解决办法吗？

【参考方案1】：

javascript：

function submit_button()

      var btn=document.getElementById('button_id');
      btn.setAttribute('type', 'submit');

  

================================================ ========================

jQuery：

function submit_button()

 $('#' + button_id).prop('type', 'submit');

   

================================================ ========================

【参考方案2】：

终于成功了，尝试找到以下内容：

   $("#confirm_button").each(function () 
    this.type = "number"; );

【参考方案3】：

这里有一个解决方法：

$('<input name="confirm_button" id="confirm_button2" type="submit" value="Confirm" class="login_btn" />').insertAfter('#confirm_button');
$('#confirm_button').remove();

【讨论】：

完美，这样可以正常工作。有谁知道为什么 jquery 不允许你只更改 type 属性？

如果你使用 prop() 方法就可以了。

为什么不用replaceWith 而不是insertAfter 和remove？

我只是想说明一般的想法。x

【参考方案4】：

为什么 jQuery 不允许你只改变 type 属性？

因为它会导致 Internet Explorer 出现问题。

更多信息请访问：change type of input field with jQuery

“直接来自 jQuery 源代码”：

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
    throw "type property can't be changed";

【讨论】：

但是，您可以将type 更改为prop，这会导致IE 出现问题吗？

【参考方案5】：

解决方法是创建一个正确类型的元素，并替换当前存在的元素。

但是，在您的示例中，<button> 元素可以用于提交表单、呈现为按钮，并且不需要任何 javascript 来执行此操作，例如：

<button name="confirm_button" id="confirm_button" type="input" value="Confirm" class="login_btn" disabled />

然后让按钮再次启用：

$('confirm_button').removeAttr('disabled');

【讨论】：

这个按钮是隐藏的，直到用户点击另一个按钮。然后显示此按钮，以便用户可以单击它来提交表单。我遇到的问题是这个提交按钮仍然被按下回车键触发，即使它仍然隐藏@davidethell

@davidethell，您可以将disabled 属性添加到您的隐藏按钮。答案已更新。

【参考方案6】：

function submit_button(button_id)
    $('#' + button_id).prop('type', 'submit');

请注意，这会更改类型但不会更改值，因此按钮仍会显示“确认”。

证明它的小提琴：http://jsfiddle.net/qeUxP/

【参考方案7】：

为什么不直接绑定到点击事件并在点击处理程序中调用表单提交？