Why the Value of Input Elements Are Not Changing

Why the value of input elements are not changing?

It's because it's a form. Add an event listener to make sure the form doesn't refresh the page (default action when action is not given or invalid):

document.querySelector("form").addEventListener("submit", e => e.preventDefault());

Input value not updating on page when changed

You should just set the value of the element and all would work as expected.

The explanation you can find here.

function Conversione(from, to, gradi) {
  const x = document.getElementById(from).value;
  if (document.getElementById(gradi).value == "Centigradi") {
    document.getElementById(to).value = ((x - 32) * 5) / 9;
  } else {
    document.getElementById(to).value = (x * 9) / 5 + 32;
  }
}

My input element is not updating or display value manually

If you are sure your ajax call returns data properly. Then the issue may be the jQuery part. Since you didn't allocate the property table for the $table variable when converting to JSON, you should use the ajax returned data like:

success: function (data) {
  document.getElementById('item_IDs').value = data.item_IDs;

  $("#target-table").empty();
  $('#target-table').append(data); //!!!
}

If you want keep the property,try:

return response()->json(['table'=>$table]);

Value of input is text not changing

That happens because you are copying the text from the <input> to the variable. Unlike objects, primitives (like strings) are passed by value. That means that when you update the variable, you are not updating the <input> value.

This code works:

var inputElement = document.getElementById('textinput');

function textChanger() {
  setTimeout(function() {
    inputElement.value = 'newtext';
  }, 3000);
}

<!DOCTYPE html> <!-- Don't forget the doctype! -->
<html>

<head>
  <title> some title </title>
</head>

<body>
  <input type="text" value="sometext" id="textinput" oninput="textChanger()">
  <script type="text/javascript" scr="main.js"></script>
</body>

</html>

Input value change is not reflected on other elements

Consider the following.

$(function() {
  function changeColor(arr) {
    $("#resultColor").css("background-color", "rgb(" + arr.join(",") + ")");
  }

  function getValues() {
    return [
      $("#r").val(),
      $("#g").val(),
      $("#b").val()
    ];
  }

  $("input[type='range']").on('input change', function() {
    var i = $(this).attr("id");
    $("#" + i + "Input").val($(this).val());
    changeColor(getValues());
  });

  $("input[type='text']").change(function() {
    var i = $(this).attr("id").substring(0, 1);
    $("#" + i).val($(this).val());
    changeColor(getValues());
  });

  changeColor(getValues());
});

input[type='text'] {
  width: 2em;
}

label {
width: 60px;
display: inline-block;
}

#resultColor {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  top: 10px;
  left: 300px;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div>
    <label>Red</label> <input type="range" min="0" max="255" value="0" id="r" /> <input type="text" id="rInput" value="0" />
  </div>
  <div>
    <label>Green</label> <input type="range" min="0" max="255" value="0" id="g" /> <input type="text" id="gInput" value="0" />
  </div>
  <div>
    <label>Blue</label> <input type="range" min="0" max="255" value="0" id="b" /> <input type="text" id="bInput" value="0" />
  </div>
  <div id="resultColor"></div>
</div>

HTML input not updating value

That's not how javascript works. A webpage's HTML doesn't automatically update when an input field's value changes.

If you want such functionality, you could do this:

$(function(){  $('.js-sortable-buttons').on('keyup change paste','input',function(){    $(this).attr('value', $(this).val());  });});

The value of input element changes but not shown in the browser(s)?

input.value = li_target.innerHTML

Why the Value of Input Elements Are Not Changing