从类中调用的bootstrap模式内的表单不提交

Question

I have a form inside a bootstrap modal which is called from class and triggered by a button inside a table. The problem is that the form is not submitting.

Here is my class (localhost/project/includes/func/function.php)

class product{
    function selectProducts($conn){
            $select_prod_query= "SELECT * FROM `tbl_products` ORDER BY `prod_id` DESC";
            $select_prod_query_result = $conn->query($select_prod_query) or die("Unable to view products. Press F5 to retry!");
            while($row=$select_prod_query_result->fetch_assoc()){
                if($row['prod_img']!="no image available"){
                    $row['prod_img'] = "<a href='#' data-featherlight='".$row['prod_img']."'><img src='".$row['prod_img']."' height='50px' width='auto'></a>";
                }
                else{
                    $row['prod_img']="<img src='includes/img/no_image.png' height='50px' width='auto'>";
                }
                if($row['prod_description']==NULL){
                    $row['prod_description']="No description";
                }
                $option_html = "
                <button type='button' data-toggle='modal' data-target='#editproduct".$row['prod_id']."' class='btn btn-primary btn-xs'><span class='glyphicon glyphicon-edit'></span>&nbsp;Edit</button>
                <div class='modal fade' id='editproduct".$row['prod_id']."' role='modal' aria-labeledby='editproduct".$row['prod_id']."label'>
                    <div class='modal-dialog' role='document'>
                        <div class='modal-content'>
                            <div class='modal-header'>
                                <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'></span>&times;</button>
                                <h4>Edit Product #".$row['prod_id']."</h4>
                            </div>
                            <div class='modal-body'>
                                <form action='http://localhost/xampp/wci-jpms_version_4/index.php' method='POST'>
                                    <label class='label label-primary' for='prod_name'>Product Name</label>
                                    <input type='text' name='prod_name' value='".$row['prod_name']."' class='form-control' required><br>
                                    <label class='label label-primary' for='prod_category'>Product Category</label>
                                    <input type='text' name='prod_category' value='".$row['prod_category']."' class='form-control' required><br>
                                    <label class='label label-primary' for='prod_description'>Product Description</label>
                                    <input type='text' name='prod_description' value='".$row['prod_description']."' class='form-control'><br>
                            </div>
                            <div class='modal-footer'>
                                <button type='button' class='btn btn-danger' data-dismiss='modal' aria-label='Close'>Close</button>
                                <button type='submit' class='btn btn-success' name='btn_edit_product'>Save</button></form>
                            </div>
                        </div>
                    </div>
                </div>";
                $prod_data = array('prod_id'=>$row['prod_id'], 'prod_name'=>$row['prod_name'], 'prod_category'=>$row['prod_category'], 'prod_img'=>$row['prod_img'], 'prod_description'=>$row['prod_description'], 'prod_date_added'=>$row['prod_date_added'], 'option'=>$option_html);
                $prod_data_arr[] = $prod_data;
            }
            return json_encode($prod_data_arr);
}

since I've used the Bootstrap-table library, I have to retrieve the data as JSON.

localhost/project/includes/json/product_json.php

<?php
namespace wci_jpms;
require("../func/function.php");
$obj_wci_jpms_db = new wci_jpms_db();
$objProduct = new product();
$conn = $obj_wci_jpms_db->connect();
echo $objProduct->selectProducts($conn);
$obj_wci_jpms_db->close($conn);
?>

and here is my index.php

<table data-toggle="table" id="table" 
    data-url="includes/json/product_json.php" 
    data-side-pagination="client" 
    data-show-refresh="true" 
    data-page-list = "[5, 10, 20, 50, 100, 200, 500, ALL]" 
    data-pagination="true" 
    data-search="true" 
    data-search-time-out="600" 
    data-height="500"
    data-striped="true" 
    data-pagination-first-text="<< First" 
    data-pagination-pre-text="< Prev" 
    data-pagination-next-text="Next >" 
    data-pagination-last-text="Last >>">
        <thead>
            <th data-field="prod_id" data-sortable="true" data-valign="middle">Product ID</th>
            <th data-field="prod_name" data-sortable="true" data-valign="middle">Product Name</th>
            <th data-field="prod_category" data-sortable="true" data-valign="middle">Product Category</th>
            <th data-field="prod_img" data-searchable="false" data-valign="middle">Product Image</th>
            <th data-field="prod_description" data-searchable="false" data-valign="middle">Product Description</th>
            <th data-field="prod_date_added" data-searchable="false" data-valign="middle">Date Added</th>
            <th data-field="option" data-searchable="false" data-valign="middle">Option</th>
        </thead>
</table>

any wrong with my code? thanks! :D

Answer 1

The form Tag can't be placed like that, change it to this:

Also use "index.php" instead of "http://localhost/xampp/wci-jpms_version_4/index.php"

 <form action='index.php' method='POST'>
        <div class='modal-body'>
        ...
        </div>
        <div class="modal-footer">
         ...
        </div>
    </form>

I think this should do the trick.