🔒 Locked

[web] Trouble writing form elements with javascript

Started by jon723 Jun 30, 2008 at 9:46 PM 2 replies 1.9k views

Original Post

Jun 30, 2008 at 9:46 PM

I'm trying to dynamically write a form on a page I am creating. When I call the &#106avascript from my html document the elements aren't being written. Could someone tell me what I'm doing wrong??


// JavaScript Document

var resTitle = "Site Resource";  // this will get changed to the name of the resource
var netID = "testID"; 	// change this id to the id where the email will be sent to.

function generateForm()
{
	resTitle = this.document.getElementById("resourceTitle").innerHTML;
	
	if(!resTitle)
	{
		resTitle = "Site Resource";	
	}
	
	this.document.writeln("<form method='post' action='https://www.lefthandinteractive.com/mytest.cgi'>");
	
	
	this.document.writeln("<input name='netid' type='hidden' value='", netID,"' />");
	this.document.writeln("<input name='subject' type='hidden'", "value='", resTitle, "' />");
	
	
	this.document.writeln("<input name='required' type='hidden' value='email' />");
	this.document.writeln("Email:(Required)<input name='email' type='text' value='' size='30' maxlength='60' /> 

");
	
	this.document.writeln("How would you rate this resource?
");
	this.document.writeln("<input name='rating' type='radio' value='1'  />1 (lowest)" );
	this.document.writeln("<input name='rating' type='radio' value='2'  />2");
	this.document.writeln("<input name='rating' type='radio' value='3'  />3");
	this.document.writeln("<input name='rating' type='radio' value='4'  />4");
	this.document.writeln("<input name='rating' type='radio' value='5'  />5 (highest)

");
	
	this.document.writeln("How did you learn about this website?
");
	this.document.writeln("<input name='reference' type='radio' value='Through a search engine?'  />Through a search engine?
");
	this.document.writeln("<input name='reference' type='radio' value='From a colleague?' />From a colleague?
");
	this.document.writeln("<input name='reference' type='radio' value='From another webpage (which one?)' />From another webpage (which one?)<input name='reference' type='text' value='' size='30' maxlength='60' />
");
	this.document.writeln("<input name='reference' type='radio' value='From a teacher?' />From a teacher?
");
	this.document.writeln("<input name='reference' type='radio' value='Other (please specify)' />Other: <input name='othSource' type='text' value='' size='30' maxlength='60' />

" );
	this.document.writeln("Comments:
");
	this.document.writeln("<textarea name='feedback' rows='4' cols='32'></textarea>
");
	this.document.writeln("<input type='submit' value='Send the form' />", "<input type='reset' value='Reset the form' />");
	
	this.document.writeln("</form>");
	
}

Colin Jeanne

163

Colin Jeanne

Jun 30, 2008 at 10:51 PM

First, you dont need 'this' in front of all the references to document. document is a global object.

Second, the exact line of the error is usually reported by the browser. In IE, you can turn &#106avascript debugging on in Internet Options, in Firefox I highly recommend using Firebug and the Error Console to help you out.

coderx75

116

coderx75

Jun 30, 2008 at 10:53 PM

I've been out of web development for a while so please bear with me. I'm a bit rusty.

If getElementById("resourceTitle") doesn't exist, looking up innerHTML will fail and stop execution of the script. Try this instead:

resElement = document.getElementById("resourceTitle")resTitle = "Site Resource";if (resElement) {	resTitle = document.getElementById("resourceTitle").innerHTML;	if(!resTitle)	{		resTitle = "Site Resource";		}}

Maxamor

Jul 2, 2008 at 1:22 AM

resTitle = this.document.getElementById("resourceTitle").innerHTML;

Can still throw an exception, stopping the script. You should, in my opinion, try to access the innerHTML property using two steps. The first step would be getting the "resourcesTitle" element by ID. Then you can test it for validity before trying to access a property of an object that you can't guarantee is there.

var resTitleEl = document.getElementById("resourceTitle");if(resTitleEl && resTitleEl.innerHTML) {resTitle = resTitleEl.innerHTML;}

~~Isn't innerHTML an IE-only property?~~ EDIT 3: No.

EDIT: So, I just read the original post again. You were almost there. I would do this:

resElement = document.getElementById("resourceTitle");resTitle = "Site Resource";if (resElement) {	if(resElement.innerHTML) {		resTitle = resElement.innerHTML;	}}

EDIT 2: Or even more concise...

resElement = document.getElementById("resourceTitle");resTitle = "Site Resource";if (resElement && resElement.innerHTML) {	resTitle = resElement.innerHTML;}

EDIT 4: I'm on a roll. I didn't look it up, but I don't think you can do this:

this.document.writeln("<input name='netid' type='hidden' value='", netID,"' />");document.writeln("<input name='subject' type='hidden'", "value='", resTitle, "' />");

Just concatenate the strings together. Like this:

document.writeln("<input name='netid' type='hidden' value='" + netID + "' />");document.writeln("<input name='subject' type='hidden'" + " value='" + resTitle + "' />");

I previewed the code, it doesn't look like my source is coming through. Use a plus sign instead of comma.

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.