Geek Answers Handbook

JQuery | Add a value for a name that is an input attribute

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

mmm. 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 check which item is deleted by clicking a button to add a value for the name attribute, which is hidden above the 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>

oky here is the html code. and I'm so sorry. I was so embarrassed. I move todo to the bottom code. I want to know the list of items that the button clicked.

I understand that. Im new in php, so I'm completely confused about the client and server, because they are all located on just one page.

Anyway, this is the code 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, sends the value and deletes the file on 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);
}
}
+4
2

$(' (', ')'). attr ('value', $(this).val());

,

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

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

, , . $(this) , .find("button")

0

, name <input type="hidden" name=""> file file, change?

name <input type="hidden" name=""> html 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);
}
});
0

More articles:


All Articles