how do I use the value of console.log to change an image without reloading a page image in my css dynamically?
function reply_click(clicked_id){
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
console.log('attached');
$('#openButton').on('click', function(data) {
console.log('clicked');
$.ajax({
type: "POST",
url: "/MYUrl",
data: { _token: $('meta[name="csrf-token"]').attr('content') }
})
.done(function(data){
console.log(data);
})
.fail(function(data){
console.log('Error:', data);
});
});
});
}
I put the image I want to update from my blade.php
<div class="inputbutton">
<span class="text">TEXT</span>
<input type="submit" class="btTxt submit" value="" id="TEXT" onclick="reply_click(this.id)">
</div>
my css file
div.inputbutton input {
background: url('/img/myimg.png') no-repeat;
cursor: pointer;
width: 100px;
height: 130px;
border: none;
background-size: 100%;
}