submit a form without page reload

Question

I have a scenario where on page load, a div is on display: none; and when i press button-A it toggles the div. This div acts as a search div window where end users can do search against database. But since the div is on display: none; when i submit a form on the search div window, it reloads the page and goes back to default where search div window is on display: none;

So, the data call actually executes and returns the rows i need. But I need to press the button-A again just to show the div that contains the results.

is there a workaround for this? i've read a little about ajax but i haven't really found a working solution for my case.

i have something like this. (sorry for not knowing good format on posting. its my first time to post here.)

<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) { $output .= '<h4 align="center">Search Result</h4>'; $output .= '<div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Email</th> <th>Phone Number</th> <th>Address</th> <th>Gender</th> <th>Desc</th> </tr>'; while($row = mysqli_fetch_array($result)) { $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> '; } echo $output; } else { echo "data not found"; } ?>

Answer 2

you can check if there is any result after loading. and show the search_div_wrapper if there is any

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

and add this to your css

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