/    Sign up×
Community /Pin to ProfileBookmark

problem with setAttribute

Copy linkTweet thisAlerts:
Dec 17.2003

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:

[code=php]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);[/code]

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?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Khalid_AliDec 17.2003 — 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>
Copy linkTweet thisAlerts:
@furious70authorDec 18.2003 — 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.

[code=php]<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>[/code]
Copy linkTweet thisAlerts:
@furious70authorDec 30.2003 — rebump
Copy linkTweet thisAlerts:
@PittimannDec 30.2003 — Hi!

A modified form version:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled&lt;/title&gt;
&lt;script language="JavaScript" type="text/javascript"&gt;
&lt;!--
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 = "&lt;font color='red'&gt;You must enter an Oracle Order Number or deselect Oracle Order&lt;/font&gt;&lt;br&gt;";
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 = "&lt;font color='red'&gt;Oracle Order Number must be 7 digits.&lt;/font&gt;&lt;br&gt;";
found_error = true;
}
else
{
oracle_order_num_error.innerHTML = "&lt;font color='green'&gt;Oracle Order Number is ok.&lt;/font&gt;&lt;br&gt;";
found_error = false;
}
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body class="body"&gt;
&lt;span id="oracle_order_num_error"&gt;&lt;/span&gt;
&lt;form id="form1" action="" onsubmit=""&gt;
&lt;input type="button" value="process" onclick="Process()"/&gt;
&lt;input type="button" value="validate" onclick="validate()"/&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Cheers - Pit
Copy linkTweet thisAlerts:
@furious70authorDec 30.2003 — 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
×

Success!

Help @furious70 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.22,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...