I trying to upload image to website with its title . I want user to see image before uploading .
HTML
<div class="container">
<h1>Image Uploader</h1>
<input type="file" name="images[]" id="images" multiple>
<br>
<div id="images-to-upload" class="row">
</div>
<br>
<div class="col-md-12">
<button id="upload_button" class="btn btn-sm btn-success col-md-4 col-xs-12">Upload all images</button>
</div>
</div>
When user select some images , Jquery add image with form in DIV .
Jquery
<script>
var fileCollection = new Array();
$('#images').on('change', function(e) {
var files = e.target.files;
$.each(files, function(i, file) {
fileCollection.push(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var template = '<form enctype="multipart/form-data" class="upload_form col-md-6 col-xs-12" action="/upload">' +
'<img id="img_xx" name="images" class="col-md-4 col-xs-4" src="' + e.target.result + '"> ' +
'<input style="width:90px; height:28px" class="col-md-2 col-xs-4" type="number" name="table" id="table" >' +
'<input style="width:90px; height:28px" class="col-md-2 col-xs-4" type="file" name="images" value="' + e.target.result + '" >' +
'<button style="margin:0px 5px 0px 5px; width:95px" class="btn btn-sm btn-primary col-md-3 col-xs-3 submit_form" value="Upload" name="submit_weight">Upload</button>' +
'<button type="button" class="btn btn-sm btn-danger remove_form col-md-2 col-xs-6">Cancel</button>' +
'<div style="height: 30px; font-size: 20px; margin: 0px 0px 10px 0px; padding: 0px; text-align: center;" class="progress col-md-7 col-xs-6 progress-stripped active"><div class="progress-bar" style="font-size: 15px; width:0%"></div></div> ' +
'</form>';
$('#images-to-upload').append(template);
};
});
});
$(document).on('submit', 'form', function(e) {
e.preventDefault();
var formdata = new FormData(this);
$form = $(this);
var request = new XMLHttpRequest();
request.open('post', 'script/file_upload_admin.php', true);
request.send(formdata);
$form.on('click', '.remove_form', function() {
console.log("Cancel");
alert("hello");
$(this).hide();
});
});
$("#upload_button").on('click', function(event) {
event.preventDefault();
$(".submit_form").click();
});
</script>
My problem is how i set value of input from FileReader , so image can be send in form data . I tried below method but its not working.
$(document).on('submit','form',function(e){
e.preventDefault();
//this form index
var index = $(this).index();
var formdata = new Formdata($(this)[0]); //direct form not object
//append the file relation to index
formdata.append(fileCollection[index]);
var request = new XMLHttpRequest();
request.open('post', 'script/file_upload_admin.php', true);
request.send(formdata);
});
maybe this can help you.
<div class="container">
<h1>Image Uploader</h1>
<input id="fileItem" type="file" name="images[]" id="images" multiple>
<br>
<div id="images-to-upload" class="row">
</div>
<br>
<div class="col-md-12">
<button id="upload_button" class="btn btn-sm btn-success col-md-4 col-xs-12">Upload all images</button>
</div>
</div>
Javascript
$('#upload_button').click(function(){
var files = document.getElementById('fileItem').files;
console.log(files)
$.each(files, function(index, item) {
//console.log(index, item);
console.log(item.name);
// here you can do anything with name of file.
// maybe here you can create your form
});
});
test it jsfiddle
Related
This click function was previously working, until i added another button and some php...curious what's preventing it from executing as before, i've checked issues from other questions:
-jquery is properly loaded before the local script
-all functions are wrapped in .ready() [Why is this jQuery click function not working?
I found an interesting post about delegated event handling here: Jquery button click() function is not working
But i don't understand if or why this would apply to my situation...and if it does can someone explain to me its significance?
Javascript:
jQuery ( document ).ready( function ( $ ) {
function initColorPicker0 () {
for ( x=0; x < 4; x++ ) {
var canvasEl0 = document.getElementById('colorCanvas0');
var canvasContext0 = canvasEl0.getContext('2d');
var image0 = new Image(150, 150);
image0.onload = () => canvasContext0.drawImage(image0, 0, 0, image0.width, image0.height);
image0.src = "../img/color-wheel-opt.jpg";
}
canvasEl0.onclick = function ( mouseEvent0 ) {
var imgData0 = canvasContext0.getImageData(mouseEvent0.offsetX, mouseEvent0.offsetY, 1, 1);
var rgba0 = imgData0.data;
var bannerInput = $ ( '#bannerColor' );
bannerInput.val("rgba(" + rgba0[0] + ", " + rgba0[1] + ", " + rgba0[2] + ", " + rgba0[3] + ")" );
}
}
function demoBanner () {
// set click handler
$( '#demo' ).click( function () {
// store input values
var formObject = {
"prompt": document.getElementById('prompt').value,
"c2a" : document.getElementById('c2a').value,
"bannerColor" : document.getElementById('bannerColor').value,
}
//apply input values to style of new content
var newContent = " <div style='height: auto; padding: 15px 0px; margin: 0px -15px; background-color:" + formObject.bannerColor + ";'> <a href='#'> <p style=' margin-top: 0px; margin-bottom: 0px; text-align: center; color:" + formObject.promptTextColor + ";'>"+ formObject.prompt + " <a style='padding: 5px 12px; border-radius: 7px; background-color:" + formObject.c2aBG + "; color:" + formObject.c2aTextColor + " ' href='#'> <em> " + formObject.c2a + " </em> </a> </p> </a> </div>";
//set input as html content of demo
$( 'div.demo' ).html( newContent );
})
}
// called functions
$ ( function () {
initColorPicker0();
demoBanner();
});
});
HTML:
<div id="demo" class="demo"></div>
<div class="container">
<div class="row">
<div class="col-sm-3 text-center">
<div class="form-group">
<br>
<form action="test.php" method="post" name="form">
<label for="prompt">Prompt:
<input class="form-control" name="prompt" id="prompt" type="text">
</label>
<label for="c2a">Call-to-Action:
<input class="form-control" name="c2a" id="c2a" type="text">
</label>
<label for="bannerColor">Banner Background Color:
<input class="form-control" name="bannerColor" id="bannerColor" type="text">
<canvas style="border-radius:50%;" id="colorCanvas0" class="color-canvas" width="150" height="150"></canvas>
</label>
<input id="demo" type="button" class="btn btn-warning" value="Demo Banner">
<br>
<br>
<input id="submit" type="submit" class="btn btn-success" name="submit" value="Submit Form">
</form>
</div>
</div>
</div>
</div>
<!--jquery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- local JS -->
<script src="http://localhost:8888/vorotech_site/js/banner-tool.js"> </script>
EDIT: $( '#demo' )
First of all, for .click(), it passes an event to the callback. For type="submit", this includes submitting the form. Would advise using .preventDefault().
Here is an example including some jQuery cleanup. Also tried to retain proper object indexes.
$(function() {
function initColorPicker0() {
var canvasEl0, canvasContext0;
for (x = 0; x < 4; x++) {
canvasEl0 = $('#colorCanvas0')[0];
canvasContext0 = canvasEl0.getContext('2d');
var image0 = new Image(150, 150);
image0.onload = () => canvasContext0.drawImage(image0, 0, 0, image0.width, image0.height);
image0.src = "../img/color-wheel-opt.jpg";
}
canvasEl0.onclick = function(mouseEvent0) {
var imgData0 = canvasContext0.getImageData(mouseEvent0.offsetX, mouseEvent0.offsetY, 1, 1);
var rgba0 = imgData0.data;
var bannerInput = $('#bannerColor');
bannerInput.val("rgba(" + rgba0[0] + ", " + rgba0[1] + ", " + rgba0[2] + ", " + rgba0[3] + ")");
};
}
function demoBanner() {
// set click handler
$('#demo').click(function(e) {
e.preventDefault();
// store input values
var formObject = {
prompt: $('#prompt').val(),
c2a: $('#c2a').val(),
bannerColor: $('#bannerColor').val(),
};
//apply input values to style of new content
var newContent = $("<div>").css({
height: "auto",
padding: "15px 0px",
margin: "0px -15px",
"background-color": formObject.bannerColor,
});
$("<a>", {
href: "#"
}).appendTo(newContent);
$("<p>")
.css({
"margin": "0",
"text-align": "center ",
color: formObject.prompt
})
.html(formObject.prompt)
.appendTo($("a", newContent));
$("<a>", {
href: "#"
}).css({
padding: "5px 12px",
"border-radius": "7px",
"background-color": formObject.c2a,
color: formObject.c2a
}).html("<em>" + formObject.c2a + "</em>").appendTo("p", newContent);
//set input as html content of demo
$('div.demo').html(newContent);
});
}
// called functions
initColorPicker0();
demoBanner();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo" class="demo">DEMO</div>
<div class="container">
<div class="row">
<div class="col-sm-3 text-center">
<div class="form-group">
<br>
<form action="test.php" method="post" name="form">
<label for="prompt">Prompt:
<input class="form-control" name="prompt" id="prompt" type="text">
</label>
<label for="c2a">Call-to-Action:
<input class="form-control" name="c2a" id="c2a" type="text">
</label>
<label for="bannerColor">Banner Background Color:
<input class="form-control" name="bannerColor" id="bannerColor" type="text">
<canvas style="border-radius:50%;" id="colorCanvas0" class="color-canvas" width="150" height="150"></canvas>
</label>
<input id="demo" type="button" class="btn btn-warning" value="Demo Banner">
<br>
<br>
<input id="submit" type="submit" class="btn btn-success" name="submit" value="Submit Form">
</form>
</div>
</div>
</div>
</div>
I created an image website. I want users to be able to upload images with titles.
var fileCollection = new Array();
$('#images').on('change', function(e) {
var files = e.target.files;
$.each(files, function(i, file) {
fileCollection.push(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var template = '<form class="upload_form col-md-6 col-xs-12" action="/upload">' +
'<img class="col-md-4 col-xs-4" src="' + e.target.result + '"> ' +
'<input style="width:90px; height:28px" class="col-md-2 col-xs-4" type="number" name="table" id="table" >' +
'<button style="margin:0px 5px 0px 5px; width:95px" class="btn btn-sm btn-primary col-md-3 col-xs-3 submit_form" value="Upload" name="submit_weight">Upload</button>' +
'<button type="button" class="btn btn-sm btn-danger remove_form col-md-2 col-xs-6">Cancel</button>' +
'<div style="height: 30px; font-size: 20px; margin: 0px 0px 10px 0px; padding: 0px; text-align: center;" class="progress col-md-7 col-xs-6 progress-stripped active"><div class="progress-bar" style="font-size: 15px; width:0%"></div></div> ' +
'</form>';
$('#images-to-upload').append(template);
};
});
});
$(document).on('submit', 'form', function(e) {
e.preventDefault();
var index = $(this).index();
var formdata = new FormData($(this)[0]);
$form = $(this);
formdata.append('images', fileCollection[index]);
var request = new XMLHttpRequest();
// progress complete load event
request.open('post', 'script/file_upload_admin.php', true);
request.send(formdata);
});
$("#upload_button").on('click', function(event) {
event.preventDefault();
$(".submit_form").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Image Uploader</h1>
<input type="file" name="images[]" id="images" multiple>
<div id="images-to-upload" class="row"></div>
<div class="col-md-12">
<button id="upload_button" class="btn btn-sm btn-success col-md-4 col-xs-12">Upload all images</button>
</div>
</div>
When a user uploads multiple images the titles are mixed up with each other. For example, image_1 title gets set on image_2 and vice versa. Is there any way I can loop the form so they upload one by one?
Anyone can show me what is wrong with my code? It show picture after change input but still in first input
It changes only first input everytime
Here is the code
$(document).ready(function() {
function readURL(input, data) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
var blah = '#blah' + data;
$(blah).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".active_file").change(function() {
var data = $(this).data('im');
var img_div = '#img_div' + data;
var img_id = '#image_id' + data;
$(img_id).html('<img id="blah' + data + '" src="#" alt="your image" />');
alert(data);
readURL(this, data);
data = data + 1;
$(this).removeClass('active_file');
$(img_div).after('<div class="col-md-2 img_div" id="img_div' + data + '" ><input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im=' + data + '><label class="col-md-12 image " for="fileI" id = "image_id' + data + '"> <i class="fa fa-cloud-upload"></i><br>Nahrať obrázok..</label></div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 gallery">
<div class="row galeria_row">
<div class="col-md-2 img_div" id="img_div1">
<input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='1'>
<label class="col-md-12 image " for="fileI" id="image_id1"> <i class="fa fa-cloud-upload"></i>
<br>Nahrať obrázok..</label>
</div>
</div>
</div>
</div>
You need to use delegate event of jQuery because your DOM is being updated in real time.
So instead of doing:
$(".active_file").change(function() {
do this
$(document).on('change', '.active_file', function(){
$(document).ready(function(){
function readURL(input,data) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var blah = '#blah' + data;
$(blah).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(document).on('change', '.active_file', function(){
var data = $(this).data('im');
var img_div = '#img_div' + data;
var img_id = '#image_id' + data;
$(img_id).html('<img id="blah'+data+'" src="#" alt="your image" />');
alert(data);
readURL(this,data);
data = data + 1;
$(this).removeClass('active_file');
$(img_div).after('<div class="col-md-2 img_div" id="img_div'+data+'" ><input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='+data+'><label class="col-md-12 image " for="fileI" id = "image_id'+data+'"> <i class="fa fa-cloud-upload"></i><br>Nahrať obrázok..</label></div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 gallery">
<div class="row galeria_row">
<div class="col-md-2 img_div" id="img_div1" >
<input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='1'>
<label class="col-md-12 image " for="fileI" id = "image_id1"> <i class="fa fa-cloud-upload"></i>
<br>Nahrať obrázok..</label>
</div>
</div>
</div>
</div>
Good day, i have this section of javascript that's causing me trouble
https://jsfiddle.net/o5x8qgvt/2/
When i add a new field the position gets incremented when i delete a field the position is repopulated but on product name it doesn't repopulate the fields it gives me blank even if i added data in each of them. Can you please help me out?
Javascript:
// setup an "add a tag" link
var $addTagLink = $('<button href="#" class="btn btn-info add_tag_link">Adauga Produs</button>');
$('.form-buttons > .btn-group').prepend($addTagLink);
var $newLinkLi = $('.append-me');
jQuery(document).ready(function() {
// Get the ul that holds the collection of product-group
var $collectionHolder = $('#products-group');
// add the "add a tag" anchor and li to the product-group ul
$collectionHolder.append($newLinkLi);
// count the current form inputs we have (e.g. 2), use that as the new
// index when inserting a new item (e.g. 2)
$collectionHolder.data('index', $collectionHolder.find(':input').length);
$addTagLink.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new tag form (see code block below)
addTagForm($collectionHolder, $newLinkLi);
typeInitialize();
});
});
function regenerateTagList() {
var vals = $('.product-group > .product-counter > input').toArray().map(function(v, i) {return v.value;});
var products = $('.product-group > .product-name > span > input:last').toArray().map(function(v, i) {return v.value;});
console.log(products);
$('.product-group').remove();
$('#products-group').data('index', 1);
for (var i = 0; i < vals.length; i++) {
if (vals[i] !== i + 1) {
vals[i] = i + 1;
}
addTagForm($('#products-group'), $newLinkLi);
typeInitialize();
$('.product-group > .product-counter > input:last').val(vals[i]);
$('.product-group > .product-name > span > input:last').val(products[i]);
}
}
function addTagForm($collectionHolder, $newLinkLi) {
// Get the data-prototype explained earlier
var prototype = $collectionHolder.data('prototype');
// get the new index
var index = $collectionHolder.data('index');
if (index === 0) {
index = 1;
}
// Replace '$$name$$' in the prototype's HTML to
// instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// increase the index with one for the next item
$collectionHolder.data('index', index + 1);
// Display the form in the page in an li, before the "Add a tag" link li
var $newFormLi = $('<tr class="product-group"></tr>').append(newForm);
// also add a remove button, just for this example
//$('<button type="button" class="product-highlight btn btn-primary">Highlight</button>
// <button type="button" class="remove-tag btn btn-primary">Sterge</button>').appendTo($newFormLi);
$newLinkLi.append($newFormLi);
// handle the removal, just for this example
$('.remove-tag').click(function(e) {
e.preventDefault();
$(this).closest('tr').remove();
regenerateTagList();
return false;
});
$('.product-highlight').on('click', function(e) {
e.preventDefault();
$(this).closest('tr').toggleClass('toggle-highlight');;
});
}
// Initialize Typeahead
function typeInitialize() {
// Create typeahead instance
var url = Routing.generate('offer_ajax_search', {
name: 'WILDCARD'
});
// Trigger typeahead + bloodhound
var products = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function(obj) {
console.log('fired');
return obj.u_name;
},
prefetch: '/export/json/products.json',
remote: {
url: url,
wildcard: 'WILDCARD',
}
});
products.initialize();
$('.product-group').find('.typeahead:last').typeahead({
minLength: 3,
highlight: true,
limit: 10,
}, {
name: 'product',
display: 'u_name',
source: products.ttAdapter()
}).on('typeahead:select', function(e, datum) {
e.preventDefault();
/* Act on the event */
var information = '<div class="col-md-2"><label for="boxCode" class="label-control">BEX Code</label><input class="form-control" type="text" disabled="true" value="' + datum.u_bexCode + '"/></div>';
information += '<div class="col-md-2"><label for="base-price">Pret de baza</label><input class="form-control " type="text" disabled="true" value="' + datum.u_image + '"/></div>';
var div = $(this).parent().closest('.form-group').find('.product-information');
$(div).empty().append(information);
}).on('typeahead:autocomplete', function(e, datum) {
e.preventDefault();
/* Act on the event */
var information = '<div class="col-md-2"><label for="boxCode" class="label-control">BEX Code</label><input class="form-control" type="text" disabled="true" value="' + datum.u_bexCode + '"/></div>';
information += '<div class="col-md-2"><label for="base-price">Pret de baza</label><input class="form-control " type="text" disabled="true" value="' + datum.u_image + '"/></div>';
var div = $(this).parent().closest('.form-group').find('.product-information');
$(div).empty().append(information);
});
$("input[type='text']").on("click", function() {
$(this).select();
});
}
HTML:
<div class="row">
<div class="col-md-12">
<form name="offer" method="post" action="/app_dev.php/offer-generator/new/submited" class="form-horizontal">
<div class="form-group"><label class="col-sm-2 control-label required" for="offer_name">Name</label><div class="col-sm-10"><input type="text" id="offer_name" name="offer[name]" required="required" maxlength="255" class="form-control"></div>
</div>
<div id="products-group" data-prototype="<td class="product-counter col-md-1"><input type="text" id="offer_products___name___position" name="offer[products][__name__][position]" disabled="disabled" required="required" class="counter form-control" value="__name__" /></td>
<td class="product-name"><input type="text" id="offer_products___name___name" name="offer[products][__name__][name]" required="required" class="typeahead product form-control" name="product" id="products" data-provider="product" placeholder="Nume Produs" autocomplete="false" /></td>
<td class="col-md-1"><input type="text" id="offer_products___name___price" name="offer[products][__name__][price]" required="required" class="form-control" /></td>
<td class="col-md-1"><input type="text" id="offer_products___name___quantity" name="offer[products][__name__][quantity]" required="required" class="form-control" /></td>
<td class="product-action">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="product-highlight btn btn-warning">Highlight</button>
<button type="button" class="remove-tag btn btn-danger">delete</button>
</div>
</td>
"><table class="table table-striped table-hover table-bordered append-me">
<thead>
<tr>
<th class="col-md-1">Position</th>
<th>Product</th>
<th class="col-md-1">Price</th>
<th class="col-md-1">Quantity</th>
<th class="col-md-2">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table></div>
</form></div>
<div class="form-buttons">
<div class="btn-group" role="group" aria-label="..."><button href="#" class="btn btn-info add_tag_link">Add Product</button>
<button type="submit" id="offer_save" name="offer[save]" class="btn-default btn">Create Offer</button>
<button type="submit" id="offer_send_email" name="offer[send_email]" class="btn-default btn">Send Email</button>
<button type="submit" id="offer_export_excel" name="offer[export_excel]" class="btn-default btn">Export Excel</button>
<button type="submit" id="offer_export_pdf" name="offer[export_pdf]" class="btn-default btn">Export PDF</button>
</div>
</div>
<div class="form-group"><div class="col-sm-2"></div><div class="col-sm-10"><div id="offer_products" data-prototype="<div class="form-group"><label class="col-sm-2 control-label required">__name__label__</label><div class="col-sm-10"><div id="offer_products___name__"><div class="form-group"><label class="col-sm-2 control-label required" for="offer_products___name___pricePerLine">Line Total</label><div class="col-sm-10"><input type="text" id="offer_products___name___pricePerLine" name="offer[products][__name__][pricePerLine]" required="required" class="form-control" /></div>
</div></div></div>
</div>"></div></div>
</div><input type="hidden" id="offer__token" name="offer[_token]" class="form-control" value="cSVdt50kupA_BwFeY4T43PslnfjiA-UgjT4EA_HBdqs">
</div>
http://jsfiddle.net/3Sd4W/
Reference: The above js fiddle provided by greener.
If the new Entry Button is clicked, there is an layout issue for that new added object.
The text box style is:
file.setAttribute("style", "margin-top: 60px;");
But I want the text box to be in the middle and not at the bottom. I tried myself but it doesn't works for me. Anybody could help me to solve this problem?
Your code is extremely complicated to read, so this may help:
HTML:
<form name="addpoll">
<div id="choices">
</div>
<input id="addchoice" type="button" value="Add New Entry">
</form>
JS:
function addnewDiv(counterAppended) {
counterAppended = parseInt(counterAppended) + 1;
var text = document.createElement("div");
text.innerHTML = '<input type="hidden" class="choicecount" name="choicecount" id="choicecount" value="' + counterAppended + '">\
<input type="file" name="choiceimg' + counterAppended + '" value ="Select" onchange="readURL(this)" style="display:none;">\
<div>\
<div style="width:400px;height:85px;">\
<div id="imgbg" style="float:left;width: 110px;height: 80px;text-align: center;border: 1px solid #CCC;">\
<input type="button" onclick="HandFileButtonClick();" value="Browse" id="firstremove" style="margin-top: 30px;" class="addmultiple">\
</div>\
<div style="float:right;margin-top: 30px;">\
<input type=text name="choicename' + counterAppended + '" id="firstremove2">\
<input type="button" value="Remove" class="remove" id="firstremove3" style="color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;">\
</div>\
</div>\
<img src="#" name="viewimg' + counterAppended + '" class="addmultiple" id="viewimg' + counterAppended + '" height="70px" width="85px" style="display:none"/>\
<br>\
</div>\
<span id="file"></span>';
text.id = 'choice' + counterAppended;
document.getElementById("choices").appendChild(text);
document.getElementsByClassName("remove")[document.getElementsByClassName("remove").length - 1].addEventListener("click", function() {
this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode);
});
}
function HandFileButtonClick() {
document.addpoll.choiceimg1.click();
}
function HandleFileButtonClick(val) {
var ss = val.name;
document.forms["addpoll"]
var n = ss.split("choiceimgs");
document.forms["addpoll"]["choiceimg" + n[1]].click();
}
document.getElementById("addchoice").addEventListener("click", function() {
var choicecounts = document.getElementsByClassName('choicecount');
addnewDiv(choicecounts[choicecounts.length - 1].value);
});
addnewDiv(0);
JsFiddle: http://jsfiddle.net/99vhF/1/
The first row uses a wrapper div for the input field with a style attribute containing float: right. The generated row (after clicking 'add new entry' button) does not have a div wrapper with the same attribute around the input.
You add elements to incorrect nodes. Review you "add" part. All of variables take "file" element. It looks odd:
var addfile = document.getElementById("file");
var view = document.getElementById("file");
var remove1 = document.getElementById("file");
var br2 = document.getElementById("file");
var textf1 = document.getElementById("file");
var myimgdiv = document.getElementById("file");