ein Formular ohne Seite reload senden

Question

Ich habe ein Szenario, in dem beim Laden der Seite ein div angezeigt wird: keine; und wenn ich Knopf-A drücke, schaltet es das div ein. Dieses div fungiert als Such-Div-Fenster, in dem Endbenutzer eine Suche gegen die Datenbank durchführen können. Aber da das Div angezeigt wird: keine; Wenn ich ein Formular im Such-Div-Fenster absende, lädt es die Seite neu und kehrt zum Standard zurück, wo das Such-Div-Fenster angezeigt wird: none;

So führt der Datenaufruf tatsächlich und gibt die Zeilen zurück, die ich brauche. Aber ich muss den Knopf A noch einmal drücken, nur um das div zu zeigen, das die Ergebnisse enthält.

gibt es einen Workaround dafür? Ich habe ein wenig über Ajax gelesen, aber ich habe nicht wirklich eine funktionierende Lösung für meinen Fall gefunden.

Ich habe so etwas. (Sorry für nicht gut Format über die Entsendung zu kennen. Sein mein erstes Mal schreiben hier.)

<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

Sie überprüfen können, ob es eine Folge nach dem Laden ist. und zeigen die search_div_wrapper falls vorhanden

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'); 
    }  
}); 

und fügen Sie diese zu Ihrer css

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