Click to See Complete Forum and Search --> : problem with setAttribute
furious70
12-17-2003, 01:24 PM
I'm not having any luck getting setAttribute to work for an element that is dynamically created. It seems to work for manipulating a statically created element.
Here's the code:
var tdText=document.createTextNode('Oracle Order Number: ');
var oracle_order_num = document.createElement('input');
oracle_order_num.setAttribute('type','text');
oracle_order_num.setAttribute('name','oracle_order_num');
oracle_order_num.setAttribute('value','');
oracle_order_num.setAttribute('size','7');
<!--- oracle_order_num.setAttribute('maxlength','7'); --->
oracle_order_num.style.maxlength = 7;
oracle_number_cell.appendChild(tdText);
oracle_number_cell.appendChild(oracle_order_num);
nothing done to oracle_order_num happens. It is appended to the table cell, but not even the name is being assigned (JS validation upon form submission fails with a 'null or not an object error for document.form1.oracle_order_num.value
Am I doing something wrong here?
Khalid Ali
12-17-2003, 05:43 PM
Take a look at the example below and see what is it thats different in what you are doing.The example below is tested on IE6+ and Mozilla1+
<script type="text/javascript">
<!--
function Process(){
var frm = document.getElementById("form1");
var len = frm.length;
var nEl = document.createElement("input");
nEl.setAttribute("type","text");
nEl.setAttribute("name","oracle_order_num");
nEl.setAttribute("value","new element");
frm.appendChild(nEl);
}
//-->
</script>
</head>
<body class="body">
<form id="form1" action="" onsubmit="">
<input type="button" value="process" onclick="Process()"/>
</form>
furious70
12-18-2003, 07:44 AM
I see that you append it to the form, rather than to the table cell. I was putting it in the table cell because I need it to show up in that spot on the page. But either way, I'm still getting the same error upon submission. I took your code, and added a validation function. This fails for me, saying that document.form1.oracle_order_num is null or not an object, just as before? I find this curious since the value and type are set, but the name, maxlength, etc, aren't. This leads me to believe I'm not accessing the object correctly, but I don't have any idea how else to access it.
<script type="text/javascript">
<!--
function Process(){
var frm = document.getElementById("form1");
var len = frm.length;
var nEl = document.createElement("input");
nEl.setAttribute("type","text");
nEl.setAttribute("name","oracle_order_num");
nEl.setAttribute("value","new ele");
nEl.setAttribute('size','7');
nEl.setAttribute('maxlength','7');
frm.appendChild(nEl);
}
function validate()
{
if (document.form1.oracle_order_num.value == "")
{
oracle_order_num_error.innerHTML = "<font color='red'>You must enter an Oracle Order Number or deselect Oracle Order</font><br>";
found_error = true;
}
else if ( !(document.form1.oracle_order_num.value.match(/^\d{7}$/)) )
{
oracle_order_num_error.innerHTML = "<font color='red'>Oracle Order Number must be 7 digits.</font><br>";
found_error = true;
}
}
//-->
</script>
</head>
<body class="body">
<span id="oracle_order_num_error"></span>
<form id="form1" action="" onsubmit="">
<input type="button" value="process" onclick="Process()"/>
<input type="button" value="validate" onclick="validate()"/>
</form>
furious70
12-29-2003, 08:25 AM
bump
furious70
12-30-2003, 07:50 AM
rebump
Pittimann
12-30-2003, 08:25 AM
Hi!
A modified form version:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function Process(){
var frm = document.getElementById("form1");
var len = frm.length;
var nEl = document.createElement("input");
nEl.setAttribute("type","text");
nEl.setAttribute("id","oracle_order_num");
nEl.setAttribute("value","new ele");
nEl.setAttribute("size",'7');
frm.appendChild(nEl);
}
function validate()
{
if (document.getElementById("oracle_order_num").value == "")
{
oracle_order_num_error.innerHTML = "<font color='red'>You must enter an Oracle Order Number or deselect Oracle Order</font><br>";
found_error = true;
}
else if (isNaN(document.getElementById("oracle_order_num").value)|| document.getElementById("oracle_order_num").value.length!=7)
{
oracle_order_num_error.innerHTML = "<font color='red'>Oracle Order Number must be 7 digits.</font><br>";
found_error = true;
}
else
{
oracle_order_num_error.innerHTML = "<font color='green'>Oracle Order Number is ok.</font><br>";
found_error = false;
}
}
//-->
</script>
</head>
<body class="body">
<span id="oracle_order_num_error"></span>
<form id="form1" action="" onsubmit="">
<input type="button" value="process" onclick="Process()"/>
<input type="button" value="validate" onclick="validate()"/>
</form>
</body>
</html>
Cheers - Pit
furious70
12-30-2003, 08:57 AM
ah ha! ID and not name! Brilliant.
One more question, the maxlength setAttribute I had doesn't work, but I do need a way to set that, to help the user know that they should only have a 7 digit number for that field