模式按钮表格工作作为插入按钮

Question

我创建了一个按钮来显示模式，但事情是按钮正在作为插入到数据库中，因为我不知道我的代码中存在什么问题。

我需要模态来显示从DB中获取的产品表，并在稍后的报告中以表格形式显示。

这里的表单内的模态代码..

<div class="container"> 
    <!-- ======================= Froms ======================= --> 
    <form action="input.php" method="post"> 
     <div class="row"> 
      <div class="form-group"> 
       <label class="col-md-2 col-form-label">Attention:</label> 
       <div class="col-md-3"> 
        <select class="form-control" placeholder="Choose" name="Attention" required="true"> 
         <option>Asset</option> 
         <option>Consumable</option> 
         <option>Tool</option> 
        </select> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-md-2 col-form-label">PR No.:</label> 
       <div class="col-md-3"> 
        <input class="form-control" type="text" name="PRno"> 
       </div> 
      </div> 
     </div> 
     <!-- End of 1st Row --> 
     <div class="row"> 
      <div class="form-group"> 
       <label class="col-md-2 col-form-label">Project Name:</label> 
       <div class="col-md-3"> 
        <select class="form-control" placeholder="Choose" name="ProjectName"> 
         <option>Stock</option> 
         <option>In Use</option> 
         <option>Scrap</option> 
         <option>Lost</option> 
        </select> 
       </div> 
      </div> 
     </div> 
     <!-- End of 2nd Row --> 
     <!-- ============== Items Table ============= --> 
     <div class="row"> 
      <div class="table-responsive"> 
       <table class="table table-bordered" id="tab_logic"> 
        <thead> 
         <tr> 
          <th>Item Description</th> 
          <th>Part Number</th> 
          <th>Unit</th> 
          <th>QTY</th> 
          <th>Unit Price (SR)</th> 
          <th>Total Price (SR)</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td class="col-md-4"> 
            <button class="btn btn-secondary" data-toggle="modal">Select ID</button> 
            <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="false"> 
             <div class="modal-dialog modal-lg"> 
              <div class="modal-content"> 
               <div class="modal-header"> 
                <!-- HEADER | MODAL --> 
                <h3 class="modal-title">Title Here</h3> 
               </div> 
               <!-- BODY | MODAL --> 
               <div class="modal-body"> 
                Text Content 
               </div> 
               <!-- FOOTER | MODAL --> 
               <div class="modal-footer"> 
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
                <button type="button" class="btn btn-secondary">Save changes</button> 
               </div> 
              </div> 
             </div> 
            </div> 
          </td> 
          <td> 
           <strong>Record</strong> 
          </td> 
          <td> 
           <strong>Record</strong> 
          </td> 
          <td class="col-md-1"> 
           <div> 
            <input class="form-control" type="number" name="PRno"> 
           </div> 
          </td> 
          <td class="col-md-2"> 
           <div> 
            <input class="form-control" type="number" name="price" step="0.01" min="0.01" max="1000000"> 
           </div> 
          </td> 
          <td> 
           <strong>Record</strong> 
          </td> 
          <td class="col-md-1" id="deleteBtn"> 
           <a class="btn btn-default deleteBtn">Delete</a> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
     <!-- End of 3rd Row --> 
     <div class="row"> 
      <a id="add_row" class="btn btn-default pull-right">Add</a> 
     </div> 
     <!-- End of 4th Row --> 
     <!-- ============== Items Table ============= --> 
     <div class="input-tigger"> 
      <input type="submit" class="btn btn-primary btn-md" name="btninsert" value="Insert" action="input.php" method="post"> 
     </div> 
    </form> 
</div> 

，如图所示我加入了插入按钮，插入所有的表单到数据库。

模式如何作为插入按钮而不是实际的按钮工作？

Answer 1

你可以使用javascript/jquery来防止按钮的默认动作和写入方法的实例。我认为这会对你有所帮助。

$(function() // execute once the DOM has loaded 
{ 
    // wire up Add Item button click event 
    $("#myButton").click(function(event) //give an ID to modal button 
    { 
    event.preventDefault(); // cancel default behavior 
    $('#myModal').modal('show'); //give an ID to modal 
    //... rest of add logic 
    }); 
});