ku********@gmail.com 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....
function validate(aform) {
vaf f = aform.elements;
for(var i=0;i<f.length;i++)
if(f[i].type == 'text' && f[i].value == '')
{
alert(f[i].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.
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[i].type == 'text' && f[i].value == '')
{
alert(f[i].id+' not filled');
f[i].focus();
f[i].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>
--
Stephane Moriaux et son [moins] vieux Mac
