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>

Possible duplicate of [Form Submission without page refresh](http://stackoverflow.com/questions/23507608/form-submission-without-page-refresh) — Rajesh, Nov 03 '16 at 08:59
Bind "submit" event and use http://api.jquery.com/jquery.ajax/ . Prevent submission with event.preventDefault(); — MakG, Nov 03 '16 at 09:00
Why not just check if some data is submitted after search, and change display none to display block or so? — Ann-Sophie Angermüller, Nov 03 '16 at 09:00
prevent the default action using jQuery('.hideshow').on('click', function(event) { event.preventDefault(); jQuery('#search_div_window').toggle('show'); }); — JYoThI, Nov 03 '16 at 09:02
@LuciaAngermüller im trying to do this on a single page. Your suggestion will work. But I will end-up with a div covering another div on the page when it loads. Im actually trying to replicate a pop-up window. So the div(pop-up window) should load as display none at load page. Only call when button is pressed. But thanks for the suggestion. — bongoloids, Nov 03 '16 at 09:28

score 0 · Answer 1 · answered Nov 03 '16 at 09:06

$(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";
}
?>

score 0 · Answer 2 · answered Nov 03 '16 at 09:58

0

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

answered Nov 03 '16 at 09:58

Sam Ewdala

445
3
4

I've tweaked and tried this and not yet working. I'll try to look into it more tho, see if it might lead into any progress. Thanks mate. – bongoloids Nov 03 '16 at 10:14

submit a form without page reload

2 Answers2