In PHP MySQL, add default POST values to dynamically created input row fields.
P粉409742142
2023-07-30 10:10:35
<p>I'm developing a small HTML form integrated with a table. The table has an input field called "name" which displays the current date as the default value. This works great for the first row. However, when I add more rows dynamically, the new input fields don't show the default date value. Here is my current code setup: </p>
<pre class="brush:html;toolbar:false;"><html>
<body>
<table class="table table-bordered">
<thead class="table-success" style="background-color: #3fbbc0;">
<tr>
<th width="15%"><center>Service</th>
<th width="5%"></th>
<th>
<button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>
</th>
</tr>
</thead>
<tbody id="TBody">
<tr id="TRow" class="d-none">
<td><input type="text" name="name[]" id="name" value="<?php echo date("Y-m-d"); ?>"></td>
<td class="NoPrint">
<button type="button" class="btn btn-success" style="line-height: 1;" onclick="BtnDel(this)">x</button>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// Script to add dynamic rows in the table
function BtnAdd() {
var v = $("#TRow").clone().appendTo("#TBody");
$(v).find("input").val('');
$(v).find("input").autocomplete({ source: 'backend-script.php' });
$(v).removeClass("d-none");
$(v).find("th").first().html($('#TBody tr').length - 1);
}
function BtnDel(v) {
$(v).parent().parent().remove();
$("#TBody").find("tr").each(function(index) {
$(this).find("th").first().html(index);
});
}
</script>
</body>
</html>
</pre>
<p>I need some guidance on how to make these dynamically created fields also display the current date as their default value. Thank you very much for your help with my study project. </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The problem seems to be that when creating new rows dynamically, you are setting the value of the input field to an empty string. That's why the new line doesn't show the current date.
You can modify the BtnAdd() function to set the value of the new input field to the current date. You can get the current date in JavaScript like this:
new Date().toISOString().split('T')[0].Take a look:
function BtnAdd() { /*Add Button*/ var v = $("#TRow").clone().appendTo("#TBody") ; var currentDate = new Date().toISOString().split('T')[0]; // Get the current date $(v).find("input").val(currentDate); // Set the value of the new input field to the current date $(v).find("input").autocomplete({ source: 'backend-script.php' }); $(v).removeClass("d-none"); $(v).find("th").first().html($('#TBody tr').length - 1); }