jquery submit form結果としてHTML全体を表示

Question

私はデータベースからの結果を示す送信ボタン付きの検索フォームを持っています。

は、私はこの問題は、結果は、結果だけではなく、結果のdiv要素を全体htmlページを表示することで結果

を示す前に、遅延2Sと、ローダーを示したいと思います。

コード：

$(document).ready(function() { 
    $(function(){ 
     $("#search").ajaxForm({ 
      beforeSend: function() { 
       $("#login_result").html("<div id='wrapper'><div class='cssload-loader text-center'></div></div><p>Loading...</p>"); 
      }, 
      success: function(data) { 
       setTimeout(function() { 
        $("#results").html(data); 
       },2000); 
      } 
     }); 
    }); 
}); 

マイ結果コードで：

<div class="container bootstrap snippet " id="results" style="margin-bottom: 90px;"> 
     <div class="row"> 
     <div id="login_result"></div> 

     <!-- results HERE --> 
    </div> 
</div> 

検索フォームコード：だから、基本的にはあなたが何をする必要があるか

<div class="col-md-12"> 
    <p style="font-family: 'rawy-bold';font-size:35px;color:white;margin-top:20px;"> 
     Search 
    </p> 
    <form action="index.php" method="post" class="form-inline" id="search"> 
     <input type="text" class="form-control" name="searchinput" size="50"> 
     <button type="submit" name="search" class="btn btn-danger">search</button> 
    </form> 
</div> 

Answer 1

は、結果のHTMLを解析することです。次に、結果を囲むラッピング要素を解析して見つけます。この例では、ここで私はそれが<div class="result-wrapper"><!-- your results --></div>のようなものであると仮定：

$(document).ready(function() { 
    $(function(){ 
     $("#search").ajaxForm({ 
      beforeSend: function() { 
       $("#login_result").html("<div id='wrapper'><div class='cssload-loader text-center'></div></div><p>Loading...</p>"); 
      }, 
      success: function(data) { 
       setTimeout(function() { 
        // Parse and find element 
        var result = $(data).find('.result-wrapper'); 
        $("#results").html(result.html()); 
       },2000); 
      } 
     }); 
    }); 
}); 

Answer 2

私は単にaction="results.php"にフォームaction="index.php"を変更すると、これを固定し、私はresults.phpページに私の結果コードを移動しました。 それは働いた！私がフォームを提出し、成功したとき。 $("#results").html(data);results.phpからのデータは印刷されません。index.php