dynamic building HTML elements problem

K

kusanagihk

To all,

I'm working on a javascript to dynamic build a common set of HTML
controls.
01) I've used the DOM object to build a <div> tag; then build 1 <input
type='button'/> and 1 <input type='text'> object
02) by using appendChild () method, I've successfully append the button
and the textbox under the div tag (or container in this case)
03) but now I would like to add the javascript onclick event on the
button I've just created...

Problem:
I've managed to add the required Javascript function by this syntax:
aButton.onclick=onclickHandler;
but I can't figure out how to pass in the parameters to the
function!!!! For example I need to pass in a string to identify the
required data format for validation in the onclickHandler function....

I urgently need a work around or the actual way to pass in parameters
to the function dynamically.

Thx!
 
A

ASM

(e-mail address removed) a écrit :
To all,

I'm working on a javascript to dynamic build a common set of HTML
controls.
01) I've used the DOM object to build a <div> tag; then build 1 <input
type='button'/> and 1 <input type='text'> object
02) by using appendChild () method, I've successfully append the button
and the textbox under the div tag (or container in this case)
03) but now I would like to add the javascript onclick event on the
button I've just created...

Problem:
I've managed to add the required Javascript function by this syntax:
aButton.onclick=onclickHandler;
but I can't figure out how to pass in the parameters to the
function!!!! For example I need to pass in a string to identify the
required data format for validation in the onclickHandler function....
Click to expand...

function validate(aform) {
vaf f = aform.elements;
for(var i=0;i<f.length;i++)
if(f.type == 'text' && f.value == '')
{
alert(f.id+' not filled');
return false;
}
return true;
}

<form onsubmit="return validate(this);"

and you have not to worry about your new inputs in your form

I urgently need a work around or the actual way to pass in parameters
to the function dynamically.
Click to expand...

Exercise :

<html>
<script type="text/javascript">
function newElemts() {
var ix = 0;
var foo = document.createElement('DIV');
foo.id = 'myFoo';
var newput = document.createElement('INPUT');
newput.id = 'put_'+ix;
newput.type = 'text';
foo.appendChild(newput);
ix++;
var newput = document.createElement('INPUT');
newput.id = 'put_'+ix;
newput.type = 'button';
newput.value = 'to see';
foo.appendChild(newput);
document.body.appendChild(foo);
}
function addClick(what) {
document.getElementById(what).onclick = function() {
alert('my type is : '+this.type);
}
}
function newClick(what) {
$ = function(x) { return document.getElementById(x); }
$(what).onclick = function() {
alert('text field content is :\n'+$('put_0').value);
}
}
</script>
<ol>
<li><a href="#" onclick="newElemts();return false;">new elemts</a>
<li><a href="#" onclick="addClick('put_1');return false;">new event on
button</a>
<li><a href="#" onclick="newClick('put_1');return false;">modify event
on button</a>
</ol>
<html>


Demo :

<html>
<script type="text/javascript">
function validate(aform) {
var f = aform.elements;
for(var i=0;i<f.length;i++)
if(f.type == 'text' && f.value == '')
{
alert(f.id+' not filled');
f.focus();
f.select();
return false;
}
return true;
}
function newElemts(nber,where) {
where = document.forms[where];
var ix = 0;
while(ix<nber) {
var newput = document.createElement('INPUT');
newput.id = 'put_'+ix;
newput.type = 'text';
where.appendChild(newput);
ix++;
}
}
</script>
<form name="myform" action="javascript:alert('ok')"
onsubmit="return validate(this);">
<ol>
<li><a href="#"
onclick="newElemts(3,'myform');return false;">new elemts</a>
<li><input type=submit value="send">
</ol>
</form>
<html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Getting extra blank rows from appending HTML..? 2
I am trying to make an audio player, how do I get the selected file to be playable? 5
I want to Display Excel As HTML In js 2
Problem in getting dashboard page from login page in python pycharm using POST command 0
Jquery not triggering / acting as expected. 0
External html 2
Mandatory Elements To Conduct JavaScript Form Manipulation 7
Page do not work, when adding php code 1

Members online

No members online now.
Total: 36 (members: 1, guests: 35)
Robots: 200

Forum statistics

Threads
473,764
Messages
2,569,564
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top