<div class="form-group">
<span class='btn btn-file btn-block btn-default'> <i class='pe pe-7s-video'> </i> Choose from Library
<input type='file' class='form-control' name='answer_video' accept='video/*' capture='camera' placeholder='Record' id='answer_video'></span>
</div>
How to change the value "Choose from Library" to "video selected" after choosing file through file input using javascript
On change event, check if the this.files are more than 0.
Demo
document.querySelector( "[name='answer_video']" ).addEventListener( "change", function(){
if ( this.files.length > 0 )
{
this.parentNode.querySelector(".videoLabel").innerHTML = "file selected";
}
else
{
this.parentNode.querySelector(".videoLabel").innerHTML = "Choose from Library";
}
});<div class="form-group">
<span class='btn btn-file btn-block btn-default'> <i class='pe pe-7s-video'> </i> <span class="videoLabel">Choose from Library</span>
<input type='file' class='form-control' name='answer_video' accept='video/*' capture='camera' placeholder='Record' id='answer_video'></span>
</div>You can use EventListener DOMContentLoaded and onchange do something
reference here
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('[type="file"]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
// You can use “this” to refer to the selected element.
document.getElementById('video_option').innerHTML = 'video selected';
}<div class="form-group">
<span class='btn btn-file btn-block btn-default'> <i class='pe pe-7s-video'> </i><span id='video_option'> Choose from Library</span>
<input type='file' class='form-control' name='answer_video' accept='video/*' capture='camera' placeholder='Record' id='answer_video'></span>
</div>you may take help with jquery, hope it will help you.
$("input[type='file'][name='answer_video']").change(function(){
var id = $(this).attr("id");
var thisVal = document.getElementById(id).files[0].name;
var nameBox = '<div class="fileContainer"><span class="docFileName">'+thisVal+'</span><span class="glyphicon glyphicon-remove" onclick=removeAttachment("'+id+'")>X</span></div>';
$(this).before(nameBox).hide();
});
function removeAttachment(id){
$("#"+id).val("").show();
$(".fileContainer").remove();
}
You only need to use the onchange function with your input.
function changeName(){
document.getElementById("change").innerHTML = "changeName"
}<div class="form-group">
<span id="change" class='btn btn-file btn-block btn-default'> <i class='pe pe-7s-video'> </i> Choose from Library
</span>
<input type='file' class='form-control' name='answer_video' placeholder='Record' id='answer_video' onchange="changeName()">
</div>