Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts

    comment form issue.

    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:
    Code:
    <!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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.

    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    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?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    That's great I'll have a look into it.

    Regards,

    LC.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •