为什么我的模态数据没有发送到服务器？

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在页面中是唯一的，应该是。