We Keep Coding

Custom social media site posting process not posting to user's profile

I'm working on a social media site for a client that was built by another company. Currently I'm working on the posting system where users can post. The original code had it where users had to go through 3 steps first then hit the button to post. The client wanted to remove the steps and just have it setup similar to facebook. I moved the code around and removed the steps but the "Post" button doesn't work now. When I click on it, it just says "Posting" and doesn't do anything else.
If you go to seegossip.com and sign up as a user and login, click on the orange smileys icon in the top right, it will bring up the posting popup.
Below is the original posting process code:
<div class="popup close">
<div class="left">
<div class="sectionn1 follow" id="box1">
<div class="popup-heading">Follow the steps and start gossiping!</div>
<div class="follow2">*Tip: you can do all three on the same Post! </div>
<div class="type">
</div>
<div class="get">
<button type="button" onClick="openpopup(2)">Get Started!</button>
</div>
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="popupclose-c">Cancel</div>
</a>
</div>
</div>
<div class="sectionn1" id="box2" align="center">
<div class="popup-heading">Step1: Type away!</div>
<div class="user-post-main">
<div class="add-pics">
<div class="user-post"> <br clear="all" />
<form id="post" id="form" name="form" action="" method="post">
<div class="user-post-middle">
<div class="post-area">
<input type="text" placeholder="Type your post's Title here" class="input" name="postname" id="postname"/>
<span class='status'></span>
</div>
<div class="post-area">
<textarea placeholder="Type your post's here" class="textarea" rows="5" name="posttext" id="posttext"/></textarea>
<span class='status'></span>
</div>
<div class="post-area">
<input type="text" placeholder="Enter a Custom URL Here" class="input" name="posturl" id="posturl"/>
<span class='status'></span>
</div>
<br clear="all" />
</div>
</form>
<div class="red">
<div>
<div id="dropzone" class="drop">
<form action="upload/" class="dropzone" id="my-dropzone">
<input type="hidden" name="postid" value="<?php echo $_REQUEST['post_id'];?>">
<input type="hidden" name="userid" value="<?php echo $_SESSION['sguser_id'];?>">
</form>
</div>
<div id="dropzone1" class="dropzone zone"> </div>
</div><br clear="all" />
<!--<button type="button" onclick="openpopup(4)" >Lets Add Some Videos! ></button>-->
</div>
</div>
<div class="green">
<div>
<div id="dropzone" class="drop">
<form action="upload/" class="dropzone" id="my-dropzone2">
</form>
</div>
<div id="dropzone2" class="dropzone zone"></div>
</div><br clear="all" />
<div class="some">
<div class="button"><button type="button" name="create_new_post" id="create_new_post" >Post</button></div>
</div>
</div>
</div>
</div>
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
</div>
</div>
<!----------------------popup3---------------------------->
<div class="sectionn1" id="box3" align="center">
<div class="popup-heading"> Step2: Let's Add Some Pics!</div>
<span style="font-style:italic; font-size:16px;">No Picture? No Problem Simply Continue to the Next Step! </span><br clear="all" />
<div class="user-post-main">
<div class="user-post1">
<div class="user-post">
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
<div class="right-icn">
<div style="background-image:url(images/left1.png); width:50px; height:50px" class="left1"></div>
<div style="background-image:url(images/left2.png); width:50px; height:50px" class="left2"></div>
<div style="background-image:url(images/left3.png); width:50px; height:50px" class="left3"></div>
</div>
</div>
</div>
<!-------------------------------popup-4--------------------->
<style>
.dz-default.dz-message {
background-size:100px !important;
}
</style>
<div class="sectionn1" id="box4" align="center">
<div class="popup-heading">Step3: Let's Add Some Videos!</div>
No Videos? No Problem Simply click on POST!<br clear="all" /><br />
<div class="user-post-main">
<div class="user-post1">
<div class="user-post">
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
<div class="right-icn">
<div style="background-image:url(images/left1.png); width:50px; height:50px" class="left1"></div>
<div style="background-image:url(images/left2.png); width:50px; height:50px" class="left2"></div>
<div style="background-image:url(images/left3.png); width:50px; height:50px" class="left3"></div>
</div>
</div>
</div>
</div>
<!--------------------------popup-->
And here's the new code for the posting process:
<div class="popup close">
<div class="sectionn1 follow" id="box1">
<div class="user-post">
<!-- UPLOAD PICS -->
<div class="popupclose">
<a class="new_post_close">
<div class="close-c">
</div></a>
</div>
<div class="drop" id="dropzone">
<form action="upload/" class="dropzone" id="my-dropzone" name="my-dropzone">
<input name="postid" type="hidden" value="<?php echo $_REQUEST['post_id'];?>"> <input name="userid" type="hidden" value="<?php echo $_SESSION['sguser_id'];?>">
</form>
<p>Add Photo(s)</p>
</div>
<div class="dropzone zone" id="dropzone1">
</div>
<!-- UPLOAD VIDEOs -->
<div class="drop" id="dropzone">
<form action="upload/" class="dropzone" id="my-dropzone2" name="my-dropzone2">
</form>
<p>Add Video</p>
</div>
<div class="dropzone zone" id="dropzone2">
</div>
</div>
<!-- POST AREA -->
<form action="" id="post" method="post" name="form">
<textarea class="textarea" id="posttext" name="posttext" placeholder="What's on your mind, today?" rows="5"></textarea>
</form>
<div class="bottom-buttons">
<div class="button">
<button id="create_new_post" name="create_new_post" type="button">
<p>Post</p></button>
</div>
</div>
</div>
</div>
Below is the script for the popup where I think the error is.
$(document).on('click','a#opennewpostpopup',function(data){
if($('.popup').hasClass('close')) {
postpopup(0);
openpopup(1);
}
});
$(document).on('click','.openpostpopup',function(data){
postpopup(5,this);
});
function openpopup(p){
if(p){
$('.glass, .popupglass').fadeIn();
$('.popup').removeClass('close');
$('.sectionn1').removeClass('active');
$('#box'+p).addClass('active');
$('body').addClass('short_page');
if(p==3) $('#my-dropzone .dz-default span').html('Drag and Drop your pictures here!')
if(p==4) $('#my-dropzone2 .dz-default span').html('Drag and Drop your Videos here,');
}
else {
$('.glass , .popupglass').fadeOut();
$('.popup').addClass('close');
$('body').removeClass('short_page');
$('.sectionn1').removeClass('active');
$('#post .post-area .input,#post .post-area .textarea').each(function(){ $(this).val(''); });
$('span.status').removeClass('success').removeClass('error');
$('.dz-preview').remove();
$('[name=post_id]').remove();
}
}
function createPostId(popup){
id = $('input[name=post_id]').val();
if(typeof cnprpost == 'undefined' && !id){
cnprpost = $.post("ajax.php",{action:'createPost',posttext:$('#posttext').val()},function(data){
$('#my-dropzone, #my-dropzone2').not(':has(input[name=post_id])').prepend('<input type="hidden" name="post_id" value="'+data+'">');
openpopup(popup);
delete cnprpost;
});
}else openpopup(popup);
}
$('.new_post_close').on('click',function(data){
id=$('form.dropzone [name=post_id]').val();
if(id) {
var conf=confirm("Your Post is Not Published\nClick Cancel to Continue or\nClick OK to Cancel\nYour Uploads will remove if you Click Ok");
if(conf){
openpopup(0);
$.post("ajax.php",{action:"deletepost",post_id:id},function(data){
});
}
}else openpopup(0);
});
$('#create_new_post').on('click',function(){
post_id=$('[name=post_id]').val();
postTitle = $('#post input[name=postname]').val();
postContent = $('#post textarea[name=posttext]').val();
postUrl = $('#post input[name=posturl]').val();
dis=this;
$(dis).html('Posting...');
if(typeof pprpost == 'undefined' && post_id )
pprpost =$.post("ajax.php",{action:'publishpost',post_id:post_id,posttitle:postTitle,posttext:postContent,posturl:postUrl},function(data){
if(data==1) { openpopup(0); }
else { $(dis).html('Try Again...'); }
delete pprpost
});
});
window.onbeforeunload = function() {
id=$('[name=post_id]').val();
if(!$('.popup').hasClass('close') && id){
return "Your Post is Not Published\nClick Cancel to Continue or\nClick OK to Cancel\nYour Uploads will remove if you Click Ok";
$.post("ajax.php",{action:"deletepost",post_id:id},function(data){ });
}
}
This is a little advanced for me and I've been stuck on this site for a couple weeks trying to figure out what the problem is so please help.

getting input from button not working

Below is my html code for the form
<form id="taxi_distance_input" >
<div class="col-md-8" style="display: inline-block; left:-30px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" id="usr"> </input>
<span class="input-group-addon" style="width: 50px">km</span>
</div>
</div>
<div class="col-md-4" style="padding-left:0px; margin-left:-10px">
<input type="button" class="btn btn-success" value="Submit" id="myButton"> </input>
</div>
</div>
<p> </p>
</form>
And in the bottom of the page I give the
<script src="/js/form_input_parameter.js"></script>
Inside the form_input_parameter.js i have written the script
$(document).ready(function(){
$('#myButton').click(function(){
var text = $("#usr").val();
alert(text+"success");
});
But it is not working .Any help is apprecited

You've forgotten the }); at the end of your JS code
The input tag should end with />
$(document).ready(function() {
$('#myButton').click(function() {
var text = $("#usr").val();
alert(text + " success");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="usr" />
<input type="button" class="btn btn-success" value="Submit" id="myButton" />

Prioritized Jquery validation before asp Code Behind in Button Click

New in ASP.net and i want to set the validation first before it goes to the Codebehind in my asp program, because the fields does'nt validate after clicking the button inside ASP:Content
Heres my Shortcode:
<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="MainContent" CssClass="bodyForm">
<section id="content" role="main">
<div class="entry two_third">
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#contactform').validationEngine('init');
jQuery('#contactform #contact_form_formsend').click(function () {
alert("He Goes Here!");
var form_builder_url = jQuery('#contact_form_url').val();
jQuery('#Content2 .loading').animate({ opacity: 1 }, 250);
if (jQuery('#Content2').validationEngine('validate')) {
jQuery.post(form_builder_url, {
contact_name: jQuery('.txtName').val(),
contact_email: jQuery('.txtEmail').val(),
contact_subject: jQuery('.txtSubject').val(),
contact_message: jQuery('.txtaMessage').val(),
formname: 'Content2',
formtype: 'contactf'
}, function () {
jQuery('#Content2 .loading').animate({ opacity: 0 }, 250);
document.getElementById('Content2').reset();
jQuery('#Content2').parent().find('.box').hide();
jQuery('#Content2').parent().find('.success_box').fadeIn('fast');
jQuery('html, body').animate({ scrollTop: jQuery('#Content2').offset().top - 100 }, 'slow');
jQuery('#Content2').parent().find('.success_box').delay(5000).fadeOut(1000);
});
return false;
} else {
jQuery('#Content2 .loading').animate({ opacity: 0 }, 250);
return false;
}
});
});
</script>
<form action="#" method="post" id="contactform">
<asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
<br />
<p>Required fields are marked <span class="color_3">*</span></p>
<div class="form_info cmsms_input">
<label for="contact_name">Name <span class="color_3">*</span></label>
<div class="form_field_wrap">
<input type="text" name="contact_name" runat="server" id="txtName" value="" size="22" tabindex="3" class="txtName validate[required,minSize[3],maxSize[100],custom[onlyLetterSp]]"/>
</div>
</div>
<div class="cl"></div>
<div class="form_info cmsms_input">
<label for="contact_email">Email <span class="color_3">*</span></label>
<div class="form_field_wrap">
<input type="text" name="contact_email" runat="server" id="txtEmail" value="" size="22" tabindex="4" class="txtEmail validate[required,custom[email]]" />
</div>
</div>
<div class="cl"></div>
<div class="cl"></div>
<div class="form_info cmsms_input">
<label for="contact_subject">Subject <span class="color_3">*</span></label>
<div class="form_field_wrap">
<input type="text" name="contact_subject" runat="server" id="txtSubject" value="" size="22" tabindex="6" class="txtSubject validate[required,minSize[3],maxSize[100]]" />
</div>
</div>
<div class="cl"></div>
<div class="form_info cmsms_textarea">
<label for="contact_message">Message <span class="color_3">*</span></label>
<div class="form_field_wrap">
<textarea name="contact_message" runat="server" id="txtaMessage" cols="28" rows="6" tabindex="7" class="txtaMessage validate[required,minSize[3]]" ></textarea>
</div>
</div>
<div class="cl"></div>
<div class="cl"></div>
<div>
<asp:Button class="more_button fl" runat="server" tabindex="8" Text="Send a message"
ID="contact_form_formsend" onclick="btnSendEmail_Click" /></div>
<div class="loading">
</div>
</form>
</div>
</div>
</section>
</asp:Content>
Here as you can see, My problem is that it goes forward the the codebehind and submit the form even before validating the page which I encounter Errors because of null fields, Hope Someone with Golden heart help me in this problem. . Thanks in Advance

You can call javascript function before postback. OnClientClick is use to call javascript function before postback. Use following code for reference:
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" ToolTip="Save" OnClientClick="return CheckValidation()" />
Call CheckValidation() javascript function. It will postback if function returns true.
<script type="text/javascript">
function CheckValidation()
{
// do validations here and return true if validate and return false if not
}
</script>

Show/hide list selecting all instead of individually

I have the following code, which shows and hides elements according to buttons being clicked:
HTML:
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" >
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" >
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
CSS:
.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}
JQUERY:
$(".editButton").click(function () {
$(".renameButton,.cancelRenameButton").show();
$(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
$(".renameButton,.cancelRenameButton").hide();
$(".editButton").show();
});
The problem I'm getting is I can't get the buttons to work individually. I've tried using 'this' without success

You can simply use siblings (less function calls!) in combination with this to traverse the DOM and then just toggle them away (or keep hide and show if you prefer).
JSFiddle here
$(".editButton").click(function () {
$(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});
$(".cancelRenameButton").click(function () {
$(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});

Try something like this:
$(".editButton").click(function () {
$(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").show();
$(this).parents(".largeImage").find(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
$(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").hide();
$(this).parents(".largeImage").find(".editButton").show();
});

If I understood properly what u want to do. This can be a possible solution:
HTML:
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton" name="form1">
<input type="button" value="Click to Rename"/>
</div>
<div class="cancelRenameButton" name="form1">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" name="form1">
<input type="submit" value="Rename"/>
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton" name="form2">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton" name="form2">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" name="form2">
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
CSS:
.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}
jQuery:
$(".editButton, .cancelRenameButton").click(function () {
Toggle($(this));
});
function Toggle(obj){
var name = obj.attr("name");
$(".renameButton[name="+name+"],.cancelRenameButton[name="+name+"]").toggle();
$(".editButton[name="+name+"]").toggle();
}
Check this link jsfiddle to see a how it works.
A better solution would be, I think, remove the divs and deal only with buttons.
Hope it useful!

Unable to make html/java script form function correctly

I'm struggling with a solution for this. I have the first block of code, which I want to use for css formatting/look feel etc.
<div class="login-form">
<!-- Start Error box -->
<div class="alert alert-danger hide">
<button type="button" class="close" data-dismiss="alert"> ×</button>
<h4>Error!</h4>
Your Error Message goes here
</div> <!-- End Error box -->
<form action="#" method="get" >
<input type="text" placeholder="User name" class="input-field" required/>
<input type="password" placeholder="Password" class="input-field" required/>
<button type="submit" class="btn btn-login">Login</button>
</form>
</div>
Then I have this separate code that uses a script to submit the user info once entered. I want to move the actions that this script performs onto the above code. Therefore having the look and feel of the first block of code and the actions of the second.
I'm learning at the moment, so it seems logical to try and use example code that exists as a starting point. I'm not able to find any help on goofle that direcly helps resolve this question.
I think if I could work out if I can wrap the script around the top block I could get it from there, just need some direction.
<div class="container" id="login-block">
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</script>

This is what I wanted to achieve. Works now, only taken 3 hours to work it out ;-/
<div class="container" id="login-block todoapp">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<div class="page-icon-shadow animated bounceInDown" > </div>
<div class="login-box clearfix animated flipInY" id="login-block">
<div class="page-icon animated bounceInDown">
<i class="glyphicon glyphicon-user"></i>
</div>
<div class="login-logo">
<img src="img/login-logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form content">
<!-- Start Error box -->
<div class="alert alert-danger hide">
<button type="button" class="btn btn-login" data-dismiss="alert"> ×</button>
<h4>Error!</h4>
Your Error Message goes here
</div></div> <!-- End Error box -->
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</script>
<div class="login-links">
<a href="forgot-password.html">
Forgot password?
</a>
<br />
<a href="sign-up.html">
Don't have an account? <strong>Sign Up</strong>
</a>
</div>
</div>
</div>
</div> </div>