Custom upload for a generated form - javascript

I have a generated form which I can't add HTML directly to it.
This form has 2 upload boxes which needs to have a custom styling. I have managed to style the upload box, but upon testing the function which I need to be triggerd, doesn't trigger.
To clarify, here is my code and what I tried:
The html (that is autom being generated):
<div class="controls">
<input class="span3" type="file" name="img1" id="img1" />
</div>
This is the jQuery
$(document).on('change', 'input[type=file]', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$(document).ready(function() {
var fileinput = $('input[type=file]', this);
var file_parent = fileinput.parent(); // get the parent
var fileinputhtml = file_parent.html(); // the HTML of the parent (which is input)
file_parent.replaceWith('<span class="btn btn-file"><span class="btn-class btn-primary">Browse</span>'+fileinputhtml+'<span class="form-control"></span></span>');
// The upload function has been triggerd
fileinput.on('fileselect', function(event, numFiles, label) {
console.log(label); // When the .replaceWith() is active, it doesn't show this log.
var input = $(this).parent().find('.fileupload-filename');
console.log(input.val(label));
if( input.length ) {
input.val( label );
}
});
});
Maybe it has an easy solution but I really can't seem to get this to work.
You help would be highly appericiated

Related

Getting to specific data in jQuery

I am trying to add an ability to change the contents of one of the columns in the data table (its data cells should be editable). I was using this tutorial as a reference:
https://www.youtube.com/watch?v=LbhVVN5ffi0
its source code:
https://github.com/divanov11/table-edit-backend
And so, I have the following functions in my template:
function edit_description(place){
var targetId = $(this).attr("id");
var value = $(this).text();
var targetIN = $(this).attr("identificationNumber");
$(this).unbind();
$(this).html(`<input class="description form-control" data-target="${targetId}" type="text" value=${value}>`);
$(`.description`).on('keypress', function(e){
if (e.which == 13) {
var target = $(this).attr("data-target");
var description = $(`#${target}`).text($(this).val());
save_description(description, targetIN);
return false;
}
})
}
function save_description(description, identification_number){
console.log('Saved!');
var user_input = {"identificationNumber":identification_number, "description":description};
update_description_POST(user_input);
}
After typing in for example "chipset" I get the following description's value:
<td identificationnumber = "1234" id="description-1234">chipset</td>
I would need the description's value to be just "chipset". How to achieve that?

Pass <input type="file" multiple> files values to individual <input type="file">

I am using a plugin which only allows a single file upload in a field. I can create multiple fields. Now I want the functionality for the user to select and upload multiple files at a time. Assuming the case that the user is restricted to upload 7 files max and the single file input fields are also 7. I want to pass the values of multiple file field one by one to each individual single file field. I also want to list all the items that the user has selected.
I created a jQuery script to handle everything but no success yet
jQuery(document).ready(function($)
{
//Array to store the objects from multiple input field
var fil=[];
//Adding the new file Upload field
$('.service-post-main-wrapper').append('<input type="file" id="documents-upload" multiple><button class="fileupload-button">Upload</button>');
//Adding the list that will display the names of files
$('.service-post-main-wrapper').append('<ul class="files-list"></ul>');
//On click trigger upload field
$('.fileupload-button').click(function()
{
$('#documents-upload').trigger('click');
});
//Listing File names with their values
function listitems(item,index)
{
console.log(item);
$('.files-list').append('<ul id="filenum-'+index+'" value="'+item.value+'">'+item.name+'</ul>');
}
function attachfiles()
{
//Fields which I want to pass value too individually
var file1=$('#ewd-otp-order-custom-field-5 > input:nth-child(1)');
var file2=$('#ewd-otp-order-custom-field-6 > input:nth-child(1)');
var file3=$('#ewd-otp-order-custom-field-7 > input:nth-child(1)');
var file4=$('#ewd-otp-order-custom-field-8 > input:nth-child(1)');
var file5=$('#ewd-otp-order-custom-field-13 > input:nth-child(1)');
var file6=$('#ewd-otp-order-custom-field-14 > input:nth-child(1)');
var file7=$('#ewd-otp-order-custom-field-15 > input:nth-child(1)');
//values from list items
var val1=$('#filenum-0').val();
var val2=$('#filenum-1').val();
var val3=$('#filenum-2').val();
var val4=$('#filenum-3').val();
var val5=$('#filenum-4').val();
var val6=$('#filenum-5').val();
var val7=$('#filenum-6').val();
file1.val(val1);
file2.val(val2);
file3.val(val3);
file4.val(val4);
file5.val(val5);
file6.val(val6);
file7.val(val7);
//I am getting empty strings don't know why
console.log(file1.val());
console.log(file2.val());
console.log(file3.val());
console.log(file4.val());
console.log(file5.val());
console.log(file6.val());
console.log(file7.val());
}
$('#documents-upload').on('change',function()
{
fil=$(this).get(0).files;
fil.forEach(listitems);
attachfiles();
});
});
You should use the HTML5 File API for this with an event listener.
You'll get the file data with var val1 = document.getElementById( 'filenum-0' ).files[0]
Vanilla JS:
var input1 = document.getElementById( 'filenum-0' );
var val1;
input1.addEventListener( 'change', function( e ) {
e.preventDefault();
val1 = input1.files;
console.log( val1 );
} );
It's been quite a while since I've done this with jQuery, but this might do it?
var val1;
$( '#filenum-0' ).change( function( e ) {
e.preventDefault();
val1 = $( this )[0].files;
console.log( val1 );
} );

Delete Element vanillaJs [duplicate]

Attempting my first Javascript project, playing around with DOM to make a To-Do List.
After adding an item, how do i get the 'Remove' button to function and remove the item + the remove button.
Furthermore, after a new entry is made, the list item still stays in the input field after being added. How can it be made to be blank after each list item.
And yes i know my code is kinda messy and there is most likely an easier way to create it but I understand it like this for now.
Any help is greatly appreciated. Thanks
JSFiddle Link : http://jsfiddle.net/Renay/g79ssyqv/3/
<p id="addTask"> <b><u> Tasks </u></b> </p>
<input type='text' id='inputTask'/>
<input type='button' onclick='addText()' value='Add To List'/>
function addText(){
var input = document.getElementById('inputTask').value;
var node=document.createElement("p");
var textnode=document.createTextNode(input);
node.appendChild(textnode);
document.getElementById('addTask').appendChild(node);
var removeTask = document.createElement('input');
removeTask.setAttribute('type', 'button');
removeTask.setAttribute("value", "Remove");
removeTask.setAttribute("id", "removeButton");
node.appendChild(removeTask);
}
You can simply assign event:
removeTask.addEventListener('click', function(e) {
node.parentNode.removeChild(node);
});
http://jsfiddle.net/g79ssyqv/6/
Edited the Fiddle... just try this
FiddleLink (Should work now, button and p-tag will be removed)
HTML
<p id="addTask"> <b><u> Tasks </u></b> </p>
<input type='text' id='inputTask'/>
<input type='button' onclick='addText()' value='Add To List'/>
JS
var row = 0;
function addText(){
var input = document.getElementById('inputTask').value;
if(input != "")
{
var node=document.createElement("p");
var textnode=document.createTextNode(input);
node.appendChild(textnode);
node.setAttribute("id","contentP"+row);
document.getElementById('addTask').appendChild(node);
var removeTask = document.createElement('input');
removeTask.setAttribute('type', 'button');
removeTask.setAttribute("value", "Remove");
removeTask.setAttribute("id", "removeButton");
removeTask.setAttribute("onClick", "deleterow("+ row +");");
node.appendChild(removeTask);
row++;
}
else
{
alert("Please insert a value!");
}
}
function deleterow(ID)
{
document.getElementById('contentP'+ID).remove();
}
Greetings from Vienna
Use this
// +your code
.....
node.appendChild(removeTask);
// + modify
removeTask.onclick = function(e){
var dom = this;
var p_dom = this.parentNode;
console.log(p_dom);
var parent_node = p_dom.parentNode;
parent_node.removeChild(p_dom);
}

How to get multiple checkbox value and assign to hidden field

I want to store the multiple id to hidden field.
So value able to bind to controller.
<form:hidden id="ids" path="ids" value="${ids }"/>
When click button delete will call jquery to delete row.
var deleteIds = [];
$("#deleteRow").on('click', function() {
deleteIds = $('.case:checkbox:checked').val();
$('.case:checkbox:checked').parents("tr").remove();
$('#ids').val(deleteIds);
});
My question is
How to set the value into ids?
Thank You.
The tag from doesn't have the attribute value. You can check the attributes for the form tag here.
However, you can use jQuery to modify custom attributes. Here's a working fiddle:
var deleteIds = [];
deleteIds = ["1","2","3","4"];
$('#ids').attr("value",deleteIds);
alert($('#ids').attr("value"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ids" path="ids" value="${ids }"/>
By creating multiple <form:hidden/>, you can get what you want. I assume you when you click #deleteRow, table rows is deleted and you submit form of these ids to server, so we can make it by follow.
Cause I even don't know your html structure, so I've just tried to modify your script, may help you;)
var deleteIds = [];
$("#deleteRow").on('click', function() {
$('#ids').remove();
deleteIds = $('.case:checkbox:checked').val();
$('.case:checkbox:checked').parents("tr").remove();
for (var i = 0; i < deleteIds.length; i++) {
// formId should be replaced to your form id
$('#formId').append('<form:hidden id="ids" path="ids" value="' + deleteIds[i] +'"/>');
}
// $('#formId').submit(); comment this line, cause there is another button to submit form.
});
I able to set the multiples value to hidden field. Answer as below.
<form:hidden id="ids" path="ids" value="${ids }"/>
$("#deleteRow").on('click', function() {
var deleteIds = [];
$('.case:checkbox:checked').each(function(i){
if($('#ids').val() != ''){
deleteIds[i] = $('#ids').val() + "," + $(this).val();
}else{
deleteIds[i] = $(this).val();
}
});
$('#ids').attr("value",deleteIds);
});
The each(function(i)) will loop all the checkbox and store in array[], after that assign the array to hidden field.

paste input type file value to input type text

i have script like this, for append a new elment based user input
var tmp;
$('#add').click(function(){
var galer=parseInt($('#many').val());
for(var h=1;h<=tmp;h++){
$(".af_"+h).remove();
}
for(var x=1;x<=galer;x++){
$("#kontenPlus").append("<input type='file' id='photo_"+x+"'> <input type='text' id='src_"+x+"'>");
}
tmp=galer;
});
for(var u=1;u<=tmp;u++){
$('#photo_'+u).change(function(){
$('#src_'+x).val($(this).val());
});
}
this html code:
<input type='text' id='many'><div id='add'>Add element</div>
<div id='kontenPlus'></div>
i want to ask why value of '#photo_+x', isn't put in '#src_'+x, is function can be looped ?
LINK:http://jsfiddle.net/rizalfarez/V5AdP/3/
Because these elements are being dynamically created you will need to delegate the event listening like
$(window).on( "change", function() {
//
var id = $(this).id;
//
if (id.indexOf("photo") === 0) {
the reason that the value of text boxes does not get updated is because they are dynamically created, so the change event is not bind to them.
I have changed your code and optimized it a little like this:
var tmp;
$('#add').click(function(){
var galer = parseInt($('#many').val());
$('.af').remove();
for(var x=1;x<=galer;x++)
$('#kontenPlus').append('<div class="af"><input type="file" id="photo_'+x+'"><input type="text" id="src_'+x+'"></div>');
$('[id^="photo_"]').each(function(){
$(this).change(function(){
$(this).next().val($(this).val());
});
});
});

Categories

Resources