javascript - 更新(编辑)单个输入字段 php js

Question

 <?php $count = 0; foreach ($jobsInputFields as $jobsInputField): ?>
    <form class="kt-form kt-form--label-right w-100" id="groupFormAddInputField">
     <?php $count = $count + 1; ?>
     <input name="count" hidden type="text" value="<?=$count?>"/>
     <div class="form-group form-group-sm row">
         <input name="extraInputFieldId<?=$count?>" hidden type="text" value="<?=$jobsInputField->id?>"/>
         <label name="extraField" class="col-3 col-form-label col-form-label-sm"><?=$jobsInputField->extra_field?></label>
     <div class="col-7">
         <div class="kt-input-icon">
            <input value="<?=$jobsInputField->value?>" name="value<?=$count?>" type="text" style="padding-right:30px;" class="form-control form-control-sm" placeholder="Indtast værdi">
         </div>
     </div>
     <div class="col-2">
     <button type="submit" class="btn btn-icon btn-danger" id="deleteExtraInputFieldJob"><span data-toggle="tooltip" data-placement="bottom" title="slet input felt"><i class="fad fa-trash"></i></span></button>
     <button type="submit" class="btn btn-icon btn-warning" id="editExtraInputFieldJob"><span data-toggle="tooltip" data-placement="bottom" title="redigere input felt"><i class="fad fa-edit"></i></span></button>
     </div>
  </div>             
  </form>
<?php endforeach; ?>

所以我有这段代码，其中有这些循环输入的字段。当时应该可以更新输入。但目前我只是更新第一个输入字段的苹果。这就是为什么我放入一个计数器，使每个输入字段的名称唯一的原因。当您按下“编辑”按钮时，它会将数据发送到此脚本:

<script>
$(function() {
    $('#editExtraInputFieldJob').click(function (event) {
        event.preventDefault();
        editNewJobInputField();
    })
</script>

这调用函数editNewJobInputField();

function editNewJobInputField() {
console.log("edit called")
let count = $("input[name=count]").val();
console.log(count);
var body = {
  extraInputFieldId: $(`input[name=extraInputFieldId${count}]`).val(),
  value: $(`input[name=value${count}]`).val(),
};
console.log(body);
$.ajax({
  type: "POST",
  dataType: "json",
  url: "/php_components/db/update/job-field.php",
  data: body,
  beforeSend: function () {},
  success: function (data) {
  console.log(data);
    if (data.status !== 200) {
      $("#editAlert").show();
    } else {
      // $(".modal-edit").modal("hide");
      // location.reload();
    }
  }
  complete: function () {},
});
}

Answer 1

解决方案

所以我更改了我的两个按钮删除和编辑以调用 $('.editExtraInputFieldJob').click 类而不是 id。然后我在按钮中添加了 data-* 属性

data-item="<?=$count?>"

所以我的按钮看起来像这样知道

<button type="submit" class="deleteExtraInputFieldJob" data-item="<?=$count?>"></button>
<button type="submit" class="editExtraInputFieldJob" data-item="<?=$count?>"</button>

在我的脚本中，我很乐意提取有关点击事件的信息，并将 id 作为参数发送到我的 fn editNewJobInputField(id)。

$('.editExtraInputFieldJob').click(function (event) {
        event.preventDefault();
        let id = $(this).data('item');
        console.log(id);
        editNewJobInputField(id);
    })

我的 editNewJobInputField 的第一部分

function editNewJobInputField(id) {
var body = {
extraInputFieldId: $(`input[name=extraInputFieldId${id}]`).val(),
value: $(`input[name=value${id}]`).val(),
};