Following is my html code where i am calling a function to delete the selected image which gets store in name property of input tag.
<input id="im1" type="file" name ="upimage1" onchange="readURL(this);" class="upload" required/>
<span class="trash-area1" id="im1" onclick="readUR(this)"><img class="trash-box" src="img/trash.png" width="24px" height="24px"></span>
Following is my jquery code which gets a call on onclick function. its not letting me make name attribute empty of input tag.
function readUR(input) {
var id = $(input).attr('id');
var ch = id.substr(id.length - 1);
$('.trash-area'+ ch).css('display','none');
$('#'+id).attr('src','img/plus.png');
$('#'+id).attr('name','');
}
You have same ID attribute on your elements. Rename one of them.
Here is modified code:
<input type="file" name="upimage1" onchange="readURL(this);" class="upload" required/>
<span class="trash-area">
<img class="trash-box" src="img/trash.png" width="24px" height="24px">
</span>
<script>
$('body').on('click', '.trash-area', function () {
$(this).prev().attr('name', '');
})
</script>
$('button').on('click', function() {
$('span[name]').removeAttr('name');
});span {
background-color: tomato;
}
span[name] {
background-color: DodgerBlue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span name="test">Can I haz name? Name exists -> Blue, otherwise red</span>
<button>Remove name</button></div>
Rename the id attributes from span & input then , try the below:
function readUR(input) {
var id = $(input).attr('id');
var ch = id.substr(id.length - 1);
$('.trash-area'+ ch).css('display','none');
$('#'+id+ " img").attr('src','img/plus.png');
$('#'+id+ " img").attr('name','');
}
Correct code as follows...
<input id="im1" type="file" name ="upimage1" onchange="readURL(this);" class="upload" required/>
<span class="trash-area1" id="im1" onclick="readUR()">
<img class="trash-box" src="img/trash.png" width="24px" height="24px">
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function readUR() {
var id = $('input').attr('id');
var ch = id.substr(id.length - 1);
$('.trash-area'+ ch).css('display','none');
$('#'+id).attr('src','img/plus.png');
$('#'+id).attr('name','');
}
</script>
First of all your jquery function is called readUR, but you are calling readURL(this). Fix this typo first.