prototype: How to wrap an input field with span tag...

[markjohnson123]

Hello everyone,

I am not at all a JavaScript expert so please bear with me.

Please have a look at the following code:

		add_option_link.onclick = function() {
				j++;
				
				var tr = document.createElement("tr");

				var td = document.createElement("td");
				Element.insert(td, "Option " + j);
				tr.appendChild(td);

				var td = document.createElement("td");
				var input = document.createElement("input");
				input.name = "options["+i+"][option]["+j+"][display]";
				Element.insert(td, input);			
				tr.appendChild(td);

				var td = document.createElement("td");				
				[COLOR="Red"]var input = document.createElement("input");
				input.name = "options["+i+"][option]["+j+"][option_number]";[/COLOR]
				Element.insert(td, input);
				tr.appendChild(td);

				var td = document.createElement("td");
				var input = document.createElement("input");
				input.name = "options["+i+"][option]["+j+"][price]";
				Element.insert(td, input);
				tr.appendChild(td);
				
				var td = document.createElement("td");
				var a = document.createElement("a");
				a.href = "";
				Element.insert(a, "delete");
				a.onclick = function() {
					tr = this.parentNode.parentNode;
					Element.remove(tr);
					return false;
				}
				Element.insert(td, a);
				tr.appendChild(td);

				Element.insert(options_table, tr);
				
				return false;
			}

This is obviously generating tr's and td's with input fields in them.

I would like the input field marked in red above (lines 25, 26) to be wrapped by <span> tags...

Hence, it should appear in HTML as follows:

<span id="sprytextfield1">
<input name="options[1][option][1][option_number]"/>
<span class="textfieldRequiredMsg">A value is required.</span></span>

I have no idea how to achieve this with the code above, and any help will be greatly appreciated.

Many thanks!

 

[BillyRayPreachersSon]

In the same way that you are creating table cells by using this code:

var td = document.createElement('td');

you can create spans by replacing 'td' with 'span'.

And, just as you are appending a table cell by using:

node.appendChild(td)

you could append the span element by using the same 'appendChild' method.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[markjohnson123]

Thanks Dan, this really helped.

But since I am an absolute novice in JavaScript, I would like to be spoon-fed, if that's not too much to ask.

Basically, I am trying to generate this:

<span id="sprytextfield1">
<input name="options[1][option][1][option_number]"/>
<span class="textfieldRequiredMsg">A value is required.</span></span>

Using this code:

				var td = document.createElement("td");
					var span = document.createElement("span");
					span.id = "sprytextfield";
						var input = document.createElement("input");
						input.type = "text";
						input.name = "options["+i+"][option]["+j+"][option_number]";
						span.appendChild(input);
						var span2 = document.createElement("span");
						span2.id = "sprytextfield";
						span.appendChild(span2);
					td.appendChild(span);
				tr.appendChild(td);

However, it's coming out like this:

<span id="sprytextfield1">
<input type="text" name="options[1][option][1][option_number]"/>
<span id="sprytextfield"/></span>

As you can see, the closing span tag isn't appearing. What am I doing wrong here?

I would also like to know how to insert text within a span field like so:

<span id="sprytextfield"/>This is where I want the text to go.</span>

 

[BillyRayPreachersSon]

Remove all the 'span2' stuff, and you should be sorted.

Basically, you don't need to do anything to add a closing 'span' - it's automatic.

On adding text to a span, the easiest way is:

var span = document.createElement("span");
span.innerHTML = 'some text here';

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/