Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > javascript: adding form elements

Reply
Thread Tools

javascript: adding form elements

 
 
domas
Guest
Posts: n/a
 
      12-14-2005
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

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      12-14-2005
domas wrote:
> 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');
}



--
Rob
 
Reply With Quote
 
 
 
 
domas
Guest
Posts: n/a
 
      12-14-2005
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

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      12-14-2005
domas wrote:
> 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>



--
Rob
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-14-2005
RobG wrote:

> domas wrote:
>> 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);


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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
adding onChange after form elements are created... Mel Javascript 1 04-03-2007 04:34 PM
adding a javascript attribute to all text form elements on an asp.net page Ken Fine ASP .Net 2 09-25-2006 07:39 PM
newb: recurse over elements children and disable all form elements SteveKlett@gmail.com Javascript 4 09-20-2006 07:42 AM
Adding Form elements dbmeyers23@yahoo.com Perl Misc 8 02-14-2005 06:13 PM
File uploading from a form with textbox form elements Andy Johns ASP .Net 2 03-02-2004 06:21 AM



Advertisments