jquery - 单击提交按钮以显示表单，然后再次单击以使用 jQuery 发送表单？

Question

这是我追求的互动..

1. 用户点击搜索链接。
2. 搜索输入幻灯片打开。
3. 打开后，搜索链接变成表单提交按钮，并发送表单。

这是一个代码笔。

我的代码...

HTML

<div class="searchB">
<form action="/search-results/">
  <span class="i-search"></span>
    <input class="srchType" type="search" name="q" placeholder="e.g type here...">
    <input class="srchGo" type="submit" value="SEARCH">
</form>
</div>

CSS

.searchB {
float: left;
padding-top: $baseline/3;
}

.searchB span { 
font-size: 1.3em;
}

.srchType {
display: none;
background-color: #fff;
border:none;
border-bottom: 1px solid #000;
}

.srchGo {
background-color: #fff;
border: none;
cursor:pointer; 
}

JS

$('.srchGo').click(function(e){
  e.preventDefault();
 $('.srchType').show('slide');
});

我还想知道如何集成它，以便用户开始输入后，搜索链接会添加一类粗体文本（表示搜索链接现在可以点击）

我目前处于第 2 步，但无法考虑如何集成提交链接。

任何帮助将不胜感激。

Answer 1

使用标志来查看按钮是否已被点击：

$('.srchGo').on('click', function(e){

    if ( ! $(this).data('clicked') ) {
        e.preventDefault();
        $('.srchType').show('slide');
    }

    $(this).data('clicked', true);
});

对于粗体链接，例如：

$('.srchType').on('keyup', function() {
    $('.some_class_for_links').css('font-weight','bold');
});

Answer 2

$('.srchGo').click(function(e){
e.preventDefault();
if($(this).val()=='GO')
     //dosearch
    alert('search');
else
    $('.srchType').toggle('slide');
});
$('.srchType').keyup(function() {
   if($(this).val()!='')
     $('.srchGo').val('GO');
   else
     $('.srchGo').val('SEARCH');
})