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
Related Topics
If Check Box Checked Disable Other, If Unchecked Enable All in React
How to Remove a Parameter from a Url
How to Refresh an Angular Component
Vuejs Accessing a Method from Another Method
Disable Scrolling When Touch Moving Certain Element
Bootstrap Modal Hide Not Working With Jquery Ajax
Jquery Ajax Readystate 0 Responsetext Status 0 Statustext Error
Chart.Js Showing Time (Hh:Mm:Ss - 24 Hour Clock) on Xaxis
React How to Fix Failed Prop Type - Invalid Prop of Type String Expected Object
Want to Hide Menu by Clicking Outside the Menu Element
Node Server Running But Localhost Refusing to Connect
This.Props.History.Push Works in Some Components and Not Others