...

View Full Version : comment form issue.



LearningCoder
09-21-2011, 08:22 PM
Hi I am creating a help page on my website and I am putting a form on there in case users wish to leave any feedback/suggestions. Now, I am using JavaScript to try and solve this. What I want is a form box, which when the submit button is clicked, it creates a new div box underneath the form (or existing comment div) and updates the site this way. At first I would like to just get the functionality of the div being created and updated, then I will imrpove/add my form inputs etc.

Here is what code I have so far:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>template</title>
<meta name="description" content="Brief description of the page" />
<meta name="author" content="Thomas S. P. Vasey" />

<style type="text/css">



label {width: 7em;
float: left;
text-align: right;
margin-right: 1em;
margin-left: 1em;
display: block;
text-decoration: underline;
font-family: century gothic;
font-size: 10pt;
font-weight: bold;}

fieldset {background-color: gray;
width: 50%;
color: #f7852c;
display: inline;
border: 0pt;}

legend {color: black;
border: 1px solid #000000;
font-size: 14pt;
padding-left: 1em;
padding-right: 1em;}

textarea {border: 1pt solid black;
background-color: #f7852c;}

input {border: 1pt solid black;}

input[type="text"] {background-color: #f7852c;}
input[type="button"] {background-color: #f7852c;
font-family: century gothic;
border: 2px solid black;
padding: 0.5%;
margin: 2%;}
input[type="reset"] {background-color: #f7852c;
font-family: century gothic;
padding: 0.5%;
border: 2px solid black;
margin: 2%;}

input:focus {background-color: #80b7ff;}
textarea:focus {background-color: #80b7ff;}

</style>
<script type="text/javascript">
function printOut() {
var alias = document.form1.username.value;
var comment = document.form1.comments.value;

document.write('<div class="output">' + alias + '</div>');
document.write('<div class="output">' + comment + '</div>');
}
</script>
</head>
<body>

<form action="" name="form1" method="">
<fieldset>
<legend>[A!B]Attitude Brothaz Feedback</legend>
<p>
<label for="username">Name/Alias:</label>
<input type="text" name="username" maxlength="25" size="20" />
</p>
<p>
<label for="comments">Comments:</label>
<textarea name="comments" rows="5" cols="40"></textarea>
</p>



<input type="button" value="Submit Post" onclick="printOut()" />
<input type="reset" value="Reset Form" />
</fieldset>
</form>

</body>
</html>



I hope someone can help me achieve this, I believe I am going in the right direction with it, just need some guidance.


Thank you for your time,

Regards,

LC.

Old Pedant
09-21-2011, 08:39 PM
You can *NOT* use document.write after a page is loaded.

If you do so, the document.write will *WIPE OUT* the entire page, even including the JavaScript that did the document.write!

Among other things, this means you can *never* use document.write to respond to any use-initiated event, such as onclick or onsubmit or anything like that.

A *much* easier way to do this is to simply hide the comment box/field until it is needed.



<script>
function printOut(form)
{
document.getElementById("t1").innerHTML = form.username.value;
document.getElementById("t2").innerHTML = form.comments.value;
document.getElementById("theComments").style.display = "block";
}
</script>
...

<form action="" name="form1" method="">
<fieldset>
<legend>[A!B]Attitude Brothaz Feedback</legend>
<p>
<label>
Name/Alias:
<input type="text" name="username" maxlength="25" size="20" />
</label>
</p>
<p>
<label>
Comments:
<textarea name="comments" rows="5" cols="40"></textarea>
</label>
</p>
<input type="button" value="Submit Post" onclick="printOut(this.form)" />
<input type="reset" value="Reset Form" />
</fieldset>
</form>
<div id="theComments" style="display: none;">
<div id="t1" class="output"></div>
<div id="t2" class="output"></div>
</div>


HOWEVER...

However, I'm sure you know that this won't actually store the username or comments any place. To do that, you'll have to post back to the server and use server-side code to store the info in a database.

And when you do that, the likelihood that this code will still be useful is minimal.

LearningCoder
09-21-2011, 10:06 PM
I didn't know that no. Although, since your explanation that is something well beyond my knowledge at this point. Do I have to use JavaScript with a php script?

Old Pedant
09-22-2011, 03:44 AM
Not clear to me that there is any reason to use JavaScript for this, at all. Seems like something that could be done all server side. That is, all PHP (or ASP or JSP or .. )

Don't see how JS brings any value to this kind of thing.

LearningCoder
09-22-2011, 07:41 AM
That's great I'll have a look into it.

Regards,

LC.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum