We Keep Coding

how access elements of a div using this

I want to access element of this dynamically created div. This is the html
<div id="uploader">
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange">
<img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon">
<span class="upl" id="upload">Upload document</span>
<input type="file" class="upload up" id="up" onchange="readURL(this);">
</div>
<!-- btn-orange -->
</div>
<!-- col-3 -->
<div class="col-sm-8">
<input type="text" class="form-control" name="" id="document_name" placeholder="Document Name">
</div>
<!--col-8-->
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
<!-- col-1 -->
this is the part that is dynamically created
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload3">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
</div>
<div class="col-sm-8"><input type="text" class="form-control" id="Doc3note" name="" placeholder="Note"></div>
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
I have a file upload handler called readURL()
function readURL(input) { }
what I want to get is the id of a specific div, so I tried this and many other unsuccessful methods
function readURL(input) {
console.log($(input).closest('.col-sm-8').find(".form-control").attr('id'));
}
I hope my explanation is clear, I want to get the id of class="col-sm-8" on file upload. how can implement this?

Passing the id up (uploadFile input)
Execute this: $(input).parent().parent().next()
Look at this code snippet
function readURL(input) {
console.log('Id of Div: ' + $(input).parent().parent().next().attr('id'));
console.log('Id of form-control input: ' + $(input).parent().parent().next().find(".form-control").attr('id'));
}
readURL('#up');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload3">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
</div>
<div class="col-sm-8" id='div(col-sm-8)'><input type="text" class="form-control" id="Doc3note" name="" placeholder="Note"></div>
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
Resources
.parent()
.next()

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.

dropzone.js Is it possible to show filename in the preview?

By Default, in the preview state, I have to hover on the image preview to see the filename.
but Is it possible to put filename outside the hoverzone? (see the screenshot)
This is my try but not work
<form id="my-awesome-dropzone" class="dropzone" method="post" enctype="multipart/form-data" action="upload.php">
<div class="dz-filename">
<span data-dz-name></span>
</div>
<div class="dropzone-previews"></div>
Manga Title:<input type="text" name="title" /> <br>
Chapter:<input type="text" name="chapter" /> <br>
<button type="submit">Submit data and files!</button>
</form>

You can take the file name in any event in add it to the preview element, here is an example in the addedfile event:
js:
Dropzone.options.myAwesomeDropzone = {
init: function() {
this.on('addedfile', function(file){
var preview = document.getElementsByClassName('dz-preview');
preview = preview[preview.length - 1];
var imageName = document.createElement('span');
imageName.innerHTML = file.name;
preview.insertBefore(imageName, preview.firstChild);
});
}
};

in your previewTemplate, use like this
<div class="dz-preview dz-file-preview">
<div class="dz-details">
<div class="dz-filename"><span data-dz-name class="badge badge-success"></span></div>
<img data-dz-thumbnail style="height:100px;width:100px;"/>
<div class="dz-filename"><span data-dz-name class="badge badge-success"></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-details">
</div>
<img src="assets/img/fileRemoveIcon.png" style="width: 40px;margin-top: -227px;margin-left: 70px;" alt="remove" data-dz-remove />
</div>
</div>`

Drag and Drop to Inside a Form

I'm trying to make a customizable form builder where you can drag and drop the Bootstrap fields into a box in order to make another form. I'm fairly new to html/css/js so anything would be greatly appreciated!
Here's what I have so far:
<!-- FORM START -->
<form class="form-horizontal">
<fieldset>
<div class="col-md-6">
<h3> Preexisting Fields </h3>
<hr/>
<!-- First Name -->
<div id="firstnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-3 control-label" for="textinput">First Name</label>
<div class="col-md-9" >
<input id="textinput" name="textinput" type="text" placeholder="John"
class="form-control pull-right">
</div>
</div>
<!-- Last Name -->
<div id="lastnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-3 control-label" for="textinput">Last Name</label>
<div class="col-md-9" >
<input id="textinput" name="textinput" type="text" placeholder="Doe"
class="form-control input-md">
</div>
</div>
</div>
</fieldset>
</form>
<!-- INSERT HERE: I want to be able to drag those items above
into the panel and create a new form -->
<div id="builder" class="panel panel-default">
<h3> Drag Fields </h3> <hr/>
<div class="panel-body" ondrop="drop(event)" ondragover="allowDrop(event)">
<form id="target" class="form-horizontal">
<fieldset >
</fieldset>
</form>
</div>
</div>
JavaScript:
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

This appears to be working with some success (see this fiddle or the snippet below)
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<!-- FORM START -->
<form class="form-horizontal">
<fieldset>
<div class="col-md-6">
<h3> Preexisting Fields </h3>
<hr/>
<!-- First Name -->
<div id="firstnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-3 control-label" for="textinput">First Name</label>
<div class="col-md-9" >
<input id="textinput" name="textinput" type="text" placeholder="John" class="form-control pull-right">
</div>
</div>
<!-- Last Name -->
<div id="lastnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-3 control-label" for="textinput">Last Name</label>
<div class="col-md-9" >
<input id="textinput" name="textinput" type="text" placeholder="Doe" class="form-control input-md">
</div>
</div>
</div>
</fieldset>
</form>
<!-- INSERT HERE: i want to be able to drag those items above into the panel and create a new form -->
<div id="builder" class="panel panel-default">
<h3> Drag Fields </h3> <hr/>
<div class="panel-body" ondrop="drop(event)" ondragover="allowDrop(event)">
<form id="target" class="form-horizontal">
<fieldset >
</fieldset>
</form>
</div>
</div>
Can you describe more about the problem you're having? What you're expecting to see vs. what's actually happening?
Note: I'd also echo D Jones's comment that there's a huge amount of work here to build The General Case. The urge toward avoiding repetition is a good one, but copy and pasting will help get a handle on some of the common html patterns and idioms in Bootstrap long before you see the time saving benefits of creating an engine to do it for you.
That said, if you do want to explore it as a learning project, I'd take a look at more of the documentation on jQuery UI as that's doing a lot of the heavy lifting here (the Bootstrap html is just an implementation detail):
draggable
droppable
sortable

how to show a div tag when i click on a button?

My program is to upload a file and when I click on Upload it will call a servlet. the same upload page contain some other fields which should b displayed when I click on upload button only. how to call the servlet as well as to show the remaining contents. Actually using the servlet I want to show the file contents on same page.
here is my code.
<form class="form-horizontal" name="regist" action="Registration"
onsubmit="return validateFile((this))" enctype="multipart/form-data"
method="post">
<div class="control-group" class="span12">
<label class="control-label" for="file">Please upload a
file:</label>
<div class="controls">
<input type="file" name="file"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</div>
</form>
</div>
<div id="showFrames" style="display:none;">
<!--
hidden contents are here -->
</div>
and my script is
function validateFile(form) {
var fileName = form.file.value;
if (!fileName) {
alert("No File Selected!!!");
return false;
}
else
{
$("#showFrames").show();
}
}
but it doesn't work. can anyone help me? thanks

With jQuery I'll do it like that :
$('.form-horizontal').sumbit(function(e) {
if($(this).find('input[type="file"]').val().length) { //check by length
$("#showFrames").show();
} else {
alert('No file Selected');
e.preventDefault();
}
});
It'll be better using a form ID if you need to have more than one form.
This way you can remove the onsubmit attribute.

Replace your as per below
<form class="form-horizontal" name="regist" action="Registration"
onsubmit="return validateFile(this)" enctype="multipart/form-data"
method="post">
<div class="control-group" class="span12">
<label class="control-label" for="file">Please upload a
file:</label>
<div class="controls">
<input type="file" name="file"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</div>
</form>
</div>