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

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

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

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

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

Answer 2

这样的事情应该这样做：

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

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

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

Answer 3

您可以删除type属性并将其再次设置为submit。

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 。

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

3 个答案: