Comments on: Dynamically add form fields using javascript and DOM with dynamic post method

By: jcode

jcode — Wed, 02 Mar 2011 19:13:57 +0000

Hey I was wondering if you could help me out. I am creating a form where people can add more crates to their order by clicking the "add" button. When they click it, I would like it to return my unique_input field. Any thoughts?



    Crate
    
 


Next Crate (Width x Height x Depth):

function add(type) {
 
    //Create an input type dynamically.
    var element = document.createElement("input");
 
    //Assign different attributes to the element.
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);
	 
    var foo = document.getElementById("unique_input");
 
    //Append the element in page (in span).
    foo.appendChild(element);
 
}

By: Alexis

Alexis — Mon, 22 Nov 2010 21:43:49 +0000

Fixed it! I had the add_barcode() function called by an onChange event in the text fields. Setting it to onFocus fixed it. Thanks for the code and your help!

By: Alexis

Alexis — Mon, 22 Nov 2010 20:25:34 +0000

maybe if I escape the double and single quotes...

By: Alexis

Alexis — Mon, 22 Nov 2010 20:23:45 +0000

Yes, I tried manually keying in numbers and hitting tab and it does the same thing in Firefox and IE - skips the new field and goes to the button. Just realized that the code for the form got left out of my post above. Again, I really appreciate your help with this! Barcodes:

By: DaijoubuKun

DaijoubuKun — Sun, 21 Nov 2010 16:58:54 +0000

I have tested the code over and over again. I can not see why when your scanner would send the Tab that it wouldn’t goto the next field. I tested this under IE8 and FireFox in XP and FireFox on Linux. Every time I manually hit the Tab button it moves to the next field. Did you have this problem before adding the javascript? Have you tried just typing in some numbers and hitting Tab to see how it reacts? Perhaps the scanner isn’t sending the correct key.

By: Alexis

Alexis — Fri, 19 Nov 2010 22:24:02 +0000

Thanks for the quick reply! I’m having trouble getting it to work. I made a form to use with a barcode scanner to scan in multiple barcodes to post to my database. The scanner adds a tab after the barcode, but instead of the focus jumping to the newly added field it jumps to the Add Row button. Any help is much appreciated!

// JavaScript Document
//http://www.tangorangers.com/examples/dynadddynpost/index.php
var counter = 0;
//Start a counter. Yes, at 0
function add_barcode() {
counter++;
// I find it easier to start the incrementing of the counter here.
var newFields = document.getElementById(‘add_barcode’).cloneNode(true);
newFields.id = ”;
newFields.style.display = ‘block’;
var newField = newFields.childNodes;
for (var i=0;i var theName = newField[i].name
if (theName)
newField[i].name = theName + counter
// This will change the 'name' field by adding an auto incrementing number at the end. This is important.
}
var insertHere = document.getElementById('add_barcode');
// Inside the getElementById brackets is the name of the div class you will use.
insertHere.parentNode.insertBefore(newFields,insertHere);
document.form_addMediaLogEntry.name[theName].focus();
}

http://www.codeave.com/javascript/code.asp?u_log=7017

By: Alexis

Alexis — Mon, 15 Nov 2010 22:34:35 +0000

Hi,

This is really useful, thanks!

One question, how would I go about automatically setting the focus to the most recently added field?

By: DaijoubuKun

DaijoubuKun — Tue, 06 Apr 2010 22:44:01 +0000

As previously noted I DO NOT have a remove field script. A friend tells me he has one, he has yet to provide me the code as there are some issues he would like to resolve. As soon as I have it I will post it.

By: afwan auliyar

afwan auliyar — Tue, 06 Apr 2010 12:08:57 +0000

thanks for this tutorial …
Is there a script for “remove” this field which “add” before ?!?