0

以下のような単純なトップサーチバーであるこのフォームがあります。送信ボタンはありません。ユーザーがEnterキーを押すと送信されます。

<form style="display:inline;" method="GET" action="/printers/" class="searchForm">
<input placeholder="Hit enter to search..." type="text" class="topsearchbar" value="">
</form>

次に、jQueryが登場します。ここで、検索ボックスから値を取得し、それを現在のアクションに追加して、送信する必要があります。しかし、私はこれを行う方法を理解できません。手伝ってもらえますか？

これが私のjqueryです：

$(".searchForm").submit(function(event) {
event.preventDefault();

var action = ($(".searchForm").attr("action"));
var searchStr = ($(".topsearchbar").attr("value"));


if((action && searchStr) != '' &&  (action && searchStr).length >= 5)
{
alert('Ok to proceed')

var serverStr = action+'/'+searchStr;
alert(serverStr)
//Submit the form to serverStr. serverStr is the form's action

}
else
{
alert('To small to be any good')
}

}),
4

3 に答える 3

0

このようにアクション属性を変更することもできます

jQuery('.searchForm').attr('action', 'new-value');

あなたがそうするなら...

jQuery('.searchForm').submit(function() {
    // ...you have to return 'true' if you want to submit after your code
    return true;
    // ...and 'false' if you want to stop the submit.
    return false;
});
于 2012-12-19T12:01:39.617 に答える
0

これを行う1つの方法があります。

$(document).ready(function() {

    $('.searchForm').submit(function(event) {

        var $this = $(this),
            action = $this.attr('action'),
            query = $this.find('.topsearchbar').val(); // Use val() instead of attr('value').

        if (action.length >= 5 && query.length >= 5) {

          // Use URI encoding
          var newAction = (action + '/' + encodeURIComponent(query));
          console.log('OK', newAction); // DEBUG

          // Change action attribute
          $this.attr('action', newAction);

        } else {
          console.log('To small to be any good'); // DEBUG

          // Do not submit the form
          event.preventDefault();
        }
    });

});​

jsfiddle。

于 2012-12-19T12:04:13.383 に答える
0

キーダウンイベントでを見つけ、enter==13すべてが正常になったらフォームを送信します。

$('.topsearchbar').keydown(function(e){ 

if(e.which==13){
  var action = $(".searchForm").attr("action");
  var searchStr = $(".topsearchbar").attr("value");


  if((action && searchStr) != '' &&  (action.length && searchStr.length) >= 5){
     alert('Ok to proceed');
     $(".searchForm").submit();
     var serverStr = action+'/'+searchStr;
     alert(serverStr);
     //Submit the form to serverStr. serverStr is the form's action

  }
   else
  {
  alert('To small to be any good')
  }
  }
});
于 2012-12-19T12:13:49.690 に答える