페이지 새로 고침없이 양식 제출

Question

페이지가로드 될 때 div가 display : none 인 시나리오가 있습니다. 그리고 버튼 -A를 누르면 div가 토글됩니다. 이 div는 최종 사용자가 데이터베이스에 대해 검색을 수행 할 수있는 검색 창으로 사용됩니다. 그러나 div가 표시되기 때문에 : none; 검색 div 창에서 양식을 제출하면 페이지가 다시로드되고 검색 div 창이 표시되는 곳으로 돌아갑니다. none :

그래서 데이터 호출이 실제로 실행되어 필요한 행을 반환합니다. 하지만 결과가 포함 된 div를 표시하려면 버튼 -A를 다시 눌러야합니다.

이 문제를 해결할 수 있습니까? 아약스에 대해 조금 읽었지만 내 경우에는 실제로 해결책을 찾지 못했습니다.

나는 이와 같은 것을 가지고있다. (게시물에 좋은 형식을 모르고 죄송합니다. 그것의 나의 처음 여기에 게시합니다.)

<button id="hideshow" class="hideshow" type="submit">search</button> 

<div class="search_div_wrapper" style="display: none;"> 
<form action="" method="POST"> 
    <input type="text" name="search_field"> 
    <button name="search" id="submit">search</button> 
</form> 
    <?php 
    // some codes are here to query and display rows from search_field input 
    ?> 
</div> 

<script> 
    jQuery(document).ready(function(){ 
     jQuery('.hideshow').on('click', function(event) {   
      jQuery('#search_div_window').toggle('show'); 
     }); 
    }); 
</script> 

Answer 1

$(function(){ 
 
$(".search").keyup(function() 
 
{ 
 
var searchid = $(this).val(); 
 
var dataString = \'search=\'+ searchid; 
 
if(searchid!=\'\') 
 
{ 
 
    $.ajax({ 
 
    type: "POST", 
 
    url: "search.php", 
 
    data: dataString, 
 
    cache: false, 
 
    success: function(html) 
 
    { 
 
    $("#result").html(html).show(); 
 
    } 
 
    }); 
 
}return false;  
 
}); 
 
    
 
jQuery("#result").on("click",function(e){ 
 
    var $clicked = $(e.target); 
 
    var $name = $clicked.find(\'.name\').html(); 
 
    var decoded = $("<div/>").html($name).text(); 
 
    $(\'#searchid\').val(decoded); 
 
}); 
 
jQuery(document).live("click", function(e) { 
 
    var $clicked = $(e.target); 
 
    if (! $clicked.hasClass("search")){ 
 
    jQuery("#result").fadeOut(); 
 
    } 
 
}); 
 
$(\'#searchid\').click(function(){ 
 
    jQuery("#result").fadeIn(); 
 
}); 
 
});

<div class="form-group"> 
 
<input type="text" placeholder="search by name" name="search_text" class="form-control search" id="search_text"></div> 
 
<div id="result"></div> 
 

 
<!-- search.php---> 
 
<?php 
 
$conn = mysqli_connect("localhost", "root", "", "insert"); 
 
$output = ""; 
 
$sql = "SELECT * FROM inserdata WHERE name LIKE '%".$_POST['search']."%'"; 
 

 
$result = mysqli_query($conn,$sql); 
 
if(mysqli_num_rows($result) > 0) 
 
{ 
 
\t $output .= '<h4 align="center">Search Result</h4>'; 
 
    $output .= '<div class="table-responsive"> 
 
\t \t \t \t \t <table class="table table-bordered"> 
 
\t \t \t \t \t \t <tr> 
 
          <th>Name</th> 
 
          <th>Email</th> 
 
          <th>Phone Number</th> 
 
          <th>Address</th> 
 
          <th>Gender</th> 
 
          <th>Desc</th> 
 
         </tr>'; 
 
\t while($row = mysqli_fetch_array($result)) 
 
\t { 
 
\t \t $output .= ' 
 
       <tr> 
 
        <td>'.$row["name"].'</td> 
 
        <td>'.$row["email"].'</td> 
 
        <td>'.$row["phn"].'</td> 
 
        <td>'.$row["address"].'</td> 
 
        <td>'.$row["gender"].'</td> 
 
        <td>'.$row["desc"].'</td> 
 
       </tr> 
 
      '; 
 
\t } 
 
\t echo $output; 
 
} 
 
else { 
 
\t echo "data not found"; 
 
} 
 
?>

Answer 2

로딩 후 어떤 결과가 있는지 확인할 수 있습니다. 어떤

var $ = jQuery; 
$(window).load(function(){ 
    if($('.result_div_wrapper').html().trim().length > 0) { 
     console.log($('.result_div_wrapper').html().trim().length) 
     $('.result_div_wrapper').toggleClass('active'); 
    }  
}); 

가있는 경우 search_div_wrapper을 표시하고 CSS를

.active{ 
    display: block !important; 
} 
.result_div_wrapper{ 
    display: none; 
} 

[페이지 새로 고침없이 양식 제출] (의