CODEWITHSUNDEEP
javascriptjquery
홍의숙
홍의숙

Reputation: 317

Jquery | Add value to name which is attribute of input

I want to add $(this) value when the button is clicked.

uhm. let me show you my code below first.

$("#filenameList button").click(function(){
$(this).parent().remove();
});

$("#file").change(function(){
$("#filenameList div.notyet").remove();
for(var i = 0, len = this.files.length; i < len; i++){
    var file = this.files[i];
    var fr = new FileReader();
    fr.onload = (function (file) {
        return function(e) {
            var div = document.createElement("div");
            $(div).addClass("notyet").css({
                margin : "30px"
                ,position : "relative"
            });
            //var html = ['<input type="hidden"  name="screenshots_filename[]" value="' + file.name + '">'
            var html = ['<img src="" width="100%">'
                        ,'<input type="hidden" name="">'
                        ,'<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
                        ].join("");
            $(div).append(html);
            $(div).find("button").click(function(){
                $(this).parent().remove();
            });
            $(div).find("img").attr("src", e.target.result);
            $("#filenameList").append(div);
        }
    })(file);
    fr.readAsDataURL(file);
}
});

All i want to do is verify which element is removed by clicking the button so that i add the value to name attribute that is hidden above html variable.

How can i do this?

<div class="col-xs-4 vcenter from-group">
<h1>test</h1>
<input id="file" type="file" name="inputScreenshots[]" accept="image/*" multiple>
    <div id="filenameList" style="width : 400px">
    <?
    $str = $screenshot_urls;
    $arr = explode("+", $str);

    foreach ($arr as $filename) {
    ?>
    <div style="margin : 30px; position :relative;">
        <input type="hidden" name="screenshots_filename[]" value="<?=$filename?>">
        <img src="<?="http://cspmedia.net:3001/gp_images/ames/".$filename?>" width="100%">
        <button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <input type="hidden" name=""> // TODO HERE @@
    </div>
    <? } ?>
    </div>

okay here is the html code. and i really sorry. i was so confused. I move the todo to bottom code. I want to know the list of element which is clicked by the button.

I figured out like this. Im new in php so i totally confused about client and server because they are all in just one page.

Anyway this is the code what i wanted. sorry guys. 

$("#filenameList button").click(function(){
var targetDom = document.getElementById( "filenameList" );
var targetInput = document.createElement("input");
targetInput.setAttribute("name", "del_img[]" );
targetInput.setAttribute("type","hidden");
targetDom.appendChild(targetInput);
//alert(targetInput.getAttribute("name"));
var filename = $(this).parent().find("input[name='screenshots_filename[]']").val();
alert(filename);
targetInput.setAttribute("value", filename);
$(this).parent().remove();
});

Why i wrote this code is submitting the value and deleting the file in the server.

if (isset($_POST["del_img"])) {
echo "<br/>del_img[] isset";
$tmp = $_POST["del_img"];

// TODO : delete images in server
foreach ($tmp as $value) {
    echo "<br/> Unlnk image ::: ".$value;
    unlink("http://cspmedia.net:3001/gp_images/games/".$value);
}
}

Upvotes: 4

Views: 3015

Answers (2)

guest271314
guest271314

Reputation: 1

Not certain if requirement is to set name at <input type="hidden" name=""> to current file , or previously user selected file , before current change event ?

Solution below attempts to set name at <input type="hidden" name=""> within html array to current file.name

$("#filenameList button").click(function(){
$(this).parent().remove();
});

$("#file").change(function(){
$("#filenameList div.notyet").remove();
for(var i = 0, len = this.files.length; i < len; i++){
    var file = this.files[i];
    var fr = new FileReader();
    fr.onload = (function (file) {
        return function(e) {
            var div = document.createElement("div");
            $(div).addClass("notyet").css({
                margin : "30px"
                ,position : "relative"
            });
            //var html = ['<input type="hidden"  name="screenshots_filename[]" value="' + file.name + '">'
            var html = ['<img src="" width="100%">'
                        ,'<input type="hidden" name="'+file.name+'">'
                        ,'<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
                        ].join("");
            $(div).append(html);
            $(div).find("button").click(function(){
                $(this).parent().remove();
            });
            $(div).find("img").attr("src", e.target.result);
            $("#filenameList").append(div);
        }
    })(file);
    fr.readAsDataURL(file);
}
});

Upvotes: 0

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2121

$('Selector( 'whose value you want to set' )').attr('value',$(this).val());

For example like given below

$('input[type="hidden"]').attr('value',$(this).val());

$(div).find("button").click(function(){
                $(this).parent().remove();
                // TODO : I want add $(this).val() to input name attribute
 });

But note that here you will set the value of button which will gonna clicked. because in you code $(this) will refer to button as it is picking the that by .find("button")

Upvotes: 1

Related Questions