html >> Javascript DOM help needed

by CyJobes » Fri, 13 Jan 2006 01:22:54 GMT

I have been trying to get this code to work and I can't figure out why it
doesn't.

I have a table that looks like this
<table width="100%" border="1" cellpadding="0" cellspacing="2"
id="linkedTable">
<tbody>
<tr><td class="content">1) </td>
<td><input type="text" name="linked_form[]" id="linked_form1"
onKeyUp="addInputField('linkedTable', 'linked_form', '1', '90')" size="90"></td>
</tr>
</tbody>
</table>

My script is like this
var fieldNum = 0;
function addInputField(tagID, fieldName, num, length) {
var newNum = 1+parseInt(num);
var funcText = "addInputField('" + tagID + "','" + fieldName + "','" +
newNum + "','" + length + "')"
alert(funcText)
if (document.getElementById(fieldName+num).value != '') {
row = document.createElement('TR');
cell = document.createElement('TD');
cell2 = document.createElement('TD');
txt = document.createTextNode(newNum + ') ');
field_input = document.createElement('INPUT');
field_input.setAttribute("type", 'text');
field_input.setAttribute("name", fieldName+"[]");
field_input.setAttribute("id", fieldName + newNum);
field_input.setAttribute("size", length);
field_input.setAttribute("onKeyUp", funcText);
field_input.setAttribute("onBlur", "cellHiliteOff()");
if (fieldNum != num) {
document.getElementById(tagID).appendChild(row);
row.appendChild(cell);
cell.appendChild(txt);
row.appendChild(cell2);
cell2.appendChild(field_input);
}
fieldNum = num;
}
}

In short it's supposed to add another row and two TD sells. One with text,
the other a form element.
The form element is a text field with the name linked_form[] (for use with
PHP), and an ID of linked_form1. The ID is incremented each time the function
is ran and a new input field is created. In other words, if there is a value
in the text field another is created so the user can use it if they want.
There is not limit to how many are created.

I had this exact script working before, but not where the javascript created
the row and cells. Instead it was all in one div tag. This time I want it in
a table to make the text in cell 1 to be even with the field in cell 2.

This all works fine in FireFox, but IE stops after creating the first new
field. From there IE does nothing and gives no errors.

Any suggestions?

Thanks in advance for the help.



Similar Threads

1. Need cross-platform DOM manipulation help (larger JS app)

2. Need help with DOM

3. need help dynamically creating forms with DOM

I'm trying to create a fairly simple form which contains a label, a
button, and a textbox.
I've done quite a bit of reading and, from what I can figure, the
following should work, but isn't.

			var rowCommentBox = document.createElement("TR");
			var cellCommentBox = document.createElement("TD");
			var frmCommentBox = document.createElement("FORM");
				frmCommentBox.setAttribute("METHOD", "POST");
				var strAction = "\"submitComments.asp?Org=\"+strOrg+\"&date=\"+activeWeekBegins\""
				frmCommentBox.setAttribute("ACTION", strAction);
			var rowFrmCommentBox = document.createElement("TR");
			var cellFrmCommentBoxLabel = document.createElement("TD");
			var strFrmCommentLabel = document.createTextNode("comment:");
			var cellFrmCommentBoxButton = document.createElement("TD");
			var btnFrmCommentBoxButton = document.createElement("INPUT");
				btnFrmCommentBoxButton.setAttribute("TYPE", "SUBMIT");
				btnFrmCommentBoxButton.setAttribute("VALUE", "UPDATE");
			var cellFrmCommentBoxTxtbx = document.createElement("TD");
			var txtbxFrmCommentBoxTxtbx = document.createElement("INPUT");
				txtbxFrmCommentBoxTxtbx.setAttribute("TYPE", "TEXT");
				txtbxFrmCommentBoxTxtbx.setAttribute("cols", "50");
				txtbxFrmCommentBoxTxtbx.setAttribute("VALUE", strComments);	
		
			cellFrmCommentBoxLabel.appendChild(strFrmCommentLabel);
			rowFrmCommentBox.appendChild(cellFrmCommentBoxLabel);
			cellFrmCommentBoxButton.appendChild(btnFrmCommentBoxButton);
			rowFrmCommentBox.appendChild(cellFrmCommentBoxButton);
			cellFrmCommentBoxTxtbx.appendChild(txtbxFrmCommentBoxTxtbx);
			rowFrmCommentBox.appendChild(cellFrmCommentBoxTxtbx);
			frmCommentBox.appendChild(rowFrmCommentBox);
			rowCommentBox.appendChild(frmCommentBox);
			tbodyOrgToAdd.appendChild(rowCommentBox);

help would be greatly appreciated.

4. Need a little help with JS and DOM

5. Need a javascript guru (I need help!)

Ok, I wrote my own weblog and I'm working on the web interface for
adding/editing my posts. I decided to add a little preview button...when
the button is clicked it is suppose to open a pop-up window. I wrote the
whole preview function in javascript so that I don't have to reload the
page to see a preview.

Here is the code I wrote that doesn't work at all: 

Code:

function generate_preview() {
    var newWin =
    window.open('/weblog/pop_up.html','Preview','width=650,height=400');

    var previewText = document.forms[0].logtext.value; var previewTitle =
    document.forms[0].title.value; var previewIcon = document.preview.src;

    var insertPoint_Text = newWin.document.getElementById('pre'); var
    content_Text = newWin.document.createTextNode(previewText);
    insertPoint_Text.appendChild(content_Text);

    var insertPoint_Title = newWin.document.getElementById('title'); var
    content_Title = newWin.document.createTextNode(previewTitle);
    insertPoint_Title.appendChild(content_Title);

    var insertPoint_Icon = newWin.document.getElementById('icon');
    insertPoint_Icon.src = previewIcon;
}



And here is the code that works flawlessly to generate the preview: 

Code:

function generate_preview() {
    var newWin =
    window.open('/weblog/pop_up.html','Preview','width=650,height=400');
    newWin2=window.open();        
    newWin2.close();   

    var previewText = document.forms[0].logtext.value; var previewTitle =
    document.forms[0].title.value; var previewIcon = document.preview.src;

    var insertPoint_Text = newWin.document.getElementById('pre'); var
    content_Text = newWin.document.createTextNode(previewText);
    insertPoint_Text.appendChild(content_Text);

    var insertPoint_Title = newWin.document.getElementById('title'); var
    content_Title = newWin.document.createTextNode(previewTitle);
    insertPoint_Title.appendChild(content_Title);

    var insertPoint_Icon = newWin.document.getElementById('icon');
    insertPoint_Icon.src = previewIcon;
}



It absolutely will not work unless I add these two lines: 

Code:

newWin2=window.open();
newWin2.close();


It's really weird and I don't know how to fix the problem without opening
another window other than the one that I'm generating the preview in. I'm
not a programmer and I'm not that great with javascript, so if a
javascript guru could point me in the right direction I would really
appreciate it.

6. javascript + vml - help w/ getAttribute on vml node attached to DOM

7. Help! Javascript DOM problem

I hope someone can help me fix this - I just can't understand why it is not
working:

I have this frameset:

<frameset rows="89,*,50" cols="*" framespacing="0" frameborder="NO"
border="0">

  <frame src="Navigation/Navigation.htm" name="topFrame" scrolling="NO"
noresize>
  <frame src="Homepage/Homepage.htm" name="mainFrame" scrolling="NO"
noresize>
  <frame src="HotNews/Hotnews.htm" name="bottomFrame" scrolling="NO"
noresize>

</frameset>


mainFrame contains an image that I want to flip and an IFrame.
In the IFrame, there are buttons that, when clicked, should change the image
I just mentioned, which is in the mainFrame.

When the button in the IFrame is clicked, it runs a function containing this
line of code:

mainFrame.document.flipForm.flip.src=ImageButtonName;

which should work, because I know it does when I try it from a button within
mainFrame (obviously, dropping the the mainFrame. part).

For some annoying reason, the when the button in the IFrame is clicked it
does not swap the image in the mainFrame.  Help!! 


8. help newbie with DOM/Javascript Q please!