ユーザーがjqueryを使用して入力ボックスに(キーボードを使用して)入力したときにajax()を呼び出すにはどうすればよいですか?

シビール

ユーザーがページを読み込まずに入力ボックスに入力したときにajax()を呼び出そうとしていますが、ユーザーが入力ボックスに入力したときにこのajaxメソッドを呼び出しています。私の入力ボックスは次のとおりです:

<input type="text" name="search" id="txt_name"  placeholder="Keyword"/>

Jquery./Ajaxコード;

$(document).ready(function(){
  $("#txt_name").keyup(function(){

    var value = $('#txt_name').val();

    $.ajax({
        type:"post",
        url:"doSearchEnter.php",
        data :{
                'key' : value               
            },          
        success:function(res){
            $('#showSearchResult').html(res);
            }
       });

  });
});

ユーザーがページを読み込まずに入力ボックスに入力した後、このajax()を呼び出すにはどうすればよいですか?

更新:

$('#txt_name').on('click', 'submit', function(e) {
    e.preventDefault();
    $.ajax({
        type:"post",
        url:"doSearchEnter.php",
        data :{
                'key' : value               
            },          
        success:function(res){
            $('#showSearchResult').html(res);
            }
       });
});

アップデート2:

<form>     
<input type="button" name="given_name" value="Given Name" class="search_submit" id="given_name"/>
<input type="button" name="company_name" value="Company Name" class="search_submit" id="company_name"/>
<input type="button" name="cdid" value="ID" class="search_submit" id="cdid"/>
<input type="text" name="search" id="txt_name"  placeholder="Keyword"/>    
</form>

$('form').on('click', 'submit', function(e){
    e.preventDefault();
});

$('form').on('keyup', '#txt_name', function(e){
    if(e.keyCode == '13'){
        $.ajax({
            type:"post",
            url:"doSearchEnter.php",
            data :{
                    'key' : value               
                },          
            success:function(res){
                $('#showSearchResult').html(res);
                }
           });
    }
});
tylerlindell

送信ボタンを使用してフォーム内に入力を配置すると、うまくいくはずです。ユーザーがEnterキーを押すと、フォームが送信されます。あなたがしなければならないのは使用することだけです

$('form').on('click', 'submit', function(e) {
    e.preventDefault();
    $.ajax({
        //do your Ajax thing here
     });
});

更新:3つのフォームでは、3つすべてに同じAjax呼び出しを使用し、そのようにデータをまとめます。

var formData = $(this).closest('form').serialize();
$.ajax({
    type: 'POST',
    url: 'test.php',
    data: formData
});

これにより、jqueryは、フォームデータをサーバー側スクリプトに渡すための適切な形式で配置するように指示され、3つのスクリプトすべてで機能します。

UPDATE2:更新された質問に基づく更新:

$('form').on('submit', function(e){
    e.preventDefault();
});

$('form').on('keyup', '#txt_name', function(e){
    if(e.keyCode == '13'){
        $.ajax({
            //do Ajax stuff
         });
    }
});

ここに作業コードへのリンクがあります!jsfiddle

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ