Jquery：将输入类型从按钮更改为提交

Question

我有一个如下的动画搜索表单。

<form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>">

<div id="searchtext">
    <input type="text" value="" size="25" name="s" id="s" placeholder="<?php esc_attr_e('Search', 'reverie'); ?>">
</div>

<div id="submitsearch">
    <input type="button" id="searchsubmit" value="" class="button postfix">
</div>

jQuery("#submitsearch").click(function () {
   jQuery("#searchtext").animate({width:'toggle'},500);
      jQuery(this).toggleClass("closed");
}); 

当第一次点击搜索按钮时，它会切换出用户可以输入他们想要搜索的内容的文本区域。然而，当他们再次单击搜索按钮时，它应该提交搜索表单（即输入类型应该从按钮更改为提交）。

我已经阅读了一些关于 SO 的帖子，但是这些都是几年前的，我不确定它们是否仍然相关。不能改变输入的类型吗？

Answer 1

应该这样做：

$('.button').on('click', function(){
  $("#searchtext").animate({width:'toggle'},500);
  $(this).attr('type', 'submit');
});

它不完整，但应该让你更接近你想要的:)

hmm...我认为使用最新的 jQuery，您甚至可以将 on('click' function(){}) 替换为 .click( function(){} );
（旧版本的 .click() 没有 live / on 绑定）

Answer 2

我认为这是可能的，因为type 是一个属性。以下小代码行应该会有所帮助：

$('#searchsubmit').removeAttr("type").attr("type", "submit");

也许有一种风险较小的方法。方法是添加一个调用提交函数的'onclickEvent'：

 $('#searchsubmit').on('click', function () {
    $(this).parents("form:first").submit();
});

Answer 3

您可以删除类型属性并再次将其设置为提交。

jQuery("#submitsearch").click(function () {
jQuery("#searchtext").animate({
    width: 'toggle'
}, 500);
jQuery(this).toggleClass("closed");
var btn = document.getElementById('searchsubmit');
btn.removeAttribute('type');
btn.setAttribute('type', 'submit');
});

工作fiddle。