...

View Full Version : Trying to add Html code dynamically to a web form



cesark
07-15-2004, 10:12 AM
Hi!

I am trying to add Html code dynamically to my web form with a js function, but I can’t. I want to add a new row with columns and form objects, and I am trying to do it thus:

The js function:


function check_Prod() {

var prod = document.form_newProd.product.value

switch(prod) {

case "22":
var otherProd = document.getElementById('others');
otherProd.innerHTML = "<tr><td height='30' colspan='2' align='center'></td><td colspan='4'><span id='otherP' class='letter4'><span id='ast' class='RedAst'>*</span>&nbsp;Specify the Product:</span>&nbsp; <input type='text' name='writeProd' class='letter1'></td></tr>";
break;

case "27":
var otherProd = document.getElementById('others');
otherProd.innerHTML = "<tr><td height='30' colspan='2' align='center'></td><td colspan='4'><span id='otherP' class='letter4'><span id='ast' class='RedAst'>*</span>&nbsp;Specify the Product:</span>&nbsp; <input type='text' name='writeProd' class='letter1'></td></tr>";
break;

...

default:
var otherProd = document.getElementById('others');
otherProd.innerHTML = "";

}

}



The ‘product’ select object:


<select name="product" onChange="return check_Prod()"></select>


And inside the page body:


...
<td><input type=”text” name="type"></td>
</tr>

<span id="others"></span>

<tr>
<td height="30" align="left" valign="middle" class="letter4"><span class="redAst">*</span>&nbsp;Offer Title:&nbsp;</td>

...


None error appears, but the Html code is not added, simply nothing happens..
What is wrong?

Thank you

Kor
07-15-2004, 12:20 PM
check if options' values exist (I presume you have only text in options)

If not, you may use

var prod = document.form_newProd.product.options[document.form_newProd.product.selectedIndex].text

instead of

document.form_newProd.product.value

cesark
07-15-2004, 12:47 PM
No, I have text and values in 'product' select.

I have seen that if I put in the body:


...
<td><input type=”text” name="type"></td>
</tr>

<tr>
<td><span id="others"></span></td>
</tr>

<tr>
<td height="30" align="left" valign="middle" class="letter4"><span class="redAst">*</span>&nbsp;Offer Title:&nbsp;</td>

...


Instead of:


...
<td><input type=”text” name="type"></td>
</tr>

<span id="others"></span>

<tr>
<td height="30" align="left" valign="middle" class="letter4"><span class="redAst">*</span>&nbsp;Offer Title:&nbsp;</td>

...


Then the Html appears in the form, but I don' t want to add previously a row with columns to my web form...

glenngv
07-15-2004, 01:34 PM
You can only add table rows dynamically in the "invisible" <tbody> tag.

This is the actual structure of a table.

<table>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>

If you don't put <tbody> tag, the browser adds it internally.

But to add row in between existing rows, you need to use DOM, you won't be able to do it via innerHTML unless you append it at the end of the rows.

cesark
07-15-2004, 03:03 PM
Then, to expand an existing table with a new row (with form elements) dynamically, I need to use DOM?
If so, if I use DOM, almost all the web browsers will be able to support this functionality?

For example:


...
case "22":
var otherProd = document.getElementById('others');
otherProd.createElement("<tr><td height='30' colspan='2' align='center'></td><td colspan='4'><span id='otherP' class='letter4'><span id='ast' class='RedAst'>*</span>&nbsp;Specify the Product:</span>&nbsp; <input type='text' name='writeProd' class='letter1'></td></tr>");
break;
...

But this code doesn' t work.. :confused:

Choopernickel
07-15-2004, 03:34 PM
The document.createElement() method only creates one element at a time; you've also got the wrong syntax for browsers other than IE. As far as I know, all modern browsers (Mozilla 1+, IE 6+, Opera) support the three methods you'll need: document.createElement(), document.createTextNode(), and {element}.appendChild().

Use the document.createElement({tagName}) method to create any element you need, in the order they should appear in the document; when each element is configured completely (including all of its children), add it to its containing element. You can append text nodes at the same time you create them, like this: {element}.appendChild(document.createTextNode('text to use')). Note: DOM operations are faster on elements which exist outside the page structure at least temporarily. Here's a good order of execution for you:
- Create the row
- Create the first cell
- Configure the first cell
- Create then configure its children, outermost to innermost
- Append the children to their parents, innermost to outermost
- Append the first cell to the row
- Create the second cell
- Create then configure its children, outermost to innermost
- Append the children to their parents, innermost to outermost
- Append the second cell to the row
(Repeat for more cells)
- Append the row to its tbody

I'd recommend that you begin using the tbody tag; it can be used more than once in any table, giving a good way to group rows for reference and scripting. Where you need to insert a row between other rows, you can separate the two by placing them in separate tbody tags, then appendChild() onto the first of the two tbody elements.

Now you'll find in IE that certain attributes of certain elements cannot be configured after creation. This includes input type, name, and ID; table-cell colspan and rowspan; and certain others. In those cases where you need an input or a td with a colspan, you should write a wrapper that sniffs (shudder)for IE and uses its proprietary method, which resembles what you've got below: document.createElement('<tag attribute="value"></tag>') -- but remember, only one element at a time can be created.


Does it show that I've been working with this myself recently?

cesark
07-15-2004, 04:28 PM
That's interesting.. but it is very complex..

Try to help me, please, in my case I have put:


...
case "22":
var tr = document.createElement("<tr>")
tr = document.createElement("<td height='30' colspan='2' align='center'></td>")
tr =

' What else..?

Choopernickel
07-15-2004, 07:01 PM
That's interesting.. but it is very complex..
Yes, of course it is. Can you imagine a web form doing this in 1997?



case "22":
var tr = document.createElement('tr')
var td;
if (typeof document.all == 'undefined') { // NOT IE
td = document.createElement(td);
td.colspan = 2;
td.style.textAlign = 'center';
td.style.height = '30px';
} else { // IE
td = document.createElement('<td height="30" colspan="2" align="center"></td>');
}
var span = document.createElement(span);
span.id = 'spanID';
td.appendChild(span);
// finish the cell here
tr.appendChild(td);
// repeat for new cells
// at end use this line - someTBody is ...some tbody element
someTBody.appendChild(tr);

You were using the same variable for both the row and the cell; thus you were overwriting the row with the cell. Each element must have a unique variable, unless it's already been added to the document and need not be referenced again; in that case, feel free to reuse the variable.

Does that help?

cesark
07-15-2004, 11:27 PM
Thank you Choopernickel !, yes it helps a lot.

I have tried to write the complete added row.. I am sure that there are a lot of mistakes, but here is the first attempt:


function check_Prod() {

var prod = document.form_newProd.product.value

switch(prod) {

case "22":

var tbody = document.createElement('tbody');
var tr = document.createElement('tr')
var td1;
if (typeof document.all == 'undefined') { // NOT IE
td1 = document.createElement('td');
td1.colspan = 2;
td1.style.textAlign = 'center';
td1.style.height = '30px';
} else { // IE
td1 = document.createElement('<td height="30" colspan="2" align="center"></td>');
}
var span = document.getElementById('others');
td1.appendChild(span);
// finish the cell here
tr.appendChild(td1);
tbody.appendChild(span);



// The second td
var td2;
if (typeof document.all == 'undefined') { // NOT IE
td2 = document.createElement('td');
td2.colspan = 4;

} else { // IE
td2 = document.createElement('<td colspan="4"></td>');
}

td2.appendChild(span);
// finish the second cell here
tr.appendChild(td2);




// The first span element into the second td created above
var span1;
if (typeof document.all == 'undefined') { // NOT IE
span1 = document.createElement('span');
span1.id = 'otherP';
span1.setAttribute('class','letter4');
} else { // IE
span1 = document.createElement('<span id="otherP" class="letter4"></span>');
}

span1.appendChild(span);
// finish the first span here
span1.appendChild(td2);






// The second span element into the span1 created above
var span2;
if (typeof document.all == 'undefined') { // NOT IE
span2 = document.createElement('span');
span2.id = 'ast';
span2.setAttribute('class','RedAst');
span2.appendChild(document.createTextNode('*'))
} else { // IE
span2 = document.createElement('<span id="ast" class="RedAst">*</span>');
}

span2.appendChild(span);
// finish the second span here
span2.appendChild(span1);
span1.appendChild(document.createTextNode('&nbsp;Specify the Product:'))






// The input text element into the second td
var inputText;
if (typeof document.all == 'undefined') { // NOT IE
td2.appendChild(document.createTextNode('&nbsp;'))
inputText = document.createElement('input');
inputText.setAttribute('type','text');
inputText.name = 'writeProd';
inputText.setAttribute('class','letter1');
} else { // IE
inputText = document.createElement('&nbsp; <input type="text" name="writeProd" class="letter1">');
}

inputText.appendChild(span);
// finish the input text here
inputText.appendChild(td2);



tbody.appendChild(tr);
break;

...


The row added should be: "<tr><td height='30' colspan='2' align='center'></td><td colspan='4'><span id='otherP' class='letter4'><span id='ast' class='RedAst'>*</span>&nbsp;Specify the Product:</span>&nbsp; <input type='text' name='writeProd' class='letter1'></td></tr>"

jamescover
07-16-2004, 12:07 AM
If so, if I use DOM, almost all the web browsers will be able to support this functionality?

:rolleyes:

cesark
07-16-2004, 08:51 AM
Hi,
I am very interested in almost all the web browsers be able to support this functionality, but how can I do it? I was told that with 'innerHTML' it is impossible..

My target is to be able to generate html code dynamically. With 'innerHTML' I only can add Html code inside an existing cell or column, Isn' t it? But how can I expand an existing table with new elements, or creating a new table on the page?

Do you know al least what extended and used resources exists for these intentions?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum