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>

Copy only the first 2 characters from a formfield to other field dynamically

I have a form field with the last name and want to generate a customer ID starting with the first two characters from their last name in caps and add a random number to it. So I need the other field which dynamically updates with only the first two characters in uppercase. This is what I have so far:
HTML:
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value">
<input type="text" id="textfield2" value="">
</form>
JAVASCRIPT:
document.getElementById('textfield2').setAttribute('maxlength',2)

You can get the two first characters from your input and put them in the second with javascript :
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value.subst‌​r(0,2).toUppercase()">
<input type="text" id="textfield2" value="">
</form>
I am not sure but I think that the javascript code don't care about the attribut "maxlength". Futhermore, you need use toUpperCase in order to have your result.

<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="txt(this.value)">
<input type="text" id="textfield2" value="">
</form>
<script>
function txt(value) {
document.getElementById('textfield2').value = value.substr(0,2).toUpperCase();
}
</script>
hope it works

How to change the value of input type in html?

I have a simple html form i.e.
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top" id="registration-form">
<input type="text" class="form-control" name="form-reg-fullname" data-form-field="Name" id="form-reg-fullname">
<input type="hidden" name="return" value=""/>
</form>
in <script> tag I am doing validation and changing the value of return:
<script>
$('#registration-form').submit(function () {
var fname = $.trim($('#form-reg-fullname').val());
$("#return").val("http://localhost:9000/app/fname");
});
</script>
Validation is working successfully while submitting the form but I am getting empty value in return input type. How can I make it work?

Looks like you are missing an id on the return input, you just have a name. So it should look like this:
<input type="hidden" name="return" id="return" value=""/>
That way when you call the input in js with $('#return') it will get it by it's proper id.

<input type="hidden" name="return" value=""/>
$("#return").val("http://localhost:9000/app/fname");//PROBLEM RESIDE Here
See what are you doing you are trying to assign the value to a selector that have id = return . But you don't have any element with this id however , you have an element with the same name.You can resolve this in two ways:
First selecting the element by its name:
$("input[name='return']").val("http://localhost:9000/app/fname");
or you can assign the id attribute to your input element as
<input type="hidden" id="return" name="return" value=""/>

You are assigning the value of input with id="return" which doesn't exist.
$("#return").val("http://localhost:9000/app/fname");
You should either give an id to input tag as
<input type="hidden" name="return" id="return" value=""/>
Or change script to
$("input[name='return']").val("http://localhost:9000/app/fname");

You call node using id in jquery , your return input doesnt have the Id called return
$('#registration-form').submit(function () {
var fname = $.trim($('#form-reg-fullname').val());
$("#return").val("http://localhost:9000/app/fname"); //setting the value
console.log($("#return").val()); //getting the value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top" id="registration-form">
<input type="text" class="form-control" name="form-reg-fullname" data-form-field="Name" id="form-reg-fullname">
<input type="hidden" name="return" value="" id="return"/>
</form>

Javascript get length of an array of fields with a array keys in it

I have a simple form with an array in it:
<form id='my_form'>
<input type="text" name="my_array[1]">
<input type="text" name="my_array[5]">
<input type="text" name="my_array[6]">
<input type="text" name="non_array_field">
</form>
As you can see the array keys are specified
How can I get the lenght of this array? I can use javascript or jquery
These only works if the array doesn't have keys:
document.querySelectorAll("[name='my_array[]']").length
document.formName.elements["my_array[]"].length

Use attribute-starts with selector. To select only the elements inside form, use form selector.
[attr^=value]
Represents an element with an attribute name of attr and whose value is prefixed by "value".
document.querySelectorAll("#my_form [name^='my_array[']").length
var len = document.querySelectorAll('#my_form [name^="my_array["]').length;
console.log(len);
<form id='my_form'>
<input type="text" name="my_array[1]">
<input type="text" name="my_array[5]">
<input type="text" name="my_array[6]">
<input type="text" name="non_array_field">
</form>
Using jQuery
Docs
$("#my_form [name^='my_array[']").length
var len = $('#my_form [name^="my_array["]').length;
console.log(len);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id='my_form'>
<input type="text" name="my_array[1]">
<input type="text" name="my_array[5]">
<input type="text" name="my_array[6]">
<input type="text" name="non_array_field">
</form>

How to get an Array with jQuery, multiple <input> with the same name

I have a form where users can add input fields with jQuery.
<input type="text" id="task" name="task[]" />
After submitting the form I get an array in PHP.
I want to handle this with the $.ajax() but I have no idea how to turn my <input>s to an array in jQuery.

Using map:
var values = $("input[id='task']")
.map(function(){return $(this).val();}).get();
If you change or remove the id (which should be unique), you may also use the selector $("input[name='task\\[\\]']")
Working example: http://jsbin.com/ixeze3

For multiple elements, you should give it a class rather than id eg:
<input type="text" class="task" name="task[]" />
Now you can get those using jquery something like this:
$('.task').each(function(){
alert($(this).val());
});

Firstly, you shouldn't have multiple elements with the same ID on a page - ID should be unique.
You could just remove the id attribute and and replace it with:
<input type='text' name='task'>
and to get an array of the values of task do
var taskArray = new Array();
$("input[name=task]").each(function() {
taskArray.push($(this).val());
});

To catch the names array, i use that:
$("input[name*='task']")

You can't use same id for multiple elements in a document. Keep the ids different and name same for the elements.
<input type="text" id="task1" name="task" />
<input type="text" id="task2" name="task" />
<input type="text" id="task3" name="task" />
<input type="text" id="task4" name="task" />
<input type="text" id="task5" name="task" />
var newArray = new Array();
$("input:text[name=task]").each(function(){
newArray.push($(this));
});

HTML:
<input type="text" name="task[]" class="form-control" id="task">
JS:
var tasks= new Array();
$('input[name^="task"]').each(function()
{
tasks.push($(this).val());
});

if you want selector get the same id, use：
$("[id=task]:eq(0)").val();
$("[id=task]:eq(1)").val();
etc...

You can use jquery.serializeJSON to do this.

Q:How to access name array text field
<input type="text" id="task" name="task[]" />
Answer - Using Input name array :
$('input[name="task\\[\\]"]').eq(0).val()
$('input[name="task\\[\\]"]').eq(index).val()