Jump to content
  • Advertisement
Sign in to follow this  
jon723

[web] Trouble writing form elements with javascript

This topic is 3815 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I'm trying to dynamically write a form on a page I am creating. When I call the javascript 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("<span style='font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;'>Email:</span><span style='color:#FF0000; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif;'>(Required)</span><input name='email' type='text' value='' size='30' maxlength='60' /> <br /><br />");
	
	this.document.writeln("<span class='formtext' style='font-weight:bold'>How would you rate this resource?</span><br />");
	this.document.writeln("<input name='rating' type='radio' value='1'  /><span class='formtext'>1 (lowest)</span>" );
	this.document.writeln("<input name='rating' type='radio' value='2'  /><span class='formtext'>2</span>");
	this.document.writeln("<input name='rating' type='radio' value='3'  /><span class='formtext'>3</span>");
	this.document.writeln("<input name='rating' type='radio' value='4'  /><span class='formtext'>4</span>");
	this.document.writeln("<input name='rating' type='radio' value='5'  /><span class='formtext'>5 (highest)</span><br /><br />");
	
	this.document.writeln("<span class='formtext' style='font-weight:bold;'>How did you learn about this website?</span><br />");
	this.document.writeln("<input name='reference' type='radio' value='Through a search engine?'  /><span class='formtext'>Through a search engine?</span><br />");
	this.document.writeln("<input name='reference' type='radio' value='From a colleague?' /><span class='formtext'>From a colleague?</span><br />");
	this.document.writeln("<input name='reference' type='radio' value='From another webpage (which one?)' /><span class='formtext'>From another webpage (which one?)</span><input name='reference' type='text' value='' size='30' maxlength='60' /><br />");
	this.document.writeln("<input name='reference' type='radio' value='From a teacher?' /><span class='formtext'>From a teacher?</span><br />");
	this.document.writeln("<input name='reference' type='radio' value='Other (please specify)' /><span class='formtext'>Other: </span><input name='othSource' type='text' value='' size='30' maxlength='60' /><br/><br />" );
	this.document.writeln("<span class='formtext' style='font-weight:bold;'>Comments:</span><br />");
	this.document.writeln("<textarea name='feedback' rows='4' cols='32'></textarea><br />");
	this.document.writeln("<input type='submit' value='Send the form' />", "<input type='reset' value='Reset the form' />");
	
	this.document.writeln("</form>");
	
}


Share this post


Link to post
Share on other sites
Advertisement
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 javascript debugging on in Internet Options, in Firefox I highly recommend using Firebug and the Error Console to help you out.

Share this post


Link to post
Share on other sites
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";
}
}


Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!