我有一个表格和一个模态。但是，我希望将模态中的信息发送到服务器。我在事务的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>
<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>
<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>
<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>
<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>
我收到表单数据;如果我控制我的transactio模态的表单数据。但是，ajax调用不会发送到dotransaction.php，它将转到update-profile.php。请帮忙。
答案 0 :(得分：1)
我相信from action属性指向update-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在页面中是唯一的，应该是。