We Keep Coding

detect as soon as there is value populated using javascript or entered using keyboard in input field

I have written this code which detects if there is a value populated in productName field using javascript and then it parses and auto-populate the input field quantity. My code only works if productName field is populated through javascript code and fails to register keyboard inputs if I use onChange
I want to detect in both scenarios i.e javascript and keyboard, how do I detect using the keyboard in this code?
const input = document.getElementById('productName');
const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
Object.defineProperty(input, 'value', {
set: function(t) {
console.log('Input value was changed programmatically');
descriptor.set.apply(this, arguments);
document.getElementById("quantity").value=t
},
get: function() {
return descriptor.get.apply(this);
}
});
var i=0;
function changeInput(){
/* console.log(document.getElementById('productName').value) */
document.getElementById("productName").value=i++;
}
<input type="text" id="productName" name="productName" placeholder="product name">
<input type="text" id="quantity" name="quantity" placeholder="quantity">
<button onclick="changeInput()">Change</button>

Since I am a beginner in Javascript, a comment by #epascarello helped me, and this was quite easy with binding the input element:
document.getElementById("productName").addEventListener("input",(event)=>{
document.getElementById("quantity").value= document.getElementById("productName").value;
})

How to change the input value when entering the new value

I have an input with placeholder="YYYY/MM", when the user click the input to enter the data, I want the year and month to dissappear, so only "/" stays.
I already try with my code, however it doesn't work, please help/
var birthdayId = "document.querySelector("#BIRTHDAY")";
if(birthdayId.maxlength < 4){
birthdayId.value = "/";
}
<input type="text" id="BIRTHDAY" name="BIRTHDAY" placeholder="YYYY/MM" maxlength="7" value="YYYY/MM">

Run your code in a focus event listener.
You should be checking the length of the value, not the maxlength property, which never changes.
You shouldn't put the call to document.querySelector in quotes.
Don't set the default value of the input to YYYY/MM, since that will prevent the length test from working. The placeholder is used to display the desired format, you don't need to do it with value as well.
var birthdayId = document.querySelector("#BIRTHDAY");
birthdayId.addEventListener("focus", function() {
if (birthdayId.value.length < 4) {
birthdayId.value = "/";
}
});
<input type="text" id="BIRTHDAY" name="BIRTHDAY" placeholder="YYYY/MM" maxlength="7" value="">

HTML FORM - Change Parts Of Readonly String Field Using onchange()

I want to assign the values - value and value 2 into the DATAID and DEPNUM when clicking the drop-down and using onchange() function in the following HTML FORM
The places that are being assigned are parts of a readonly field which contains string.
My goal is to create a readonly string which will contain the values that I've chosen from the dropdown fields, all combined in 1 string and separated by underscore.
I've been trying to use onChange method "myFunction()"
<input name="_1_1_2_1" tabindex="-1" class="valueEditable" id="myInput" onchange="myFunction()" type="text" size="32" value="...">
which will look like :
function myFunction()
{
var x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = x;
}
eventually I run it on the paragraph :
<p id="demo" value="DATAID_DOCTYPE_DEPNUM_NTA">DATAID_DOCTYPE_DEPNUM_NTA</p>
The problem is that the value at is not changing instant as i change value2 or value.

You can bind two event-listener for both two input fields and updated the readonly textfield value by below approach.
$(document).ready(function(){
$('#field1').keyup(function() {
updatedReadonlyFieldVal($(this), 0);
});
$('#field2').keyup(function() {
updatedReadonlyFieldVal($(this), 2);
});
function updatedReadonlyFieldVal(elem, index) {
let val = elem.val();
let destVal = $('#destination').val();
let splittedDestVal = destVal.split('_');
splittedDestVal[index] = val;
$('#destination').val(splittedDestVal.join('_'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="field1" name="field1">
<input type="text" id="field2" name="field2">
<input value="DATAID_DOCTYPE_DATANUM" readonly id="destination">
Please don't hesitate to let me know if you have any query.

Cannot pass input value to another input value via javascript

I wanted to pass the value of input field to another input field with its value via javascript. I wrote code as shown below.
First input:
<input type="text" class="form-control" id="recipient" name="recipientName" value="RecipientName" onkeyup="recipient()"/>
Second input:
<input type="hidden" id="recipientHidden" name="recipientName"/>
Js Code
function recipient(){
var recipientNameValue = document.getElementById('recipient').value;
document.getElementById('recipientHidden').value = recipientNameValue;
console.log(document.getElementById('recipientHidden').value);
}
When I open console, there is no value in the console. When I click on the first input field, value is printed.
How can I get it instantly ?

Your code works fine, but it will only log the value on key up. You can log the value immediately by calling the recipient() function right away:
function recipient() {
var recipientNameValue = document.getElementById('recipient').value;
document.getElementById('recipientHidden').value = recipientNameValue;
console.log(document.getElementById('recipientHidden').value);
}
// Call function straight away
recipient()
<input type="text" class="form-control" id="recipient" name="recipientName" value="RecipientName" onkeyup="recipient()" />
<input type="hidden" id="recipientHidden" name="recipientName" />

Javascript enabling input field after disable=true

html:
<label>Label1</label><br>
<input type="text" name="first" onclick="somefunc()"><br>
<label>Label2</label><br>
<input type="text" name="second"><br>
Javascript:
function somefunc() {
var second = document.getElementsByName('second')[0];
second.disable = true;
}
When I click the first input the second is disabled (that was what I want), but when I type something into the first input field, then delete it, the second is still disabled. Is there a way so I can enable it again?
I couldn't find an other event which can solve this.

You can listen to the keyup event on the first input box and check the value of first input box for enabling or disabling second input.
<label>Label1</label><br>
<input type="text" name="first" onkeyup="somefunc()"><br>
<label>Label2</label><br>
<input type="text" name="second"><br>
<script>
function somefunc() {
var first = document.getElementsByName('first')[0];
var second = document.getElementsByName('second')[0];
if(first.value){
second.disabled = true;
}else{
second.disabled = false;
}
}
</script>

Seems you have missed enabling textbox here. If you can see in previous reply, you just need to re-enable textbox into same state as it was before.