我需要使用序列化jquery ajax调用保存具有静态和动态表的表单输入。
该表单有两个动态表和两个用于收据编号和总金额的字段。我需要使用save_deposit按钮调用ajax。需要将数据保存在mysql db中作为插入。
我试图通过邮政将一个动态表与php代码一起保存在php文件中。我要做的是通过ajax调用来完成此功能。
localStorage我对db的插入如下，它在同一php文件中
{
<form id="myform" method="POST">
<div class="panel panel-success">
<div class="panel-heading">
<h4>Savings | Loans Deposits</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<label>Member</label>
<select name="member_id" id="member_id" class="form-control">
<option value="">Select Member</option>
<?php
$query = "SELECT * FROM users_table ORDER BY id ASC";
$result = mysqli_query($conn, $query);
while($row = mysqli_fetch_array($result))
{
echo '<option value="'.$row["id"].'">'.$row["username"].'</option>';
}
?>
</select>
</div>
</div>
<hr>
<section id="savings">
<hr>
<div class="row">
<div class="col-md-2">
<INPUT class="btn btn-primary" type="button" value="Add Savings Payment" onclick="addRow('dataTable')" />
</div>
<div class="col-md-2">
<INPUT class="btn btn-danger" type="button" value="Delete Selected Payment" onclick="deleteRow('dataTable')" />
</div>
</div>
<hr>
<div class="row">
<div class="col-md-10">
<TABLE class="table table-bordered" id="dataTable">
<TR>
<TD><INPUT class="form-control col-md-2" type="checkbox" name="chk"/></TD>
<TD>
<select name="savings_account_number[]" id="savings_account_number" class="form-control">
<option value="">Select Member</option>
<?php
$query = "SELECT * FROM savings_account_table ORDER BY account_number ASC";
$result = mysqli_query($conn, $query);
while($row = mysqli_fetch_array($result))
{
echo '<option value="'.$row["account_number"].'">'.$row["account_number"].'</option>';
}
?>
</select>
</TD>
<TD>
<INPUT class="form-control text-right" type="text" name="savings_deposit_amount[]" onkeyup="total()" onkeypress="return isNumber(event)"/>
</TD>
</TR>
</TABLE>
</div>
</div>
<hr>
</section>
<section id="loans">
<hr>
<div class="row">
<div class="col-md-2">
<INPUT class="btn btn-primary" type="button" value="Add Loans Payment" onclick="addRow('loans_table')" />
</div>
<div class="col-md-2">
<INPUT class="btn btn-danger" type="button" value="Delete Selected Payment" onclick="deleteRow('loans_table')" />
</div>
</div>
<hr>
<div class="row">
<div class="col-md-10">
<TABLE class="table table-bordered" id="loans_table" width="350px" border="1">
<TR>
<TD><INPUT class="form-control" type="checkbox" name="chk"/></TD>
<TD>
<label>Select Loans Account</label>
<select name="loans_account_number[]" id="loans_account_number" class="form-control">
<option value="">Select Member</option>
<?php
$query = "SELECT * FROM savings_account_table ORDER BY account_number ASC";
$result = mysqli_query($conn, $query);
while($row = mysqli_fetch_array($result))
{
echo '<option value="'.$row["account_number"].'">'.$row["account_number"].'</option>';
}
?>
</select>
</TD>
<TD>
<label>Deposit Amount</label>
<INPUT class="form-control text-right" type="text" name="loans_deposit_amount[]"/>
</TD>
</TR>
</TABLE>
</div>
</div>
<hr>
</section>
<div class="row">
<div class="col-md-3">
<label>Receipt Number</label>
<input id="receipt_number" name="receipt_number" value="" class="form-control text-right"/>
</div>
<div class="col-md-3">
<label>Total Amount</label>
<input disabled id="total_amount" name="total_amount" value="0.00" class="form-control text-right"/>
</div>
<div class="col-md-3">
<label>Row Count</label>
<input type="hidden" id="row_count" name="row_count" class="form-control text-right"/>
</div>
<div class="col-md-2">
<label>Save Deposit</label>
<button id="save_deposit" class="btn btn-primary" type="submit">Save Deposit</button>
</div>
</div>
</div>
</div>
</form>
}
答案 0 :(得分：0)
在HTML末尾添加以下内容：
(function($, window, undefined) {
$('#myform').on('submit', function() {
event.preventDefault();
$.post(
'ajax-insert-data.php',
$('#myform').serialize()
);
});
})();
还要将处理POST的PHP代码放入另一个名为'ajax-insert-data.php'的文件中