I am trying to add multiple div tags within a form using JQuery:
Below is my initial HTML form:
<form action="" method="post">
<div id="div_file0">
<input type="file" name="files0[]" id="files0" multiple><br/>
</div>
<a href="#" id='more_files'>Click to add more files</a>
After uploading multiple files, click Submit.<br>
<input type="submit" value="Submit">
</form>
Upon clicking on Click to add more files, I want more div tags to be created as below:
<form action="http://localhost:5000/api/upload_file" method="post">
<div id="div_file0">
<input type="file" name="files0[]" id="files0" multiple=""><br>
</div>
<div id="div_file1">
<input type="file" multiple="" id="files1" name="files1[]"><a class="remove" href="#" id="remove_file" name="remove_file1" value="1">Remove file</a>
</div>
Click to add more files
After uploading multiple files, click Submit.<br>
<input type="submit" value="Submit">
</form>
However, the new div tag replaces the existing content, and adds the new and old input tags within newly created div element.
<form action="http://localhost:5000/api/upload_file" method="post">
<div id="div_file1">
<input type="file" name="files0[]" id="files0" multiple=""><br>
<input type="file" multiple="" id="files1" name="files1[]"><a class="remove" href="#" id="remove_file" name="remove_file1" value="1">Remove file</a>
</div>
Click to add more files
After uploading multiple files, click Submit.<br>
<input type="submit" value="Submit">
</form>
Javascript used is as below:
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click','#more_files', function() {
var numOfInputs = 1;
while($('#files'+numOfInputs).length) { numOfInputs++; }//once this loop breaks, numOfInputs is greater than the # of browse buttons
console.log("numOfInputs:"+numOfInputs)
$("<br/>").insertAfter("#div_file"+(numOfInputs-1));
$("div")
.attr("id","div_file"+numOfInputs)
.insertAfter("#div_file"+(numOfInputs-1));
var input = $("<input type='file' multiple/>")
.attr("id", "files"+numOfInputs)
.attr("name", "files"+numOfInputs+"[]");
var remove = $("<a class='remove' href='#'>Remove file</a>")
.attr("id","remove_file")
.attr("name","remove_file"+numOfInputs)
.attr("value",numOfInputs);
$("#div_file"+numOfInputs).append(input,remove);
});
});
</script>
This rather redundant as you're using a multiple file input already.
If you really want to do it in this manner, then remove all id attributes from the HTML content you're going to repeat in the DOM. They aren't necessary and just create more needless complication. Then you can grab the first .div_file element, clone it, and insert it before the a in the form, like this:
$(document).ready(function() {
$(document).on('click', '#more_files', function() {
var $clone = $('.div_file:first').clone();
$clone.insertBefore('form a');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<div class="div_file">
<input type="file" name="files[]" multiple><br/>
</div>
<a href="#" id='more_files'>Click to add more files</a> After uploading multiple files, click Submit.<br>
<input type="submit" value="Submit">
</form>
Related
i have an input type file it's id is "icon" and it can be repeated many times.
So i have a button when i click on it
it will append a new input type file and i need to send the uploaded file from "icon" input to this new input with Jquery
here is my code
<input type="file" class="chooseFile" accept="image/*" id="icon">
<button type="button" id="add_item">add item</button>
<div id="appended_inputs"></div>
and here is jquery code
$('#add_item').click(function(){
$('#appended_inputs').append(
`<input type="file" id="new_icon"`>
);
$('#new_icon').val($('#icon').val());
});
Can anyone help me!
The problem with your solution is that you will have multiple elements with the same ID.
Try use this code, it might be what you want:
$('#add_item').click(function() {
$('#appended_inputs').append('<input type="file" class="new_icon" >');
$('.new_icon:last').get(0).files= $('#icon').get(0).files;
});
Demo
$('#add_item').click(function() {
$('#appended_inputs').append('<input type="file" class="new_icon" >');
$('.new_icon:last').get(0).files= $('#icon').get(0).files;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" class="chooseFile" accept="image/*" id="icon">
<button type="button" id="add_item">add item</button>
<div id="appended_inputs"></div>
I have a PHP script to upload image on my form. It is functioning properly. I have 2 buttons, one to browse for the file (to be uploaded) and the other is a submit button that displays this image on the screen.
I want that on clicking Browse --> selecting file --> clicking OK, the file should get uploaded. Do not need the extra "submit" button.
I am just pasting a part of my code here, that represents these buttons.
<div class="upload_container">
<br clear="all" />
<div id='preview'></div>
<form id="image_upload_form" enctype="multipart/form-data" action="<?php
echo $_SERVER['PHP_SELF'];
?>" method="post" class="change-pic">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
<input style="padding-left:20px; color:#4d4d4d" type="file" id="file" name="user_image" accept="image/*" />
<script type="text/javascript">
document.getElementById("file").onchange = function() {
document.getElementById("image_upload_form").submit();
};
</script>
</form>
</div>
</div>
You can use onchange function and then submit the form
<input style="padding-left:20px; color:#4d4d4d" type="file" id="file" name="user_image" accept="image/*" />
document.getElementById("file").onchange = function() {
document.getElementById("image_upload_form").submit();
};
I am trying to create multiple tag fields with jQuery.
The tag script that I am using is from http://codepen.io/k-ivan/pen/NxxGPv
It works perfectly fine, however, when adding more fields by appending, the script stops working.
Can anyone suggest a solution?
HTML:
<form role="form" method="POST" enctype="multipart/form-data" action="../test.php">
<label for="default">Default
<input type="text" id="default" class="tagged form-control" name="tag-1" data-removeBtn="true" placeholder="create tag">
</label>
<input type="button" value ="add More" id="add">
<input type="submit" value="submit">
</form>
jQuery for adding more fields (adding works perfectly fine):
<script >
$(document).ready(function(){
var Count =2;
$('#add').click(function(){
$('#add').before($('<div/>',{
class:'row',
})
.fadeIn('slow')
.append(' <input type="text" id="default" class="tagged form-control" name="tag'+Count+'" data-removeBtn="true" placeholder="create tag">')
)
Count++;
});
});
</script>
I would also like to ask how a PHP script can be added inside this append event?
I'm making an html page with images, where the user clicks their image, to log in to their invoice page. This is what I have so far:
<script type="text/javascript">
function showHideForm(formid)
{
var _form = document.getElementById(formid);
_form.style.display = (_form.style.display != "block") ? "block" : "none";
return false;
}
</script>
<p>
<a href="#" onclick="return showHideForm('hiddenForm1');">
<img src="" width="150" height= "150" />
</a>
</p>
<form id="hiddenForm1" style="display: none;" method="post" action="user1_login.php">
<input type="text" name="user" placeholder="Name" required /><br />
<input type="text" name="pass" placeholder="Password" required/><br />
<input type="submit" name="Submit" value="Submit" />
</form>
<p>
<a href="#" onclick="return showHideForm('hiddenForm2');">
<img src="" width="150" height="150" />
</a>
</p>
<form id="hiddenForm2" style="display: none;" method="post" action="user2_login.php">
<input type="text" name="user" placeholder="Name" required /><br />
<input type="text" name="pass" placeholder="Password" required/><br />
<input type="submit" name="Submit" value="Submit" />
</form>
It works nicely except that if you click on other images, you get several instances open at the same time.
Is it possible to tack a bit of code to the beginning of the javascript to close any open instances before it runs the code to open a new form?
The logic is simple, have a class for openedform. On click event remove that class from the existing opened forms and add the class to the currently clicked form. Here is how to do it with jquery.
function showHideForm(formid)
{
// var _form=$("#"+formid); (in jquery)
var _form =document.getElementById(formid);
//select all existing opened forms and remove the class
$('.openedForm').removeClass('openedForm');
//add the openedForm class to the currently clicked
$(_form).addClass('openedForm');
return false;
}
Add the following code into your css file.
.openedForm
{
display:block !important;
}
If you need to alter the css of elements using javascript try to use classes. This way you make your javascript code cleaner and readable and your styling logic stays separated from the main logic.
Avoid using inline styles as much as possible.
Working demo:
https://jsbin.com/nigivu/edit?html,css,js,output
For div.spot1 and div.spot2 I want the same behaviors - hide delete button when image input is empty, show delete btn when image is uploaded, change image src when image is uploaded, click delete btn to send ajax request to server etc. Of course I can copy/paste js code of spot1 to spot2, only changing the class from first to second. But say I have 4 spots like this, then I will have four almost identical code in my js file. I fear that's not the best practice. What should I do?
HTML:
<form class='upload' action="" method="POST" enctype="multipart/form-data">
<div class="spot1">
<span class='filename first'>FILE 1</span>
<button type='button' class='delete first'>❌</button>
<input type="file" name="image" class="input first" accept="image/*">
<input type="button" value="+" class="browse first"/>
<img class="tn first" src="{{turl}}">
<span class="status first"></span>
</div>
<div class="spot2">
<span class='filename second'>FILE 1</span>
<button type='button' class='delete second'>❌</button>
<input type="file" name="image" class="input second" accept="image/*">
<input class="browse second" type="button" value="+"/>
<img class="tn second" src="{{turl}}">
<span class="status second"></span>
</div>
</form>
Part of the JS (just for making an example):
if ( $('.tn.first').attr('src') == "") {
...
}
$('.browse.first').on("click", function () {
$('.input.first').click();
});
$('.input.first').on('change', function () {
...
};
That is indeed not best practice.
If you know what kind of structure you will have (exactly), you can do something like this:
var FileModule = function(elem) {
// Throw your events here
}
Instantiating it is as simple as passing your elements in it. If you are using jQuery, you can do this exactly using the $.fn.extend() function, as follows:
$.fn.FileModule = function() {
return this.each(function() {
// `this` is your element
$(this).find(".input.first").on("change", function() { ... });
});
};
From there, you can initialize your module (that is what it is) by calling FileModule on a jQuery selector that contains your spots.
If you want even more dynamic, consider binding custom events on it in order to allow external portions of your code to interact with it. This is beyond the scope of your question, hozever.
If you have multiple elements of the same type, that represent the same type of data and/or functionality, they should have the same class name. You can add additional attributes to your elements that tell you which one of that class it is, like this:
<div class="spot" index="1">
<span class='filename'>FILE 1</span>
<button type='button' class='delete'>❌</button>
<input type="file" name="image" class="input" accept="image/*">
<input type="button" value="+" class="browse"/>
<img class="tn" src="{{turl}}">
<span class="status"></span>
</div>
This lets you now write:
$('.browse').on("click", function () {
$(this).find('.input').click();
});
How about change markup following way
<form class='upload' action="" method="POST" enctype="multipart/form-data">
<div class="spot" id="spot1">
<span class='filename'>FILE 1</span>
<button type='button' class='delete'>❌</button>
<input type="file" name="image" class="input" accept="image/*">
<input type="button" value="+" class="browse"/>
<img class="tn" src="{{turl}}">
<span class="status"></span>
</div>
<div class="spot" id="spot2">
<span class='filename'>FILE 2</span>
<button type='button' class='delete'>❌</button>
<input type="file" name="image" class="input" accept="image/*">
<input class="browse" type="button" value="+"/>
<img class="tn" src="{{turl}}">
<span class="status"></span>
</div>
</form>
And JS
$('.spot .browse').on('click', function () {
$(this).parent().find('.input').click();
});
$('.spot .input').on('change', function () {
alert('I\'m input of type file of ' + $(this).parent().prop('id') + ' and I\'m changed');
});
Here is jsFiddle demo
Since you're already using jquery there is a selector which selects based on a substring within in an attribute (attribute contains).
$('div[class*="spot"]').doSomething();