CODEWITHSUNDEEP
javascriptphphtmlformsinput
Frederik Nielsen
Frederik Nielsen

Reputation: 147

update(edit) single input field php js

enter image description here

 <?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; ?>

So I have this code, that has these input fields that get loop in. It should be possible to update on input at the time. But at the moment I'm only apple to update the first input field. Thats the resonse why i have put a counter in, to make the name unique for each input field. When you press the button "edit" it sendt the data to this script:

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

This call the function 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 () {},
});
}

Upvotes: 3

Views: 153

Answers (1)

Frederik Nielsen
Frederik Nielsen

Reputation: 147

Solution

So I Change my two button delete and edit to call $('.editExtraInputFieldJob').click with a class instead of id. Then I added data-* attribute in the button

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

So my button look like this know

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

In my script i'm apple to extract that info on the click event and send the id as a parameter to my fn editNewJobInputField(id).

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

First part of my editNewJobInputField

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

Upvotes: 2

Related Questions