DOM help

F

funkychicken818

hi i have recently created a JavaScript DOM script and well for some
reason i t does not work.
can you help me find the problem?

here is the script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<div id="New_Input">
</div>
<input type="button" value="ADD" onclick="addfield();" />
</form>
<script language="javascript" type="text/javascript">

function addfield () {
// if this a non-DOM browser, bail out
if (document.getElementById) { return }

//Get the Input placeholder (<div id="New_Input">)
var Input_div = document.getElementById("New_Input");

//Create and add the Input to the form element
Input = document.write("<input type='text' value=''/>");
Input_div.appendChild(Input);
}
</script>
</body>
</html>
 
I

Ian Collins

hi i have recently created a JavaScript DOM script and well for some
reason i t does not work.
can you help me find the problem?
Click to expand...
You should say what you expect to happen, and what you see.
<script language="javascript" type="text/javascript">
Click to expand...
Don't include language="javascript"
function addfield () {
// if this a non-DOM browser, bail out
if (document.getElementById) { return }

//Get the Input placeholder (<div id="New_Input">)
var Input_div = document.getElementById("New_Input");

//Create and add the Input to the form element
Input = document.write("<input type='text' value=''/>");
Click to expand...

Why do you do this rather than use the DOM method createElement to
create the new element?
 
F

funkychicken818

thanks, well i tried both and they didn't work, but well would it make
a difference?
and why should i not add the language="javascript"?
oh and how can i delete a Element
 
F

funkychicken818

thanks, well i tried both and they didn't work, but well would it make
a difference?
and why should i not add the language="javascript"?
oh and how can i delete a Element?
 
I

Ian Collins

thanks, well i tried both and they didn't work, but well would it make
a difference?
Click to expand...

Please quote context and attributions in you reply, not everyone uses
google.

You have't explained "didn't work".
and why should i not add the language="javascript"?
Click to expand...

language="javascript" is deprecated, type="text/javascript" is all that
is required.
oh and how can i delete a Element?
Click to expand...
Use removeChild.
 
F

funkychicken818

Ian said:
Please quote context and attributions in you reply, not everyone uses
google.

You have't explained "didn't work".


language="javascript" is deprecated, type="text/javascript" is all that
is required.

Use removeChild.
Click to expand...

well it still does not work

here is the update

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<div id="New_Input">
</div>
<input type="button" value="ADD" onclick="addfield();" />
</form>
<script type="text/javascript">

function addfield () {
// if this a non-DOM browser, bail out
if (document.getElementById) { return }

//Get the Input placeholder (<div id="New_Input">)
var Input_div = document.getElementById("New_Input");

//Create and add the Input to the form element
Input = document.createElement("input");
Input_div.appendChild(Input);
}
</script>
 
R

RobG

(e-mail address removed) said on 24/04/2006 3:15 PM AEST:

Please quote what you are replying too, trim what you aren't.
thanks, well i tried both and they didn't work, but well would it make
a difference?
Click to expand...

Did both what? What did you try? What did you expect to happen and
what actually happened? Would what make a difference?

and why should i not add the language="javascript"?
Click to expand...

Because the language attribute has been deprecated for many years.
oh and how can i delete a Element
Click to expand...

If 'elementRef' is a reference to an element, then:

elementRef.parentNode.removeChild(elementRef);


does the trick for me. :)

In reply to your OP:
function addfield () {
// if this a non-DOM browser, bail out
if (document.getElementById) { return }
Click to expand...

That has quite the reverse effect to the comment - any browser that
supports the getElementById() method will execute the return statement.

You should not presume that a browser that supports a particular method
supports any other particular method. Test the features you use, in
this case it may be appropriate to do:

if ( !document.getElementById || !document.createElement ){
// return or do something else
}

//Get the Input placeholder (<div id="New_Input">)
var Input_div = document.getElementById("New_Input");
Click to expand...

One way to test for support for a method and that using it returned
something useful is to test it:

var inputDiv, oInput;
if ( document.getElementById
&& (inputDiv = document.getElementById("New_Input"))
&& document.createElement
&& (oInput = document.createElement('input')))
{
inputDiv.appendChild(input);
}

Now if either of the methods is not supported or the result of calling
them returns 'undefined' they will not cause an error.

For the sake of efficiency you may wish to restructure that so you test
for the required features once only when the page loads and configure
your functions accordingly.


Back to your code...
//Create and add the Input to the form element
Input = document.write("<input type='text' value=''/>");
Click to expand...

That method of creating elements was invented by IE and is not well
supported by other browsers (if at all). It is used because IE has
issues with setting the value of the name attribute for dynamically
created (or cloned) elements. If you are only creating form controls
and don't require multiple elements with the same name, just use an ID
attribute instead.

You may wish to read this thread:

<URL:http://groups.google.co.uk/group/co...+name+dynamic+element&rnum=2#552cbda3521fab6e

As Matt Kruse reports, the name attribute appears to be set and the
control (if successful) is submitted with the form, but you can't access
the control by name and if you look at the innerHTML property of the
form, the added input has no name attribute.

A simple test case:

<script type="text/javascript">

function addOne(form){
var x = document.createElement('input');
x.name = 'foo';
x.value = 'bar';
form.appendChild(x);
}

</script>

<form action="">
<input type="button" value="Add input"
onclick="addOne(this.form)">
<input type="submit"><br>
<input type="button" value="Show form innerHTML"
onclick="alert(this.form.innerHTML);"><br>
</form>
 

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

Javascript DOM 1
How do I hide the modal after 5 seconds? 4
Help with code 0
How do I fix this issue in sqaurespace code block? 1
Help me sort out this script 1
Help with Visual Lightbox: Scripts 2
Please Help? 0
Help with my responsive home page 2

Members online

No members online now.
Total: 79 (members: 0, guests: 79)
Robots: 415

Forum statistics

Threads
473,995
Messages
2,570,236
Members
46,822
Latest member
israfaceZa

Latest Threads

Top