javascript: adding form elements

[domas]

Hi,
I can't get my semi-dynamic form to work. Maybe you could help.

I've got a simple form with a select box. And a button that, when
clicked, creates another copy if the select box and places it in a
specified div.

<select name="tst[]" id="tst">
<option value=1>1</option>
<option value=2>6</option>
</select>
<input type="button" value="Add"
onclick="createNew(document.getElementById('tst'),
document.getElementById('pasl'));">

here's the script:
function createNew(sel, div) {
spNew = document.createElement("span");
selNew = sel.cloneNode(true);
spNew.appendChild(selNew);

spNew.innerHTML = spNew.innerHTML + "<input type=\"button\"
value=\"Drop\"
onclick=\"alert(\'ok\');\" id=\"btn\" >";

sp = div.appendChild(spNew);
};

It works ok in IE, but under firefox, the value of the new select is
not submitted. The div that I add the select to is a child of the form,
so this should work, right? What could I have missed?

Another question would be: what is the correct way to specify the event
for a dinamically created button?

Thanks in advance,
Domas

 

[RobG]

Hi,
I can't get my semi-dynamic form to work. Maybe you could help.

I've got a simple form with a select box. And a button that, when
clicked, creates another copy if the select box and places it in a
specified div.

<select name="tst[]" id="tst">
<option value=1>1</option>
<option value=2>6</option>
</select>
<input type="button" value="Add"
onclick="createNew(document.getElementById('tst'),
document.getElementById('pasl'));">

here's the script:
function createNew(sel, div) {
spNew = document.createElement("span");

You should test for support for such features before using them. There
does not seem to be any reason to make spNew (or selNew) global, so keep
them local with the 'var' keyword:

var spNew = document.createElement("span");
var seNew = ...

selNew = sel.cloneNode(true);

You now have two selects with the same ID, which will create invalid
markup as soon as you add the second one to the document. The identical
names may be an issue too (or not).

selNew.id = 'someNewId';

spNew.appendChild(selNew);

spNew.innerHTML = spNew.innerHTML + "<input type=\"button\"
value=\"Drop\"
onclick=\"alert(\'ok\');\" id=\"btn\" >";

Not a good idea to mix non-standard innerHTML and DOM, particularly when
adding onclick attributes:

var inpNew = document.createElement('input');
inpNew.type = 'button';
inp.onclick = function (){alert('OK')}
ip.id = 'btn';
spNew.appendChild(inp);

sp = div.appendChild(spNew);

Here you create another global variable 'sp' that is a reference to the
newly added node (i.e. spNew). If it isn't used for anything, then:

div.appendChild(spNew);


will do the job.

};

It works ok in IE, but under firefox, the value of the new select is
not submitted. The div that I add the select to is a child of the form,
so this should work, right? What could I have missed?

Another question would be: what is the correct way to specify the event
for a dinamically created button?

I guess you mean add an event - you can use the method above, or use
addEventListener/attachEvent, the above is simpler and usually sufficient.

You can also do something like:


function createNew(...) {

...
inp.onclick = sayHi;
...

}

function sayHi(){
alert('OK');
}

 

[domas]

thanks. But it didn't help. I just tried a small experiment: I added a
simple text input box to the div and its value does not get submitted
either.
It seems that I need to somhow attach the dynamically created input to
the form.

Thanks,
Domas

 

[RobG]

thanks. But it didn't help. I just tried a small experiment: I added a
simple text input box to the div and its value does not get submitted
either.
It seems that I need to somhow attach the dynamically created input to
the form.

Here's a quick 'n dirty example, it will only add one input properly but
shows the basics.

You need to specify unique IDs for each new element, plus the reference
to the node to clone is by name so you need to create new names too
(note that if you have multiple controls with the same name,
form.controlName will return a collection not a single element):


<script type="text/javascript">

function addInput(el){
if (!document.createElement) {
alert('Sorry, my script doesn\'t support creating new elements'
+ ' for your browser');
return;
}

var d = el.parentNode; // d is now a reference to 'divA'
var newInput = el.cloneNode(false);
newInput.value = '';

// Make sure unique IDs are specified for all elements
newInput.id = 'textB';
newInput.name = 'textB';
d.appendChild(newInput);

var newBut = document.createElement('input');
newBut.type = 'button';
newBut.value = 'Say blah';
newBut.onclick = function(){alert('blah')}
d.appendChild(newBut);
}

</script>

<form action="">
<div id="divA">
<input type="text" name="textA" id="textA">
<input type="button" value="Add input"
onclick="addInput(this.form.textA)"><br>
</div>
<div>
<input type="submit">
</div>
</form>

 

[Thomas 'PointedEars' Lahn]

Not a good idea to mix non-standard innerHTML and DOM, particularly when
adding onclick attributes:

var inpNew = document.createElement('input');
inpNew.type = 'button';
inp.onclick = function (){alert('OK')}
ip.id = 'btn';
spNew.appendChild(inp);

While I strongly agree with you about that (and the rest of your posting),
it has to be clarified that

1. The term "DOM" is not and has never been restricted to "W3C DOM":
`innerHTML' is a part of proprietary DOMs. Therefore the statement
"Do not mix non-standard innerHTML and DOM." is nonsense

2. Assigning a Function object reference to `inp.onclick' is not more or
less standard than `innerHTML' is. The HTMLInputElement interface does
not have an `onclick' attribute in W3C DOM Level 2 HTML and W3C DOM
Level 2 Events does not specify that attribute either. If you would
want to be strictly standards compliant, you would have to write

inp.addEventListener('click', functionObjectReference, false);

but then you would run into problems with IE, for example.


Regards,
PointedEars