我正在尝试修改我下载的代码，该代码允许在文件index.php中添加/删除动态添加的输入文本和一个dropdownlist，我从dropdownlist中选择一个帐户名（$ row [“ name”]并提取该帐户编号$ row [“ account_id”]）并在输入字段（name =“ amount []”）中输入一个金额，然后在MySQL数据库中使用insert.php插入数据，现在我要添加/删除输入名称使用日期选择器从日历（日期选择器）中选择支出的日期，并且如果我已经添加了服务器帐户支出来注册输入的日期，则每个项目的日期可能都不相同，请问有什么想法，我不知道如何做吧。这个Index.php我的代码：
<?php
//index.php
//Fetch account_id from select account name from dropdownlist
$connect = new PDO("mysql:host=localhost;dbname=condominium", "root", "mysq1passw0rd");
function fill_unit_select_box($connect)
{
$output = '';
$query = "SELECT * FROM accounts ORDER BY name ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$output .= '<option value="'.$row["account_id"].'">'.$row["name"].'</option>';
}
return $output;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Add Remove Select Box Fields Dynamically using jQuery Ajax in PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<br />
<div class="container">
<h3 align="center">Add Remove Select Box Fields Dynamically using jQuery Ajax in PHP</h3>
<form method="post" id="insert_form">
<div align="left">
<h4 align="center">Enter Expense Details</h4>
<!-- Asi abre directamentete Modal usando data-target="#userModal -->
<!-- <button type="button" class="btn btn-success" data-toggle="modal" data-target="#AddModal">Agregar Emp.</button>-->
<!-- Con Input hay que enviarlo primero a ajax y ajax abre modal -->
<label style="color: blue" >Select Date</label>
<div><input type="text" name="selDate" id="datepicker"class="tcalx" value="" /></div>
<!-- <input type="text" class="form-control" placeholder="1000" name="preciobsmayor" id="preciobsmayor" readonly="readonly"><br>-->
<br />
<br />
</div>
<div class="table-repsonsive">
<span id="error"></span>
<table class="table table-bordered" id="item_table">
<tr>
<th>Account </th>
<th>Amount</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
<div align="center">
<input type="submit" name="submit" class="btn btn-info" value="Insert" />
</div>
</div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$(document).on('click', '.add', function(){
var html = '';
//Add Dropdownlist and Input
html += '<tr>';
html += '<td><select name="account_id[]" class="form-control account_id"><option value="">Select Product</option><?php echo fill_unit_select_box($connect); ?></select></td>';
html += '<td><input type="text" name="amount[]" class="form-control amount" /></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
//Give Messages asking for entering Data
$('#insert_form').on('submit', function(event){
event.preventDefault();
var error = '';
$('.account_id').each(function(){
var count = 1;
if($(this).val() == '')
{
error += "<p>Select Account Name at "+count+" Row</p>";
return false;
}
count = count + 1;
});
$('.amount').each(function(){
var count = 1;
if($(this).val() == '')
{
error += "<p>Enter Amount "+count+" Row</p>";
return false;
}
count = count + 1;
});
//Send Data To Insert in Mysql
var form_data = $(this).serialize();
if(error == '')
{
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
if(data == 'ok')
{
$('#item_table').find("tr:gt(0)").remove();
$('#error').html('<div class="alert alert-success">Expense Saved</div>');
}
}
});
}
else
{
$('#error').html('<div class="alert alert-danger">'+error+'</div>');
}
});
});
//Dateicker Function not insert en rows
$(function() {
$("#datepicker").datepicker({
//showOn: both - datepicker will appear clicking the input box as well as the calendar icon
//showOn: button - datepicker will appear only on clicking the calendar icon
showOn: 'button',
//you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
buttonImage: 'https://theonlytutorials.com/demo/x_office_calendar.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
dateFormat: 'dd-mm-yy'
});
});
</script
我的用于插入数据的My insert.php代码：
<?php
//Insert Data
if(isset($_POST["account_id"]))
{
$connect = new PDO("mysql:host=localhost;dbname=condominium", "root", "mysq1passw0rd");
$order_id = uniqid();
for($count = 0; $count < count($_POST["account_id"]); $count++)
{
$query = "INSERT INTO expense
(account_id, amount)
VALUES (:account_id, :amount)
";
$statement = $connect->prepare($query);
$statement->execute(
array(
':account_id' => $_POST["account_id"][$count],
':amount' => $_POST["amount"][$count],
)
);
}
$result = $statement->fetchAll();
if(isset($result))
{
echo 'ok';
}
}
?>
在index.php代码中，我有datepicker输入字段，但不属于可添加/删除的代码：
<label style="color: blue" >Select Date</label>
<div><input type="text" name="selDate" id="datepicker"class="tcalx" value="" /></div>
另一个问题如果我将datepicker输入字段留在了无法添加/删除的代码中，但是我只想选择日历中的一个日期，如何将输入的日期变量传递给insert.php？
提前致谢
您只需要datepicker像添加其他输入一样添加其他输入，然后在表中添加其他输入后就需要对其进行初始化。因此，您可以简单地使用 $('#item_table tr:last .datepicker').datepicker(options)此方法将tr在表中找到最后添加的内容，并在该内部获取.datepicker并初始化相同
演示代码：
var options = {
showOn: 'button',
buttonImage: 'https://theonlytutorials.com/demo/x_office_calendar.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
dateFormat: 'dd-mm-yy'
}
$(document).on('click', '.add', function() {
var html = '';
//Add date input use `class` adjust it accroding to your need
html += '<tr>';
html += '<td><select name="account_id[]" class="form-control account_id"><option value="">Select Product</option><?php echo fill_unit_select_box($connect); ?></select></td>';
html += '<td><input type="text" name="amount[]" class="form-control amount" /></td><td><input type="text" name="selDate" class="datepicker tcalx" value="" /></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus">-</span></button></td></tr>';
$('#item_table').append(html);
//get tr last added and inside that datpicker initialize it..
$('#item_table tr:last .datepicker').datepicker(options);
});
$(document).on('click', '.remove', function() {
$(this).closest('tr').remove();
});<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<table class="table table-bordered" id="item_table">
<tr>
<th>Account </th>
<th>Amount</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus">Add</span></button></th>
</tr>
</table>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句