We Keep Coding

Problem adding inputs to panel using javascript

My problem is that the button stops working for the following panels. I guess it's an id problem, but I have no idea how to fix it (I know very little about javascript)
Html:
<div class="card-body">
<button id="Addpanel">Add panel</button>
</div>
My scripts:
<script>
$(function() {
$('#Addpanel').click(function(){
var newDiv = $('<div class="panel-default"><br /><div class="form-control"><input type="text" id="fieldnum" name="fieldnum" value="">Fill number<a type="button" id="filldetails" class="btn" onclick="addFields()">Add</a></div><div id="container" class="form-control" />'
);
$(".card-body").append(newDiv);
});
});
</script>
Second:
<script type='text/javascript'>
function addFields(){
var number = document.getElementById("fieldnum").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
var input = document.createElement("input");
input.type = "text";
input.name = "input" + (i+1);
input.className = "form-control";
container.appendChild(input);
}
}
</script>

You Should use like this:
$(function () {
var count = 0;
$('#Addpanel').click(function () {
var newDiv = $('<div class="panel-default"><br /><div class="form-control"><input type="text" id="fieldnum' + count + '" name="fieldnum" value="">Fill number<a type="button" id="filldetails' + count + '" class="btn" onclick="addFields()">Add</a></div><div id="container' + count + '" class="form-control" />');
$(".card-body").append(newDiv);
count++;
});
});

Multiple Image upload on array - Javascript/Jquery

I wanted to upload some array of images through JavaScript. I tried the below code:
<script type="text/javascript">
var count =0;
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
count++;
for (var i = 0; i < count; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"removeImg\">Remove image</span>" +
"</span>").insertAfter("#files");
$(".removeImg").click(function(){
$(this).parent(".pip").remove();
});
// Old code here
/*$("<img></img>", {
class: "imageThumb",
src: e.target.result,
title: file.name + " | Click to remove"
}).insertAfter("#files").click(function(){$(this).remove();});*/
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML
<div class="field" align="left">
<h3>Upload your images</h3>
<input type="file" id="files" name="files[]" multiple />
</div>
But somewhere, when I click the submit button on my form, it sends me only array of one file, which is the last updated file. I wanted array of it..so that I can process that data later.
Please help me out.

i have tested your code it's working fine you just need to replace count variable in for loop with the filesLength variable then you will get all the images not last one that you were getting before!! below is the corrected code. do run the code it will work for you!in upload.php when write you will get number of images you have selected!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
var count =0;
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
console.log(filesLength);
count++;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"removeImg\">Remove image</span>" +
"</span>").insertAfter("#files");
$(".removeImg").click(function(){
$(this).parent(".pip").remove();
});
// Old code here
/*$("<img></img>", {
class: "imageThumb",
src: e.target.result,
title: file.name + " | Click to remove"
}).insertAfter("#files").click(function(){$(this).remove();});*/
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
</script>
<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">
<div class="field" align="left">
<h3>Upload your images</h3>
<input type="file" id="files" name="files[]" multiple />
</div>
<input type="submit" name="submit" value="Submit">
</form>
<form id="imageform" method="post" enctype="multipart/form-data">
<div class="field" align="left">
<h3>Upload your images</h3>
<input type="file" id="files" name="files[]" multiple />
</div>
<input type="submit" name="submit" value="Submit">
</form>

Add multiple html element dynamically using jquery

I want to add multiple html elements dynamically on button click and get values of each. Also one can delete created element on button click. HTML elements will be textbox and other text box for phone number.
I've tried to create single text box on button click. Fiddle: https://jsfiddle.net/dvkeojqn/
HTML:
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />
JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />'
}
</script>

try replacing this function..
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var valuesarr = new Array();
var phonearr = new Array();
$("input[name=DynamicTextBox]").each(function () {
valuesarr.push($(this).val());
});
$("input[name=phoneNum]").each(function () {
phonearr.push($(this).val());
});
alert(valuesarr); alert(phonearr);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> <input name = "phoneNum" type="text" /> <input type="button" value="Remove" class="remove" />';
}
and HERE is the FIDDLE.

Try to replace this JavaScript code..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> <input name = "DynamicTextBox" type="text" value="'+ value +'" /> <input type="button" value="Remove" class="remove" />';
}
</script>

Images preview before uploading

So I have here my upload script and it has a function that the user can preview selected images before uploading but my problem is that every time I'll upload all images available for preview it is always the last file chosen.
Heres my code:
<script type="text/javascript">
$(document).ready(function(){
function readURL(input){
if(input.files[0]){
var reader = new FileReader();
reader.onload = function(e){
$(".form-holder").append("<img class='prev' />")
$(".prev").attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#btn_up").change(function(){
readURL(this);
});
});
</script>

Try This Code
HTML
<input id="imgInput" type="file" name="file[]" multiple style="display:none;"/>
<input type="button" onclick="$('#imgInput').click();" value="Choose File" />
<output id="result" ></output>
<div style="margin-top:150px;" id="uploadedcontent"></div>
JS
var ftype = new Array();
$("#imgInput").change(function () {
readURL(this);
});
function readURL(input) {
var files = input.files;
var output = document.getElementById("result");
var count = 0;
var count1 = 0;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var picReader = new FileReader();
var divid = 'div_' + i;
var spanid = 'span_' + i;
picReader.addEventListener("load", function (event) {
var picFile = event.target;
var picnames = files[count].name;
var mimetypes = picFile.result.split(',');
var mimetype1 = mimetypes[0];
var mimetype = mimetype1.split(':')[1].split(';')[0];
count++;
var div = document.createElement("div");
div.setAttribute('id', 'div_' + count);
div.setAttribute('class', 'divclass');
if (mimetype.match('image')) {
div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
"title='" + picnames + "' width='96' height='80' alt='Item Image' style='position:relative;padding:10px 10px 10px 10px;' data-valu='" + mimetype + "'/><span class='boxclose' style='cursor:pointer' id='span_" + count + "'>x</span>";
}
output.insertBefore(div, null);
});
picReader.readAsDataURL(file);
}
}
$('body').on('click','.boxclose','',function(e){
var spanid = $(this).attr('id');
var splitval = spanid.split('_');
$('#div_' + splitval[1]).remove();
});
DEMO HERE

on change doesn't work

i have input type file of array that user can click add more.In my code part javascript i have method on change
jQuery('.focus_image').on('change', function () {
alert("hello");
above code i test input type file when user click add new input type file and browse file in directory but i test already input type file name orange work perfectly but name banana doesn't show hello What code is wrong? Help me to solve this problem.Below is my full code
<table>
<tr>
<th>
<label for="test">test</label>
</th>
<td>
<div id="popup1">
<div id="image-zone" style="width:200px;float:left;text-align:center">
<input type='button' class='button-primary' value='Add' id='add_focus'>
<input type="file" class="focus_image" name="orange">
</div>
</div>
<script type="text/javascript">
var count_focus = 0;
var num_focus = count_focus;
var temp_focus = count_focus + 1;
var name_focus = 'Focus_DIV' + temp_focus;
jQuery(document).ready(function($) {
$("#add_focus").click(function() {
if (num_focus == 10) {
alert("Only 10 textboxes allow");
return false;
}
id_div = 'Focus_DIV' + temp_focus;
file_id_name = "file_Focus_DIV" + temp_focus;
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Focus_DIV' + temp_focus);
newTextBoxDiv.html('<input type="file" id="' + file_id_name + '" name="banana" class="focus_image">');
newTextBoxDiv.appendTo("#image-zone");
temp_focus++;
name_focus = 'Focus_DIV' + temp_focus;
num_focus++;
});
});
//Below code is doesn't work when add new input type file
jQuery('.focus_image').on('change', function() {
alert("hello");
//
});
</script>
</td>
</tr>
</table>
Problem can solve
This problem can solve by in code html add new element dynamically must re register event

Look on Below jsfiddle for your code
http://jsfiddle.net/guNvz/
Actually Problem with little arrangement. If you add new element in HTML by dynamically than on that element you need to re register that event.
Try with below script :
<script type="text/javascript">
var count_focus = 0;
var num_focus = count_focus;
var temp_focus = count_focus + 1;
var name_focus = 'Focus_DIV' + temp_focus;
jQuery(document).ready(function($) {
jQuery("#add_focus").click(function() {
if (num_focus == 10) {
alert("Only 10 textboxes allow");
return false;
}
id_div = 'Focus_DIV' + temp_focus;
file_id_name = "file_Focus_DIV" + temp_focus;
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Focus_DIV' + temp_focus);
newTextBoxDiv.html('<input type="file" id="' + file_id_name + '" name="banana" class="focus_image">');
newTextBoxDiv.appendTo("#image-zone");
temp_focus++;
name_focus = 'Focus_DIV' + temp_focus;
num_focus++;
jQuery('.focus_image').unbind('change').change(function() {
alert("hello");
//
});
});
});
//Below code is doesn't work when add new input type file
</script>
Let me know you have query.
Thanks..!!

Keep that on event function inside the ready function
Here is the modified code:
<table>
<tr>
<th>
<label for="test">test</label>
</th>
<td>
<div id="popup1">
<div id="image-zone" style="width:200px;float:left;text-align:center">
<input type='button' class='button-primary' value='Add' id='add_focus'>
<input type="file" class="focus_image" name="orange">
</div>
</div>
<script type="text/javascript">
var count_focus = 0;
var num_focus = count_focus;
var temp_focus = count_focus + 1;
var name_focus = 'Focus_DIV' + temp_focus;
jQuery(document).ready(function($) {
$("#add_focus").click(function() {
if (num_focus == 10) {
alert("Only 10 textboxes allow");
return false;
}
id_div = 'Focus_DIV' + temp_focus;
file_id_name = "file_Focus_DIV" + temp_focus;
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Focus_DIV' + temp_focus);
newTextBoxDiv.html('<input type="file" id="' + file_id_name + '" name="banana" class="focus_image">');
newTextBoxDiv.appendTo("#image-zone");
temp_focus++;
name_focus = 'Focus_DIV' + temp_focus;
num_focus++;
});
//keep the code here
jQuery('.focus_image').on('change', function() {
alert("hello");
//
});
});
//Below code is doesn't work when add new input type file
//Removed the code from here
</script>
</td>
</tr>
</table>
JSFiddle

use this, to rule out that it's a css problem
$('#banana').focus(function() {
alert('Handler for .focus() called.');
});

Don't use on like that, use it like this, using it on #image-zone will attach this event to anything that has css class focus_image on #image-zone now and if they are added dynamically.
jQuery(document).ready(function($) {
$('#image-zone').on('change', '.focus_image', function() {
// Your code
});
// Your other code like the click event
});
Test out this fiddle which shows how you should do it