Develop Reference

File value is still displaying in the table even if implemented input.value=' ' in javascript

I managed to check the file extension type and detect fake files but the problem that I'm facing now is after the alert message(alert that the image is fake) the details of the file are still being displayed in the table. How to remove the details from being display in the table after the alert message.
https://i.stack.imgur.com/9a2x4.png
Here's the code of my work:
https://jsfiddle.net/auwhk7v1/1/
Here's one of the code that displaying details of the files:
vpb_added_files_displayer += '<tr id="add_fileID' + vpb_file_id + '" class="' + new_classc + '"><td>' + vpb_file_icon + ' ' + this.vpb_files[i].name.substring(0, 40) + '</td><td><span id="uploading_' + vpb_file_id + '"><span style=color:blue;>Ready</span></span></td><td>' + vpb_actual_fileSize + '</td><td><select class="form-control required type_doc_'+vpb_file_id+'" id="type_doc" name="type_doc" value="" title="File Type for document/photo" onchange="get_doc_type(this.value, \'' + vpb_file_id + '\')" required/><option value="0">Please Select</option>'+load_checklist('type_doc', vpb_file_id)+'</select></td><td><span id="remove' + vpb_file_id + '"><span class="vpb_files_remove_left_inner" onclick="vpb_remove_this_file(\'' + vpb_file_id + '\',\'' + this.vpb_files[i].name + '\');">Remove</span></span></td></tr></div>';
vpb_added_files_displayer2 += '<tr id="add_fileID' + vpb_file_id + '" class="' + new_classc + '"><td>' + vpb_file_icon + ' ' + this.vpb_files[i].name.substring(0, 40) + '</td><td><span id="uploading_' + vpb_file_id + '"><span style=color:blue;>Ready</span></span></td><td>' + vpb_actual_fileSize + '</td><td><select class="form-control required type_doc2_'+vpb_file_id+'" id="type_doc2" name="type_doc2" value="" title="File Type for photos" onchange="get_doc_type(this.value, \'' + vpb_file_id + '\')" required/><option value="0">Please Select</option>'+load_checklist('type_doc2', vpb_file_id)+'</select></td><td><span id="remove' + vpb_file_id + '"><span class="vpb_files_remove_left_inner" onclick="vpb_remove_this_file(\'' + vpb_file_id + '\',\'' + this.vpb_files[i].name + '\');">Remove</span></span></td></tr></div>';
}
}
//Display browsed files on the screen to the user who wants to upload them
if (this.vpb_settings.vpb_form_id == "myForm") {
$("#add_files").append(vpb_added_files_displayer);
$("#added_class").val(new_classc);
// load_checklist('type_doc');
} else if (this.vpb_settings.vpb_form_id == "myForm2") {
$("#add_files2").append(vpb_added_files_displayer2);
$("#added_class").val(new_classc);
// load_checklist('type_doc2');
I used one of the codes that I search in stack overflow:
How to check file MIME type with javascript before upload?
I've tried files.value='' but still the details are displayed in my table. Can anyone solve this for me? Thanks in advance.

Select html content from an element

I would like to select the content of this element
<div class="entry-content">
comment.body +
</div>
I want to get that comment.body in the function I call below, more precisely in
var body = parent.find('entry-content');
How can I select the content of a certain div? I tried val() and contents() and none of them worked.
Any suggestion?
$("body").on("click", ".show-textarea", function(){
var answerid = $(this).data('answer');
var type = $(this).data('type');
var questionid = $(this).data('question');
var $commentForm = $(this).parent().find('.comment-form').first();
console.log(answerid);
$.getJSON("/controller/api/comments/comment.php", {
answerid : answerid,
questionid : questionid,
type : type
}, function (data) {
$commentForm.find('article').remove();
console.log("AID " + answerid);
console.log("Data" + data.length);
$.each(data, function(i, comment) {
console.log("Comment:" + comment);
$commentForm.append('<article class="tweet-data">' +
'<div class="comment-items">' +
'<div class="qa-c-list-item hentry comment" id="c3574">' +
'<div class="asker-avatar">' +
'<a>' +
'<img width="40" height="40" src="' +
comment.user_photo +
'"></a>' +
'</div>' +
'<div class="qa-c-wrap">' +
'<div class="post-button">' +
'<button name="" onclick="" class="btn icon-flag" title="Flag this comment as spam or inappropriate" type="submit">flag</button>' +
'<button name="" class="btn icon-answers" title="Reply to this comment" type="submit">reply</button>' +
'</div>' +
'<span class="qa-c-item-meta">' +
'commented' +
' 1 day' +
' ago' +
' by ' +
'<a style="display: inline" href="" class="qa-user-link url nickname">' +
comment.username +
'</a> ' +
'<span class="qa-c-item-who-points"> ' +
'<span class="qa-c-item-who-points-pad">(</span><span class="qa-c-item-who-points-data">140</span><span class="qa-c-item-who-points-pad"> points)</span> ' +
'</span> ' +
'</span> ' +
'</span> ' +
'<div class="qa-c-item-content" style="color: #2d2727; font-size: 13px"> ' +
'<a name="3574"></a>' +
'<div class="entry-content">' +
comment.body +
'</div> ' +
'</div> ' +
'<div class="comment-edit-form">' +
'<form method="post" action="/controller/actions/comments/edit_comment.php">' +
'<button class = "edit-comment btn {if !$isMine}hidden{/if}" type="button">Edit</button>' +
'</form>' +
'</div> ' +
'</div> <!-- END qa-c-item --> ' +
'</div>' +
'</div></article>');
});
});
$commentForm.show();
});
$("body").on("click", ".textarea-ok, .textarea-cancel", function(){
commentsFetched = false;
$('.comment-form').hide();
});
$("body").on("click", ".edit-comment", function(){
console.log("Hello");
var parent = $("body").find('article').last();
var body = parent.find('entry-content');
console.log(body);
var parent_parent = $("body").find('article').parent().last();
parent.remove();
console.log(parent);
var button = $(this),
commentField = $('<div class="comment-form">' +
'<form method="post" action="/controller/actions/comments/edit_comment.php">' +
'<textarea name="comment" rows="4" cols="40" class="qa-form-tall-text">' +
body +
'</textarea>' +
'<input type="hidden" name="answerid" value="" />' +
'<input type="hidden" name="questionid" value="" />' +
'<button type="submit" class="textarea-ok">Edit Comment</button>' +
'</form>' +
'</div>'); // create a textarea element
commentField
// set the textarea's value to be the saved content, or a default if there is no saved content
.val(button.data('textContent') || 'This is my comment field\'s text')
// set up a keypress handler on the textarea
.keypress(function(e) {
if (e.which === 13) { // if it's the enter button
e.preventDefault(); // ignore the line break
button.data('textContent', this.value); // save the content to the button
$(this).remove(); // remove the textarea
}
}).appendTo(parent_parent); // add the textarea to the document
});

Since the binding is on '.edit-comment' which is a child of the '.tweet-data' encapsulating each individual entry (from the looks of your logic) I would suggest doing
$(this).closest('.tweet-data').find('.entry-content').text();
Your current logic is going to the last article for the 'parent' element. So if you tried to click the edit comment option on a tweet data other than the last one, your logic will most likely not work. Doing the lookup contextually by which element was clicked will fix this potential issue.

Hidden Field Value Not Getting Filled JQuery

I have an HTML table append using jQuery as follows which fires on a button click
$("#listadd").click(function() {
if (validateListAdd()) {
var mcode = $("#mcodehidden").val();
if(checkItemDuplicates(mcode)) {
var mname = $("#mnamehidden").val();
var sellprice = $("#sellprice").val();
var cost = $("#cost").val();
var qty = $("#qty").val();
var remark = $("#remark").val();
var subtotal = sellprice * qty;
alert(qty);
$("#productlist tbody").append('<tr class="sumrow"><td><input id="hdqty" type="hidden" name="tblqty[]" value="' + qty + '"><input id="hdsubtotal" type="hidden" name="tblsubtotal[]" value="' + subtotal + '"><input type="hidden" name="tblmcode[]" value="' + mcode + '">' + mcode + '<input type="hidden" name="tblcost[]" value=' + cost + ' ></td><td><input type="hidden" name="tblmname[]" value="' + mname + '">' + mname + '</td><td id="tdprice"><input type="hidden" name="tblsellprice[]" value=' + sellprice + '>' + sellprice + '</td><td id="tdqty">' + qty + '</td><td class="subtotal">' + subtotal + '</td><td><input type="hidden" name="tblremark[]" value=' + remark + '>' + remark + '</td><td><center><button type="button" class="edit" title="Edit this row"></center></td><td><center><button type="button" class="delete" title="Remove this row"></center></td></tr>');
$('[id$=mcode]').val("");
$('[id$=mname]').val("");
$('[id$=sellprice]').val("");
$('[id$=qty]').val("");
$('[id$=mcodehidden]').val("");
$('[id$=mnamehidden]').val("");
calculateTotal();
}else{
alert("Sorry, You have already added this item");
}
} else {
alert("You have entered invalid data, Please check again");
}
});
The problem is the value of the hidden field #hdqty is not getting filled by the var "qty" but which shows up the value correctly in the alert that I have used in here. When I inspected the element(table row) in the browser, it shows the hidden field as
<input id="hdqty" type="hidden" name="tblqty[]" value>
Can anyone point me out the mistake?

You set the value of the #hdqty field in the string you build, however the below line removes the value almost immediately:
$('[id$=qty]').val("");
The selector above matches any element that has an id attribute that ends with qty.
Remove that line, or change the selector to better fit your requirements, and your code will work.

Paste this
$("#productlist tbody").append('<tr class="sumrow"><td><input id="hdqty" type="hidden" name="tblqty[]" value="' + qty + '"/><input id="hdsubtotal" type="hidden" name="tblsubtotal[]" value="' + subtotal + '"/><input type="hidden" name="tblmcode[]" value="' + mcode + '"/>' + mcode + '<input type="hidden" name="tblcost[]" value=' + cost + ' /></td><td><input type="hidden" name="tblmname[]" value="' + mname + '">' + mname + '</td><td id="tdprice"><input type="hidden" name="tblsellprice[]" value=' + sellprice + '>' + sellprice + '</td><td id="tdqty">' + qty + '</td><td class="subtotal">' + subtotal + '</td><td><input type="hidden" name="tblremark[]" value=' + remark + '>' + remark + '</td><td><center><button type="button" class="edit" title="Edit this row"></center></td><td><center><button type="button" class="delete" title="Remove this row"></center></td></tr>');
also paste this line before the above code
$('[id$=qty]').val("");

Better way to use html templete with json response

I am getting json response from my server.
I am getting detail of user like school(name,id),major subject(name,id),start ,end etc.
I want to show this is appropriate text fields inside a form where user can edit this and after editing user should submit it again to server.
I am embadding fetched json code with html code inside the jquery.
I am finding it very difficult to manage html inside jquery is there any better way to this with following code.
$(document).on('click', '.edit-edu', function(event) {
event.preventDefault();
var id = $(this).parents('.row').attr('id');
var id1 = id.split('-');
$.post("SingleEdu", {id: id1[1]}, function(data) {
console.log(data);
$.each(data.educationList, function(key, value) {
$('#' + id).replaceWith('<div id="addNewEdu" class="addorEdit">'
+ '<legend>Edit education details</legend>'
+ '<form action="UpdateEducation" id="UpdateEducation" cssClass="form-horizontal">'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>School/College</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ ' <textfield name="ed.pageBySchoolPid.name" value="' + value.pageBySchoolPid.name + '" id="school2" label="School/College" placeholder="College or School Name" cssClass="form-control">' + '</textfield>'
+ '<input type="hidden" name="ed.pageBySchoolPid.id" value="' + value.pageBySchoolPid.id + '" id="schoolId2" label="School/College" cssClass="form-control">'
+ '</hidden>'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>Major</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="text" name="ed.pageByMajorPid.name" value="' + value.pageByMajorPid.name + '" id="major1" label="Class" placeholder="Major Subject" cssClass="form-control">'
+ '<input type="hidden" name="ed.pageByMajorPid.id" value="' + value.pageByMajorPid.id + '" id="majorId1" label="Class" cssClass="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>Start</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="text" name="ed.start" value="' + value.start + '" id="sstart1" label="From" placeholder="eg. Start: July 2007" cssClass="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>End</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="text" name="ed.end" value="' + value.end + '" id="send1" label="To" placeholder="eg. End : May 2011 or Till" cssClass="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>Visibility</label>'
+ ' </div>'
+ '<div class="col-md-6">'
+ '<select label="Visibility" name="ed.visibility" value="' + value.visibility + '" id="svisibility1" value="public" cssClass="form-control">'
+ '<option>Public</option>'
+ '<option>Friends</option>'
+ '<option>Me</option>'
+ '</select>'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label class="sr-only">Submit</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="submit" value="add" id="submit_education" cssClass="btn btn-sm btn-success"/>'
+ '</div>'
+ '</div>'
+ '</form>')
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></script>
<div class="row" id="edu-56">
<div>Specialization</div>
<div>School</div>
<div>start end</div>
<i class="fa fa-edit edit-edu">edit</i>
<i class="fa fa-times delete-edu"></i>
</div>

You could store your code inside another .html file and pull it in using another AJAX call:
var FormHTML = '';
$.get('form.html', function(data) {
FormHTML = data;
});
Then to get your values in you can set up your input HTML with something that can be easily replaced out. I've just wrapped the object name in between some #:
<input type="hidden" name="ed.pageByMajorPid.id" value="##pageByMajorPid.id##" id="majorId1" label="Class" cssClass="form-control">
Then to replace out these values with your actual values, just do a loop:
for (var name in value) {
if (typeof value[name] != 'object') { // If not an object, replace the value
formHTML = formHTML.replace('##' + name + '##', value[name])
} else { // Else if it is an object, loop through it
for (var name2 in value[name]) {
formHTML = formHTML.replace('##' + name + '.' + name2 + '##', value[name][name2])
}
}
}
$('#' + id).replaceWith(formHTML);
Hope that works for you, let me know :)

You can use template engine like Mustache https://mustache.github.io/

Updating two dynamic text fields simultaneously

See below code. I am creating 2 text fields at a time. Now how could I type on one text field and make the other twin text field have the same values simultaneously?
<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>
<script>
$(document).ready(function() {
var tfCont = 0;
var InputsWrapper = $("#InputsWrapper");
var x = InputsWrapper.length;
var namefield = $("#tfButton");
$(namefield).click(function() {
tfCont++;
$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..."/>' + '<br>' + '</div>' + '</div>');
$(OuterWrapper).append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '">' + '</div>');
x++;
return false;
});
});
</script>

I created a fiddle that I think does what you want: http://jsfiddle.net/3h1h5j7y/
Here is the code.
HTML
<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>
JavaScript
I added a data- attribute to the inputs with the tfCont id so that they can operate in pairs as they are added.
Also, I am using the on() method so that objects can be added dynamically. It is filtering on the fTypex class.
$(document).ready(function() {
var tfCont = 0;
var InputsWrapper = $("#InputsWrapper");
var x = InputsWrapper.length;
var namefield = $("#tfButton");
$(namefield).click(function() {
tfCont++;
$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..." data-tfcount="' + tfCont + '"/>' + '<br>' + '</div>' + '</div>');
$("#OuterWrapper").append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '" data-tfcount="' + tfCont + '">' + '</div>');
x++;
return false;
});
$(document).on("click blur keyup", "input.fTypex", function() {
var tfc = $(this).data("tfcount");
$("#tf_" + tfc).val(this.value);
});
});
I had to change $(OuterWrapper) from your example to $("#OuterWrapper") because there was not a variable.

Try something like this :
use onkeyup to call a function which binds the values
HTML
<body>
<input id='ip1' onkeyup='updateOther(this);' type='text'>
<input id='ip2' type='text'>
<script src="script.js"></script>
</body>
JS:
function updateOther(obj){
$('#ip2').val($(obj).val()) ;
}
http://plnkr.co/edit/dpwav5fGcisZcjBIzYyz?p=preview