Develop Reference

Display value in input in html

I have the following code for html:
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="ouput_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup',function(){
output_01.value = input_01.value
})
</script>
I want to display the input value as the output. However, I found that the command "output_01.value = input_01.value" doesn't work and there is nothing displayed. I do not know why and do not know how to solve this problem. How can I display the content of an input in 'ouput_01'? Thank you.

make sure you don't have typo in your code.
change from
<input type="text" name="" id="ouput_01">
to
<input type="text" name="" id="output_01">

your INPUT tag output ID does not match the one on your javascript DOM and this output_01.value = input_01.value is wrong, instead you should add event to your function parameter in your Event Listener then assign your event.target.value to your output DOM value
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="output_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup', function(event) {
output_01.value = event.target.value
})
</script>

Subtract 1 day from date input box and submit using button

I'm trying to collect 2 dates using input boxes ids From and To. I would like to subtract 1 day from the date value received using "FROM" text box and pass that new value to the button click event.
The code below works to push values received from the input box. However, i wish to subtract 1 day and pass on the same.
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
From : <input type="date" class="form-control" id="From" placeholder="From" aria-label="From">
To : <input type="date" class="form-control" id="To" placeholder="To" aria-label="To">
<input type="button" onclick="location.href='#SITE#/TDL-Test-code.aspx?FromTo=(Date ge datetime%27'+FD+'T00:00:00.000Z%27) and (Date le datetime%27'+ document.getElementById('To').value+'T23:59:00.000Z%27)';" value="Submit" />
Edit:
Following is my moment JS function
var oldfrom = document.getElementById('From').value;
newdate = moment(oldfrom).subtract(1, 'days').format("YYYY-MM-DD");
var FD = newdate;

Issue was fixed with solution below.
document.getElementById("From_Local").oninput = function() {
var dateLocal = document.getElementById("From_Local").value;
var dateUTC = moment.utc(dateLocal).subtract(4, 'hours').format("YYYY-MM-DD");
document.getElementById("From_UTC").value = dateUTC;
}
From:<input name="From" required type="date" id="From_Local">
<input type="hidden" id="From_UTC">
To:<input name="To" required type="date" id="To">
<input type="button" onclick="location.href='SITE_URL?FromTo=(Date%20ge%20datetime%27'+ document.getElementById('From_UTC').value+'T00:00:00.000Z%27)%20and%20(Date%20le%20datetime%27'+ document.getElementById('To').value+'T00:00:00.000Z%27)';" value="Submit" />

Assign a number to every user input

My problem is the following I have a checkbox and two text input where the user has to enter their order and for every order I want to asign a number but I do not know how to do so using javascript and HTML. I tried adding one everytime the order button is clicked but it did not seem to work
<form>
<input type="text" placeholder="condiments" id="condiments">
<input type="text" placeholder="name" id="name">
<label for="bigger">Make theese bigger:</label>
<select id="bigger"></select>
</form>
var order = 0;
document.getElementById("orders").addEventListener("click", numOrder);
function numOrder() {
var setOrder= document.getElementById("orders");
setOrder.value = order;
order++;
}

<input type="text" placeholder="condiments" id="condiments">
<input type="text" placeholder="name" id="name">
<label for="bigger">Make theese bigger:</label>
<select id="bigger"></select>
<button id="orders">Place Order</button>
var order= 0;
document.getElementById("orders").addEventListener("click", numOrder);
function numOrder() {
var setOrder = document.getElementById("orders");
setOrder.value = order;
order++;
}
Note that setOrder.value is stored as a string. Should you need to convert to number, use parseInt(setOrder.value).

HTML form:input calculate 2 fields

I'm using spring mvc for my form which has the tag
<form:input type="number" class="value1" id="value1" path="commandName.object.field1" />
<form:input type="number" class="value1" id="value1" path="commandName.object.field2" />
<input type="text" disabled="disabled" id="result" />
I read some questions in regards to calculations and even found a js fiddle:
http://jsfiddle.net/g7zz6/1125/
how do i calculate 2 input fields and put results in 3rd input field
but it doesn't work when the input tag is form:input. Is it possible to do auto calculation of the 2 form:input fields upon keyin and update the 3rd input?

Here you go
HTML
<input type="text" class="input value1">
<input type="text" class="input value2 ">
<input type="text" disabled="disabled" id="result">
JS
$(document).ready(function(){
$('input[type="text"]').keyup(function () {
var val1 = parseInt($('.value1').val());
var val2 = parseInt($('.value2').val());
var sum = val1+val2;
$("input#result").val(sum);
});
});
Fiddle https://jsfiddle.net/1sbvfzcc/

$(document).ready(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
$('.input').blur(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input value1" value="20">
<input type="text" class="input value2" value="30">
<input type="text" disabled="disabled" id="result">
Please check the code this might help you understand why your code is not working.
You are using document ready function which is not able to get the value as no default value for input box.
I have added a new blur function which will calculate the value on change of input box

Try this your form tag syntax was wrong
$('form').on('keyup' ,'.value1', function(){
var k=0;
$('.value1').each(function(){
k +=parseFloat($(this).val()|0);
})
$('input:text').val(k)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field1" />
</form>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field2" />
</form>
<input type="text" disabled="disabled" id="result" />

Create dynamic name of newly appended child

I have the following form inputs in a particular td tag.
<input type="text" value="" name="form_data[1][1][text]"><br>
<input type="text" value="" name="form_data[1][2][text]"><br>
<input type="text" value="" name="form_data[1][3][text]"><br>
Also I have the code for appending new form. But i need to change its name like this form_data[1][4][text] that is array name with next index for text should come.
i.e.
<input type="text" value="" name="form_data[1][4][text]"><br>

Add a class to your input, get the number of elements with this class:
var nbElt = document.getElementsByClassName('yourclass').length;
var newInp = document.createElement('input');
newInp.name = "form_data[1]["+parseInt(nbElt+1)+"][text]";
document.body.appendChild(newImp);
And it's done.