为什么我不能更改要提交的输入元素的类型？答案

【问题标题】：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 中）：

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

有什么解决办法吗？

【问题讨论】：

标签： jquery types input submit

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

为什么 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 出现问题吗？

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

这里有一个解决方法：

$('<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

【解决方案5】：

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

【讨论】：

【解决方案6】：

javascript：

function submit_button(){

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

  }

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

jQuery：

function submit_button(){

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

   }

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

【讨论】：

【解决方案7】：

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

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

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

然后让按钮再次启用：

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

【讨论】：

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