Jump to content

Show table within Bootstrap Modal


JezLisle

Recommended Posts

I'm trying to refresh a data input into an INPUT through a form and then SUBMIT this to the database to return it as a table on the same page. I want it to do this without showing the refresh of the page.

This is what I have currently. When I put data into any of the INPUT fields and click SUBMIT nothing happens and nothing shows for an error.

<?php
 session_start();
 error_reporting (E_ALL);
require '../core/cnn.php';
if(isset($_POST['submitsearchprojno'])) {
    $searchprojno = $_POST["searchprojno"];
}
if(isset($_POST['submitsearchadd'])) {
    $searchaddress = $_POST["searchaddress"];
}
if(isset($_POST['submitsearchpc'])) {
    $searchpostcode = $_POST["searchpostcode"];
}
$searchpostcode = mysql_real_escape_string($searchpostcode);
$searchaddress = mysql_real_escape_string($searchaddress);
$searchprojno = mysql_real_escape_string($searchprojno);
?>  
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Search Projects</h4>
</div>
<div class="modal-body">    
<form class="modal-form" id="searchform" name="searchform" action="" method="post">
    <div class="form-group">
        <label class="col-md-4 control-label">Project Number</label>
        <div class="col-md-6">
            <input type="text" class="form-control input-inline input-medium" name="searchprojno" id="searchprojno" placeholder="Enter Project Number">
        </div>
        <button type="submit" class="btn blue" id="submitsearchprojno" name="submitsearchprojno" >Search  <i class="m-icon-swapright m-icon-white"></i></button>
    </div>
    <div class="form-group">
        <label class="col-md-4 control-label">Address</label>
        <div class="col-md-6">
            <input type="text" class="form-control input-inline input-medium" name="searchaddress" id="searchaddress" placeholder="Enter Address">
        </div>
        <button type="submit" class="btn blue" id="submitsearchadd" name="submitsearchadd" >Search  <i class="m-icon-swapright m-icon-white"></i></button>
    </div>
    <div class="form-group">
        <label class="col-md-4 control-label">Postcode</label>
        <div class="col-md-6">
            <input type="text" class="form-control input-inline input-medium" name="searchpostcode" id="searchpostcode" placeholder="Enter Postcode">
        </div>
        <button type="submit" class="btn blue" id="submitsearchpc" name="submitsearchpc" >Search  <i class="m-icon-swapright m-icon-white"></i></button>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-advance table-hover">
                    <thead>
                        <tr>
                            <th class="col-md-9"><i class="fa fa-list-alt"></i> Address</th>
                            <th class="col-md-3"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <?php $searchrs = mysql_query("SELECT ProjectNo, CONCAT(COALESCE(HouseNoName, ''), ' ', COALESCE(StreetName, ''), ' ', 
                            COALESCE(TownOrCity, ''), ' ', COALESCE(Postcode, '')) AS Display, PropID, AreaID, AWGMember, Householder, HouseNoName, 
                            StreetName, TownOrCity, Postcode, ContactTelephone, AlternatePhone, Email, PropertyTenure, PropertyNotes
                            FROM prop_property
                            WHERE IsActive = 1
                                AND (Postcode = '".$searchpostcode."'
                                    OR StreetName = '".$searchaddress."'
                                    OR ProjectNo = '".$searchprojno."')
                        ") or die(mysql_error());
                        $checkrs = mysql_query("SELECT * FROM prop_property WHERE IsActive = 0");
                        if(!mysql_num_rows($checkrs) > 0) { 
                            echo '<td> No record found!</td><td></td>'; 
                            }
                            else {
                                while ($results = mysql_fetch_array($searchrs)) {
                                echo '
                                    <td id="displayadd">'.$results['Display'].'</td>
                                    <td>
                                        <form action="../jobdetails.php" method="post">
                                            <input type="hidden" name="searchhouse" value=" '.$results['HouseNoName'].'" >
                                            <input type="hidden" name="searchstreet" value=" '.$results['StreetName'].'" >
                                            <input type="hidden" name="searchtown" value=" '.$results['TownOrCity'].'" >
                                            <input type="hidden" name="searchpostcode" value=" '.$results['Postcode'].'" >
                                            <input type="hidden" name="searchpropid" value=" '.$results['PropID'].'" >
                                            <input type="hidden" name="searchprojectno" value=" '.$results['ProjectNo'].'" >
                                            <button type="submit" class="btn default btn-xs blue-stripe" id="viewsearch" name="viewsearch">View Address</button>
                                        </form>
                                    </td>';
                                }
                            }?>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</form>
<div class="modal-footer right">
    <button type="button" data-dismiss="modal" class="btn default">Cancel</button>
</div>
<script type="text/javascript">
$(function(){
    $('#searchform').on('submit', function(e){
        e.preventDefault();
            //alert($('#searchpostcode').val())
            $.post('includes/jobdetailssearch.php', 
            $('#searchform').serialize(), 
            function(data, status){
                $('.table-responsive #displayadd').html(data.Display);
                //$("#table-responsive td").last().append(data);
            console.log("done");
        }).fail(function () {
            console.log("fail");
        });
    });
});
   </script>

How can I get it to POST the INPUT to the database and return in the table?

Link to comment
https://forums.phpfreaks.com/topic/287469-show-table-within-bootstrap-modal/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.