innerHTML, div's and <form> tags

Hey guys!!! (and gals)

I’m having a bit of trouble getting around forms, innerHTML and div’s.

What i’m trying to accomplish is simple done, and i’ve found a solution to the problem but not one i’m happy with.

ok, so to get down to it…

I have a form, with two radio boxes, 1 select box and 1 submit button.

Now, while a certain value in the select box is selected I have an additional input box appearing for further information/input (duh!).

Anyways, the input field appears, looking spiffy…but, when i submit the form, the input field is ignored.

Now, the way i’m doing it is by using innerHTML and the <div> tag.

(example)


function AddInputField(foo) {
	 addField = "<input type='text' name='other' id='other'>";
		
	 if (foo == "other") {
	 	if (ie4) {
		  document.all['input'].innerHTML = addField;
		}
		else if (ns4) {
		  document.layers['input'].innerHTML = addField;
		}	
		else if (ns6) {
		  document.getElementById('input').innerHTML = addField;
		}	
	 }
	 else {
	   if (ie4) {
		  document.all['input'].innerHTML = "";
		}
		else if (ns4) {
		  document.layers['input'].innerHTML = "";
		}	
		else if (ns6) {
		  document.getElementById('input').innerHTML = "";
		}
	}
}

ok, that was the example - easy enough (and it does work, sorta…well it shows up).

Anyways, I’m now annoyed to find out that the form ignores the inserted/created input field.

I’ve found my own solution, but it’s not particularly one i’m happy with. So is there anybody here (js gurus or pretenders, dun’ matter) that’s been split by one simple problem like this one and that’s willing to share that hard-earned knowledge ?

Cheers & Thanks

Have the <input> in the form all the time, just change the visibility

or

Use document.createElement() to create a new <input>, and appendChild() to add it to the form

Well, i’ll settle for trying to work with option number 2 here.

mainly because i thought that keeping the form field hidden is a bit tacky…besides, JS is a learning curve to me and as such i’m trying to learn as much as possible while still doing the work.

Anyways, i’ll research a bit on createElement() and appendChild().

Thanks heaps…cheers

well, cant say I’ve ever had the problem, but a possible workaround would be to have a hidden field in the form from the start and then set that fields value to that of your new input field when the submit button is clicked.

Originally posted by EvilDoppler
… i’m trying to learn as much as possible while still doing the work.

That’s the right attitude :slight_smile:

okajse…here we go again…

i’m there, almost there - but the solution that i’m tracking down here is having some rather interesting side-effects on the rest of the page.

i changed the innerHTML function and used createElement() and appendChild() as jofa so correctly pointed out.

Now, i’ve never used the appendChild() function before and i’ve now see what’s really really funny about using that one.

It’ll litterally append forever if allowed. So now i have to put a stop to it…he hehe…interesting…


function AddInputField(foo) {
	 		
	 if (foo == "other") {
	 	if (ie4) {
		  var sp = document.createElement("input");
		  sp.setAttribute("id","newInputField");
		  sp.setAttribute("name","newInputField");
		  document.all["targetDiv"].appendChild(sp);
		}
		else if (ns4) {
		  var sp = document.createElement("input");
		  sp.setAttribute("id","newInputField");	
		  sp.setAttribute("name","newInputField");	
		  document.layers["targetDiv"].appendChild(sp);
		}	
		else if (ns6) {
		 var sp = document.createElement("input");
 	     sp.setAttribute("id","newInputField");
	     sp.setAttribute("name","newInputField");		
		 document.getElementById('targetDiv').appendChild(sp);
		}	
	 }
	 else {
	   if (ie4) {
		  document.all['targetDiv'].innerHTML = "";
		}
		else if (ns4) {
		  document.layers['targetDiv'].innerHTML = "";
		}	
		else if (ns6) {
		  document.getElementById('targetDiv').innerHTML = "";
		}
	}
}


soooooo…try playing with that…he hehehe…i managed to create some close to 10 input fields before noticing what it was doing.

Anyways, anyone up for a helping hand again ?

else if (ns4) {
document.layers[‘targetDiv’].innerHTML = “”;
}
NS4 doesn’t support .innerHTML!!

Also you should probably create a separate DeleteInputField() function, since having a function called AddInputField which actually removes a field when the input is not “other” isn’t very logical…!

Ok, it just keeps on raining here!!!

M@rco, you’re absolutely right about me having to create a seperate function to remove the field - which was my intentions all along.

To make the function more “logically sounding” i can of course rename it to AlterForm(). Simple as that…but…erhmmm still not good to have the two conflicting functions within the one function call.

Anyways, the function has changed a bit as of yesterday.

Problem still the same to start with, the form ignoring the field i dynamically create.

here goes:


function AddInputField(foo) {

  if (ns6) {
	ElementPresent = (document.getElementById('newInputField'))? true:false;
  }
  else if (ie4) {
	ElementPresent = (document.all["newInputField"])? true:false;
  }
  else if (ns4) {
	ElementPresent = (document.layers["newInputField"])? true:false;
  }

if (!ElementPresent) {
 var inputElement = document.createElement("input");
 inputElement.setAttribute("id","newInputField");
 inputElement.setAttribute("name","newInputField");
	 		
	 if (foo == "other") {
	 	if (ie4) {
		  document.all["targetDiv"].appendChild(inputElement);
		}
		else if (ns4) {
		  document.layers["targetDiv"].appendChild(inputElement);
		}	
		else if (ns6) {
		document.getElementById('targetDiv').appendChild(inputElement);
		}	
	 }
 }
 else {
 	if (foo != "other") {	
	   if (ie4) {
	     document.removeChild(document.all['newInputField']);
		}
		else if (ns4) {
		  document.removeChild(document.layers["newInputField"]);
		}	
		else if (ns6) {
		  document.getElementById('newInputField').removeChild('newInputField');
		}
	 }
   }
}

So, now i’ve limited it to actually only adding the field if it isn’t present to start with. Simple solution.

though - uhmm this part with the form ignoring it is rather annoying.

So, any other suggestions along this path? (and mind you, i’ve already had it perfectly working with just hiding the input field and showing it - but the reason behind this uhmmm slightly more complicated version is to learn.

NS4 doesn’t support .innerHTML!!

I’d be surprised if it supported appendChild(), either. For that matter, I’d be surprised if IE4 supported .appendchild(), though I think you’ve got a good chance with .innerHTML

You’re probably going to come a cropper expecting either of them to support setAttribute(), too.

And while I’m being a cross-browser nerd, .getElementById() is supported much more widely than just Netscape 6 - recent versions of IE, all Mozilla/Gecko browsers (Netscape 6/7, Mozilla, Phoenix, Chimera, etc.) and Opera 7 betas.

bluefive,

cheers and thanks for that part as well.

always room for some more feedback, especially on cross-browser issues as we’re NEVER going to get rid of that rather significant part of client-sided scripting.

The browser companies just doesn’t know how to shake hands and agree. tossers!!!

Originally posted by M@rco
Also you should probably create a separate DeleteInputField() function, since having a function called AddInputField which actually removes a field when the input is not “other” isn’t very logical…!

The name AddInputField is logical if you add a true|false parameter to it :wink:
AddInputField(false) => delete field

ok…short medal parade here…

it’s now working visually…eg. it’s removing the input field and it’s adding it when it’s told. voila…

here goes:


function AddInputField(foo) {

  if (ns6) {
	ElementPresent = (document.getElementById('newInputField'))? true:false;
  }
  else if (ie4) {
	ElementPresent = (document.all["newInputField"])? true:false;
  }
  else if (ns4) {
	ElementPresent = (document.layers["newInputField"])? true:false;
  }

if (!ElementPresent) {
 var inputElement = document.createElement("input");
 inputElement.setAttribute("id","newInputField");
 inputElement.setAttribute("name","newInputField");
	 		
	 if (foo == "other") {
	 	if (ie4) {
		  document.all["targetDiv"].appendChild(inputElement);
		}
		else if (ns4) {
		  document.layers["targetDiv"].appendChild(inputElement);
		}	
		else if (ns6) {
		document.getElementById('targetDiv').appendChild(inputElement);
		}	
	 }
 }
 else {
 	if (foo != "other") {	
	   if (ie4) {
		 var node1 = document.all['targetDiv'];
	     var node2 = document.all['newInputField'];
         var exe = node1.removeChild(node2);
		}
		else if (ns4) {
		 var node1 = document.layers["targetDiv"];
		 var node2 = document.layers["newInputField"];
		 var exe = node1.removeChild(node2);
		}	
		else if (ns6) {
		  var node1 = document.getElementById('targetDiv');
		  var node2 = document.getElementById('newInputField');
		  var exe = node1.removeChild(node2);
		}
	 }
   }
}

Now to refine it a tad more…hehehehe…AND to manage to get the form element to actually acknowledge the presence of the additional input field…

it’s still ignoring it - which to me is a tad weird, unless the fact that i’m attaching the input field to a <div> tag is relevant ??? any suggestions ???

Is that <div> inside the <form> ?

The <div> tag is within the <form> tag for sure…

it’s working in ie6 and opera7 but not in Netscape 7…

uhmmm…i’ll have to check with Netscape 4 too…but am about to give up on that browser version completely.

Just noticed; you don’t set the type attribute
inputElement.setAttribute(“type”, “text”);

Maybe that’s why it’s not working in NS7

Jofa,

nope…that’s not the reason…since type=“text” is default you don’t really need to set that at all but it’s good code manners to do it anyways.

No, the problem was really that it needed to be appended to the form tag instead of the div inside the form.

it’s working now but needs a bit of tweaking here and there.

So thanks for the help guys, i’ll post the complete code once i’m done.

cheers and thanks again!!

Just a thought; the <div> tag is needed because you want to show/hide some text next to the input?

If we go back to option #1; show/hide the element(s):
You could add labels to each text like this…
<label id=“lbl1” for=“txt1”>Text 1: </label><input type=“text” id=“txt1” >
…and change style.display (none|inline) for one or more textboxes dynamically, and finally in that js function…


var labels = document.getElementsByTagName("label");
for(var i = 0; i < labels.length; i++)
{
  var label = labels[i];
  var elemName = label.getAttribute("for");
  label.style.display = getStyle(elemName, 'display');
}

(the function getStyle() is the one found at http://www.xs4all.nl/~ppk/js/getstyles.html)

Or you could continue working with option #2 and add labels dynamically, of course, and change their style.left & style.top to a position near “their” textbox