爲什麼我的模態數據沒有發送到服務器？

Question

我有一個表單和一個模式。但是，我希望將模式中的信息發送到服務器。我在事務的SEND按鈕上寫了一個ajax調用。但是，主要的形式正在提交。

這裏是我的代碼 -

<script> 

      $(document).ready(function(){ 
       $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy', maxDate: 0 }); 

       $("input#submit_trans").click(function(){ 

        alert("Submit trans clicked"); 

        $.ajax({ 
         type: "POST", 
         url: "dotransaction.php", 
         data: $('form.transaction').serialize(), 
         success: function(msg){ 
          $("#thanks").html(msg); 
          $("#form-content").modal('hide'); 
         }, 
         error: function(){ 
          alert("Failed to process transaction"); 
         } 
        }); 
       }); 
      }); 
    </script> 


Here is my HTML code- 

    <div class="container"> 
     <form name = "profileForm" id="profile-form" enctype="multipart/form-data" action="update-profile.php" method="post"> 


</form> 

<div class = "row text-center"> 
      <input class="btn btn-primary" id="submit-button" name="submit-button" type="submit" value="Save"> 

      <input class="btn btn-danger" id="reset-button" type="reset" value="Reset"> 


      <div id="addTransaction" class="modal fade" role="dialog" style="display: none;"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <a class="close" data-dismiss="modal">×</a> 
          <h3>Add transaction</h3> 
         </div> 

         <div class="modal-body"> 
          <form class="transaction" name="transaction"> 
           <input type="hidden" name="trans_date" value=<?php echo date("Y-m-d H:i:s");?>><br> 

           <label>Payment mode</label>&nbsp; 
           <select class="form-control" name="trans_payment_mode" id="payment_mode" class="required"> 
            <option value="">Select</option> 
            <option value="cash">Cash</option> 
           </select><br> 

           <label>Transaction amount</label>&nbsp; 
           <div id = "div_trans_amt"> 
            <label id="rs">Rs.</label> 
            <input id = "trans_amt" type="text" name="trans_amt" class="input-xlarge"><br> 
           </div> 

           <label>Transaction details</label><br> 
           <textarea name="trans_details" class="input-xlarge" rows="5" cols="75" style="resize:none;"></textarea> 

           <input type="hidden" name="trans_cust_id" value=<?php echo $cid;?>><br> 
           <input type="hidden" name="trans_admin_person" value=<?php echo $aid;?>><br> 
          </form> 
         </div> 

         <div class="modal-footer"> 
          <input class="btn btn-success" type="submit" value="Send" id="submit_trans"> 
          <a href="#" class="btn" data-dismiss="modal">Cancel</a> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div id="thanks"> 
       <p><a data-toggle="modal" style="margin-top: 15px;" data-target = "#addTransaction" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p> 
      </div> 
     </div> 
    </div><div class = "row text-center"> 
      <input class="btn btn-primary" id="submit-button" name="submit-button" type="submit" value="Save"> 

      <input class="btn btn-danger" id="reset-button" type="reset" value="Reset"> 


      <div id="addTransaction" class="modal fade" role="dialog" style="display: none;"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <a class="close" data-dismiss="modal">×</a> 
          <h3>Add transaction</h3> 
         </div> 

         <div class="modal-body"> 
          <form class="transaction" name="transaction"> 
           <input type="hidden" name="trans_date" value=<?php echo date("Y-m-d H:i:s");?>><br> 

           <label>Payment mode</label>&nbsp; 
           <select class="form-control" name="trans_payment_mode" id="payment_mode" class="required"> 
            <option value="">Select</option> 
            <option value="cash">Cash</option> 
           </select><br> 

           <label>Transaction amount</label>&nbsp; 
           <div id = "div_trans_amt"> 
            <label id="rs">Rs.</label> 
            <input id = "trans_amt" type="text" name="trans_amt" class="input-xlarge"><br> 
           </div> 

           <label>Transaction details</label><br> 
           <textarea name="trans_details" class="input-xlarge" rows="5" cols="75" style="resize:none;"></textarea> 

           <input type="hidden" name="trans_cust_id" value=<?php echo $cid;?>><br> 
           <input type="hidden" name="trans_admin_person" value=<?php echo $aid;?>><br> 
          </form> 
         </div> 

         <div class="modal-footer"> 
          <input class="btn btn-success" type="submit" value="Send" id="submit_trans"> 
          <a href="#" class="btn" data-dismiss="modal">Cancel</a> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div id="thanks"> 
       <p><a data-toggle="modal" style="margin-top: 15px;" data-target = "#addTransaction" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p> 
      </div> 
     </div> 
    </div> 

我得到的表單數據;如果我安慰我的交易模式的表單數據。然而，ajax調用不會去dotransaction.php'它的update-profile.php。請幫忙。

Answer 1

我相信從action屬性指向更新，profile.php

<form name = "profileForm" id="profile-form" enctype="multipart/form-data" action="update-profile.php" method="post"> 

所以阻止提交按鈕的默認操作，這樣的形式不提交

$("#submit_trans").click(function(e){ 

    e.preventDefault(); 
    // other code here 

而且對於選擇器，您可以使用$("#submit_trans")作爲ID在頁面中是唯一的，應該是。