innerHTML, div's and <form> tags

EvilDoppler · December 23, 2002, 6:32am

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

jofa · December 23, 2002, 6:42am

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

EvilDoppler · December 23, 2002, 6:44am

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

spartan · December 23, 2002, 6:45am

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.

jofa · December 23, 2002, 6:51am

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

That’s the right attitude

EvilDoppler · December 23, 2002, 7:21am

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 ?

MarcusJT · December 23, 2002, 11:37am

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…!

EvilDoppler · December 23, 2002, 11:15pm

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.

blufive · December 23, 2002, 11:19pm

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.

EvilDoppler · December 23, 2002, 11:21pm

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!!!

jofa · December 23, 2002, 11:34pm

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
AddInputField(false) => delete field

EvilDoppler · December 23, 2002, 11:40pm

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 ???

jofa · December 24, 2002, 12:09am

Is that <div> inside the <form> ?

EvilDoppler · December 24, 2002, 12:13am

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.

jofa · December 24, 2002, 1:46am

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

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

EvilDoppler · December 24, 2002, 1:50am

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!!

jofa · December 24, 2002, 3:11am

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)

jofa · December 24, 2002, 3:17am

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

Topic		Replies	Views
Help with Appending innerHTML and Form Elements JavaScript	5	2254	July 14, 2010
Form field in Appendchild not posting in Firefox JavaScript	12	3511	July 15, 2011
Add inputs to form using JS JavaScript	4	725	July 16, 2018
Form does not submit jQuery added input fields JavaScript	8	26883	February 6, 2013
Dynamic form fields not submitted JavaScript	1	4434	October 9, 2010

innerHTML, div's and <form> tags

Related topics