John Davidson

javascript - jQuery clone for input type="file"

0 comments
Message:


Hi i am trying to clone a div with input tag of type-file i.e-


The div gets cloned but the image or file which i uploaded in the original input tag doesnt get copied to the cloned input tag...The cloned input tag displays the name of the file but when i save the form it's not passed and is not saved




$(".imageblockbtn").click(function () {
var langid = jQuery(this).attr("id");

$(
`#dynamic${langid}`
).append(`<div class="col-12 form-group qwer" id="imageblock">
<label for="imageblock">Image Block</label>
<input class="imageblock" type="file" accept="image/*" name="data[${langid}][imageblock${k}]"><span class="up"></span><span
class="down"></span>
<button type="button" class="btn remove-dyna"><i class="material-icons" style="font-size:18px;color:red">remove_circle</i></button>

<div class="dropdown">
<a class="dropbtn">Duplicate</a>
<div class="dropdown-content image_dd">

<li id="1"><a href="javascript:void(0)">English</a> </li>
<li id="3"><a href="javascript:void(0)">Chineese</a></li>
<li id="9"><a href="javascript:void(0)">German</a></li>
<li id="10"><a href="javascript:void(0)">Italian</a></li>
<li id="4"><a href="javascript:void(0)">Korean</a></li>
<li id="5"><a href="javascript:void(0)">Japanese</a></li>
<li id="6"><a href="javascript:void(0)">Spanish</a></li>
<li id="11"><a href="javascript:void(0)">Russian</a></li>
<li id="7"><a href="javascript:void(0)">Ukranian</a></li>
<li id="8"><a href="javascript:void(0)">French</a></li>

</div>
</div>

</div>`);
++k;

$(".image_dd li").each(function (index, li) {
var lid = $(li).attr("id");
// console.log($(li).parents(".qwer"));
$(li).unbind("click");
$(li).on("click", function () {
var clone = $(li).parents(".qwer").clone(true);

clone
.children("h1")
.children("input")
.attr("name", `data[${lid}][imageblock${k}]`);
clone.insertAfter(`#dynamic${lid}`);
++k;
alert("Duplicated");
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


My Answer:
text:

javascript
var clonedInput = $('input[type="text"]').clone();


This code will clone the input element with type="text" using jQuery.

Rate this post

5 of 5 based on 4521 votes

Comments




© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us