Javascript 如何在php/json中使按钮保持在一行中？
正如标题所示，保存表单后，我无法使按钮保持在一行中。我能够通过JavaScript在一行中添加一个按钮 我有一个php代码，如下所示。下面的html/php代码的工作方式是，在添加行时，我们可以从每一行中选择日期，也可以保存日期。 现在我正在尝试在一行中添加一个按钮。这里是（完全是JS） 我已使用，以便在一行中添加一个按钮（包含任何文本） 我现在在添加行时遇到的问题是，按钮确实会显示在每一行中，但是在保存表单并返回后，按钮会从每一行中消失，可能，因为JSON中没有保存任何内容 html/php代码：Javascript 如何在php/json中使按钮保持在一行中？,javascript,php,json,post,dom,Javascript,Php,Json,Post,Dom,正如标题所示，保存表单后，我无法使按钮保持在一行中。我能够通过JavaScript在一行中添加一个按钮 我有一个php代码，如下所示。下面的html/php代码的工作方式是，在添加行时，我们可以从每一行中选择日期，也可以保存日期。 现在我正在尝试在一行中添加一个按钮。这里是（完全是JS） 我已使用，以便在一行中添加一个按钮（包含任何文本） 我现在在添加行时遇到的问题是，按钮确实会显示在每一行中，但是在保存表单并返回后，按钮会从每一行中消失，可能，因为JSON中没有保存任何内容 html/php代
<?php
$output = array();
按钮未显示，因为您将无法在php请求中获取HTML按钮元素值。要获取按钮值，您必须使用额外的隐藏变量
<?php
if (!empty($_POST)) {
$output = array();
if (!empty($_POST['house_sitting_date'])) {
$output['house_sitting_date'] = $_POST['house_sitting_date'];
}
if (!empty($_POST['row_delete'])) {
$output['row_delete'] = $_POST['row_delete'];
}
$fp = fopen('ptp-ess_landing_house.json', 'w');
fwrite($fp, json_encode($output));
fclose($fp);
}
$data = [];
if(file_exists('ptp-ess_landing_house.json')) {
$data = json_decode(file_get_contents('ptp-ess_landing_house.json'));
}
?><form method="post">
<!-- Add New Row Button START -->
<div class="plus-minus-button" style="text-align:center;">
<button type="button" id="addRow" onclick="rowAdd()">+</button>
</div>
<!-- Add New Row Button END -->
<div id="rows" style="display:flex; justify-content: center;"> <!-- Big div START -->
<!-- This is what I have tried to add a button (START) -->
<!-- Remove Button START -->
<div class="rows-delete" style="text-align:center;">
<h4 style="text-align:center;">Delete Rows</h4><?php
if (empty($data->row_delete)) {
?><div class="row-delete" style="margin-right:30px; margin-top:20px;">
<button type="button" />Remove</button>
<input type="hidden" name="row_delete[]" value="1" />
</div><?php
}
else {
foreach ($data->row_delete as $row_delete){
?><div class="row-delete" style="margin-right:30px; margin-top:20px;">
<button type="button">Remove</button>
<input type="hidden" name="row_delete[]" value="<?php echo $row_delete;?>" />
</div><?php
}
}
?></div>
<!-- Remove Button END -->
<!-- This is what I have tried to add a button (END) -->
<!-- Sitting Date START -->
<div class="sitting-days" style="text-align:center;">
<h4 style="text-align:center;">Select Date</h4><?php
if (empty($data->house_sitting_date)) {
?><!-- Select Date START -->
<div class="select-date" style="margin-right:30px; margin-top:20px;">
<input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">
</div><?php
}
else {
foreach ($data->house_sitting_date as $date){ ?>
<!-- Select Date START -->
<div class="select-date" style="margin-right:30px; margin-top:20px;">
<input type="date" class="house-sitting-date" name="house_sitting_date[]" value="<?php if($date) {echo $date;}?>">
</div><?php
}
}
?></div>
<!-- Sitting Date END -->
</div>
<!-- Big div END -->
<hr />
<div style="text-align:center;">
<input type="submit" value="submit" />
</div>
</form>
<script>
function rowAdd(event) {
document.getElementById("rows")
.insertAdjacentHTML('beforeend', newRow());
}
function newRow() {
var row_delete = document.querySelectorAll('input[name="row_delete[]"]');
var row_delete_length = row_delete.length + 1;
return `<div id="default-node" class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<div class="row-delete" style="margin-right:30px;">
<button type="button">Remove</button>
<input type="hidden" name="row_delete[]" value="` + row_delete_length + `" />
</div>
<div class="select-date" style="margin-right:30px;">
<input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">
</div>
</div>`;
}
</script>
+
删除行
去除
去除
按钮未显示，因为您将无法在php请求中获取HTML按钮元素值。要获取按钮值，您必须使用额外的隐藏变量
<?php
if (!empty($_POST)) {
$output = array();
if (!empty($_POST['house_sitting_date'])) {
$output['house_sitting_date'] = $_POST['house_sitting_date'];
}
if (!empty($_POST['row_delete'])) {
$output['row_delete'] = $_POST['row_delete'];
}
$fp = fopen('ptp-ess_landing_house.json', 'w');
fwrite($fp, json_encode($output));
fclose($fp);
}
$data = [];
if(file_exists('ptp-ess_landing_house.json')) {
$data = json_decode(file_get_contents('ptp-ess_landing_house.json'));
}
?><form method="post">
<!-- Add New Row Button START -->
<div class="plus-minus-button" style="text-align:center;">
<button type="button" id="addRow" onclick="rowAdd()">+</button>
</div>
<!-- Add New Row Button END -->
<div id="rows" style="display:flex; justify-content: center;"> <!-- Big div START -->
<!-- This is what I have tried to add a button (START) -->
<!-- Remove Button START -->
<div class="rows-delete" style="text-align:center;">
<h4 style="text-align:center;">Delete Rows</h4><?php
if (empty($data->row_delete)) {
?><div class="row-delete" style="margin-right:30px; margin-top:20px;">
<button type="button" />Remove</button>
<input type="hidden" name="row_delete[]" value="1" />
</div><?php
}
else {
foreach ($data->row_delete as $row_delete){
?><div class="row-delete" style="margin-right:30px; margin-top:20px;">
<button type="button">Remove</button>
<input type="hidden" name="row_delete[]" value="<?php echo $row_delete;?>" />
</div><?php
}
}
?></div>
<!-- Remove Button END -->
<!-- This is what I have tried to add a button (END) -->
<!-- Sitting Date START -->
<div class="sitting-days" style="text-align:center;">
<h4 style="text-align:center;">Select Date</h4><?php
if (empty($data->house_sitting_date)) {
?><!-- Select Date START -->
<div class="select-date" style="margin-right:30px; margin-top:20px;">
<input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">
</div><?php
}
else {
foreach ($data->house_sitting_date as $date){ ?>
<!-- Select Date START -->
<div class="select-date" style="margin-right:30px; margin-top:20px;">
<input type="date" class="house-sitting-date" name="house_sitting_date[]" value="<?php if($date) {echo $date;}?>">
</div><?php
}
}
?></div>
<!-- Sitting Date END -->
</div>
<!-- Big div END -->
<hr />
<div style="text-align:center;">
<input type="submit" value="submit" />
</div>
</form>
<script>
function rowAdd(event) {
document.getElementById("rows")
.insertAdjacentHTML('beforeend', newRow());
}
function newRow() {
var row_delete = document.querySelectorAll('input[name="row_delete[]"]');
var row_delete_length = row_delete.length + 1;
return `<div id="default-node" class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<div class="row-delete" style="margin-right:30px;">
<button type="button">Remove</button>
<input type="hidden" name="row_delete[]" value="` + row_delete_length + `" />
</div>
<div class="select-date" style="margin-right:30px;">
<input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">
</div>
</div>`;
}
</script>
+
删除行
去除
去除
脚本中的row_delete（）函数用于在保存前删除新的_行，因此它只显示在add_more上，保存后消失。它的基本取消按钮用于添加新行，该功能不需要。我已经更新了脚本。rowDelete（）函数将用于删除一行。这是问题的另一部分，我将在稍后讨论。我现在在添加一行时遇到的问题是，删除按钮确实显示在每一行中，但是在保存表单后，删除按钮从每一行中消失。保存表单并返回网页后，它无法停留。@AhmedSunny您在吗？好的，您确定json返回$data->row\u delete吗。有一些数据吗？脚本中的row_delete（）函数用于在保存前删除新行，因此它只在“添加更多”时显示，并在保存后消失。它的基本取消按钮用于添加新行，该功能不需要。我已经更新了脚本。rowDelete（）函数将用于删除一行。这是问题的另一部分，我将在稍后讨论。我现在在添加一行时遇到的问题是，删除按钮确实显示在每一行中，但是在保存表单后，删除按钮从每一行中消失。保存表单并返回网页后，它无法停留。@AhmedSunny您在吗？好的，您确定json返回$data->row\u delete吗。有数据吗？嘿，普拉迪普，答案看起来不错。现在发生的是JSON中的每一行，我得到以下{“row_delete”：[“1”，“1”，“1”]}所以这不是你想要的？你对删除行的期望是什么？我在想我们是否可以为everys按钮提供唯一的值。该按钮实际上是一个删除按钮，单击该按钮将删除一行。我将应用的逻辑是单击删除按钮，它将从JSON数组中删除值，并删除具有该删除按钮的相应行。请再次检查代码，我已做了一些更改。现在，您将获得行_delete的唯一值。在此之前，请删除JSON中的所有数据，然后执行。嘿，Pradeep，答案看起来不错。现在发生的是JSON中的每一行，我得到以下{“row_delete”：[“1”，“1”，“1”]}所以这不是你想要的？你对删除行的期望是什么？我在想我们是否可以为everys按钮提供唯一的值。该按钮实际上是一个删除按钮，单击该按钮将删除一行。我将应用的逻辑是单击删除按钮，它将从JSON数组中删除值，并删除具有该删除按钮的相应行。请再次检查代码，我已做了一些更改。现在，您将获得行_delete的唯一值。在此之前，请删除JSON中的所有数据，然后执行。