We Keep Coding

accessing form elements with javascript

im coding a form with dynamic textfield adding but i cant get num of the elements and their content created dynamically
here is the sample
<input name="mobiles[]" id="mobile"><a onclick="addfield()">add</a>
im using appenchild method for adding new inputs
for accessing mobiles elements i use
document.getElementsByName('mobiles[]').length;
but it returns just 1 and dont count added fields

I think the way you are appending the input fields is wrong. Check the snippet below, and try running it. Hope this helps.
addField = function(){
var wrapper = document.getElementById('wrapper');
var li = document.createElement('li');
var input = document.createElement('input');
input.name = 'mobiles[]';
li.append(input);
wrapper.append(li);
};
updateCount = function(){
// Shows you current count on the page.
count = document.getElementsByName('mobiles[]').length;
document.getElementById('count-wrapper').innerHTML = count;
};
<ul id="wrapper">
<li><input name="mobiles[]"></li>
</ul>
<button onclick="addField()">Add Input</button>
<button onclick="updateCount()">Update Count</button>
<div>
Input Field Count is : <span id="count-wrapper">1</span>
</div>

Cloning the value of a number input into a div using javascript

I want to copy the value of an input type number
<input type="nubmer" id="input" value="2" min="2">
<div id="test">
</div>
and here my Javascript code
var myInput = document.getElementById("input").value;
var myDiv = document.getElementById("test");
var Clone=myInput.cloneNode(true);
myDiv.appendChild(Clone);
But it give that cloneNode() isn't a function
How can I fix this error

I want to copy the value of an input type number
The value is a string, so cloneNode wouldn't apply.
You can either set innerHTML to entirely replace the contents of the div:
var myInput = document.getElementById("input").value;
var myDiv = document.getElementById("test");
myDiv.innerHTML = myInput; // **Replaces**
...or use appendChild with createTextNode to append it to the div:
var myInput = document.getElementById("input").value;
var myDiv = document.getElementById("test");
myDiv.appendChild(document.createTextNode(myInput)); // **Appends**

var cloneNode(true) duplicates all the attributes and its value to another object.
You are trying to cloning the value of the above element. That's not possible. cloneNode() method only works for DOM elements
var myInput = document.getElementById("input").value;
Instead, clone the DOM element and append it to div.
var myInput = document.getElementById("input");
var myInput = document.getElementById("input");
var myDiv = document.getElementById("test");
var Clone = myInput.cloneNode(true);
myDiv.appendChild(Clone);
<input type="nubmer" id="input" value="2" min="2">
<div id="test">
Hope it helps!

get next img element of an input javascript

This is my html
<td>
<input type="text" name="FullName"/>
<img/>
</td>
I'm trying to get the image element as the following way. However, it's not working-
var form = document.forms["myform"];
var fullNameTextBox = form["FullName"];
var thisImage = fullNameTextBox.nextSibling;
thisImage.style.display = 'block'; //shows uncaught type error,can not set property display of undefined.
Any help?

You've to use nextElementSibling
var form = document.forms["myform"];
var fullNameTextBox = form["FullName"];
var thisImage = fullNameTextBox.nextElementSibling;
thisImage.style.display = 'block';

.nextSibling will match textnodes (like the whitespace)
Either remove the whitespace from your html
<input type="text" name="FullName"/><img/>
or use .nextElementSibling

javascript: adding form on click

I would like to add new input form by clicking on a button.
The form that I have and I would like to add:
<input type="number" id="portdiv" name="ports" min="0" max="48" size="1"/>
The button to add the new form:
<input type="button" value="Add another" onClick="addInput('portdiv');"/>
The javascript function:
var counter = 1;
function addInput(divName){
var textbox = document.createElement('input');
textbox.type = 'number';
document.getElementById(divName).appendChild(textbox);
counter++;
}
This code do not works and I have not any errors on javascript console.
I have have tried different solution for the javascript function:
var textbox = document.createElement('input');
textbox.type = 'text';
document.getElementById(divName).appendChild(textbox);
counter++;
AND
var newFields = document.getElementById(divName).cloneNode(true);
document.getElementById(divName).appendChild(newFields);
counter++;
Nobody of them works. How can be solved?

You are trying to append an input to a input! An input does not have child elements.
You need to append it to the parent element that holds the form elements. By the name of your variable it would be some sort of div element. You can either do it by the name of the div, or use parentNode.

Add form input to array with javascript using unshift()

I am trying to add elements to an array via a form. I am using the unshift() method. The code below doesn't work and I would like to know why.
<form>
<input id="input"> </input>
<input type = "button" id="button"> Click me </input>
</form>
<script>
var input = document.getElementById("input").value;
var button = document.getElementById("button");
var myArray = [];
myArray.unshift(input);
button.onclick = function alerted (){
alert(myArray);
};
</script>

Your quoted code runs immediately when the page is loaded. The form field won't have anything in it then, so its value will be ''. When you alert that, the default toString operation on the array will result in '' and the alert will be blank.
You want to run your unshift code in response to a user event, such as the button being clicked, rather than right away. You can do that by setting input to be the element (remove .value from that line) and then moving your line with unshift into the function you're assigning to onclick, adding the .value there:
button.onclick = function alerted (){
myArray.unshift(input.value);
alert(myArray);
};
Other notes:
You never write </input>. Normally you don't close input tags at all. If you're writing XHTML (you probably aren't), you'd put the / within the main input tag like this: <input id="input" />. But again, you're probably not writing XHTML, just HTML.
The value (caption) of an input button goes in its value attribute, not content within opening and closing tags. (You would use opening and closing tags with the button element, not input.)
Taking all of that together, here's a minimalist update: Live copy | source
<form>
<input id="input"><!-- No ending tag -->
<input type = "button" id="button" value="Click me"><!-- No ending tag, move value where it should be -->
</form>
<script>
var input = document.getElementById("input"); // No .value here
var button = document.getElementById("button");
var myArray = [];
button.onclick = function alerted (){
myArray.unshift(input.value); // Moved this line, added the .value
alert(myArray);
};
</script>

DEMO
You need to a) get the value in the click and b) return false if you want the button to not submit. I changed to button. Alternative is <input type="button" value="click me" id="button" />
You may even want to empty and focus the field on click...
<form>
<input id="input" type="text"/>
<button id="button"> Click me </button>
</form>
<script>
var input = document.getElementById("input"); // save the object
var button = document.getElementById("button");
var myArray = [];
button.onclick = function alerted (){
myArray.unshift(input.value); // get the value
alert(myArray);
return false;
};
</script>​

You're not getting the new value in the onclick function.
Try this: http://jsfiddle.net/SeqWN/4/
var button = document.getElementById("button");
var i = document.getElementById("input");
var myArray = [];
button.onclick = function alerted (){
myArray.unshift(i.value);
alert(myArray);
};​