<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>
Related
I'm trying to upload image and if I were need to add more images, I just simply need to click the button. Now, I have done the button and it works but the problem now is since new fields are created for uploading image, the name and id of the elements are similar. So, the javascript won't work. I think I need to insert index into the element but I can't figure it out how. Thanks!
function createGambar() {
var newDiv = document.createElement('div');
newDiv.setAttribute('class', 'input-group');
newDiv.innerHTML = "<div class='col-sm-6'><span>Lampiran 1</span><div class='input-group'><input type='text' class='form-control bg-light' id='label_file' disabled placeholder='Gambar'><input type='file' name='lampiran1' id='file1' hidden onchange='setFileName();'><div class='input-group-append'><div class='btn btn-primary px-4' id='browse_button'onclick='document.getElementById(\"file1\").click();'><i class='fa-solid fa-magnifying-glass'></i></div></div></div><center class='mt-2'><img id='thumb' src='' class='preview' /></center></div><div class='col-sm-6'><span>Kapsyen Gambar 1</span><div class='input-group mb-3'> <textarea class='form-control' style='resize:none' name='kapsyen' id='kapsyen' cols='20' rows='3'placeholder='e.g YM Pengarah Memberi Cenderahati Kepada Tetamu Jemputan' required></textarea></div></div>";
document.getElementById("newGambar").appendChild(newDiv);
}
function setFileName() {
var fileName = document.getElementById("file1");
document.getElementById("label_file").value = fileName.files[0].name;
preview1();
}
function preview1() {
thumb.src = "";
if (event.target.files[0]['type'].split('/')[0] === 'image') {
thumb.src = URL.createObjectURL(event.target.files[0]);
}
}
<div class="row" id="newGambar"></div>
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<button type="button" id="buttonAdd" class="btn btn-success mt-1 w-100" onclick="createGambar(); "><i class="fa-solid fa-add"></i> Tambah Perkembangan</button>
</div>
<div class="col-sm-3">
</div>
</div>
I'm building a view that with a modal opens a barcode scanner and every time that I scan a barcode I call a function startScanning() dynamically I'm building inputs inside a form.
When I click submit button I would like to send an array with all the barcodes the problem is that I'm not sure how to call the controller or what I should add in the Action in order to send the array or I if I need to change something in the elements.
My Modal Footer View
<div class="modal-footer">
(What I should write here to pass the array in the action)?
<form action="~/PurchaseOrder/ReceivedFromBarCode" method="post">
<label for="fname">Barcode:</label>
<div id="scanned-result" style="margin-bottom: 25px;"></div>
<div class="box-footer">
<button type="submit" class="btn btn-primary pull-right">
<i class="fa fa-paper-plane">
</i> Submit</button>
</div>
</form>
</div>
Javascript Function
function startScanning(facingMode) {
console.log(facingMode)
var results = document.getElementById('scanned-result');
var lastMessage;
var codesFound = 0;
function onScanSuccess(qrCodeMessage) {
if (lastMessage !== qrCodeMessage) {
lastMessage = qrCodeMessage;
++codesFound;
results.innerHTML += '<br><input placeholder="' + qrCodeMessage +']" name="barcode[' + codesFound + ']" type="text" id="barcode' + codesFound + '" value="' + qrCodeMessage + '" >';
}
}
Controller
[HttpPost]
public async Task<ActionResult> ReceivedFromBarCode(string[] barcode)
{
try
{
return RedirectToAction($"Details");
}
catch (VTHIS.CommunicationException cex)
{
throw cex;
}
}
Elements Console
<div class="modal-footer">
<form action="/secure/specialapp/admin/PurchaseOrder/ReceivedFromBarCode" method="post">
<label for="fname">Barcode:</label>
<div id="scanned-result" style="margin-bottom: 25px;">
<br>
<input placeholder="https://www.kwch.com" name="barcode[1]" type="text" id="barcode1" value="https://="www.kwch.com"><br>
<input placeholder="http://www.qrstuff.com" name="barcode[2]" type="text" id="barcode2" value=" http://www.qrstuff.com">
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary pull-right"><i class="fa fa-paper-plane"></i> Submit</button>
</div>
</form>
</div>
When the button is pressed, we clone the email field. Checkbox values conflict. How can I solve this problem? I would be glad if you help. I hope I can.
$('.add-extra-email-button').click(function() {
$('.clone_edilecek_email').clone(true, true).appendTo('.clone_edilen_email');
$('.clone_edilen_email .clone_edilecek_email').addClass('single-email remove-email');
$('.single-email').append('<div class="btn-delete-branch-email"><button class="remove-field-email btn btn-danger"><i class="fas fa-trash"></i></button></div>');
$('.clone_edilen_email > .single-email').attr("class", "remove-email");
$('.clone_edilen_email input').each(function() {
if ($(this).val() == "") {
$(".add-extra-email-button").attr("disabled", true);
} else {
$(".add-extra-email-button").attr("disabled", true);
}
$(".remove-email:last").find('.email-address').val('');
});
});
<div class="col-md-6">
<div class="clone_edilecek_email">
<div class="form-group">
<label for="name">E-posta</label>
<div class="input-group">
<input type="email" class="form-control email-address" name="email[]" placeholder="E-Posta giriniz">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox" name="ban[]" value="1" autocomplete="off">
<span class="fas fa-ban"></span>
</label>
<label class="btn btn-secondary">
<input type="checkbox" name="circle[]" autocomplete="off">
<span class="fas fa-exclamation-circle"></span>
</label>
</div>
</div>
</div>
</div>
<div class="text-left">
<button type="button" class="add-extra-email-button btn btn-success" disabled><i class="fas fa-plus"></i></button>
</div>
<div class="clone_edilen_email"></div>
</div>
you must set the index between the brackets, like this:
<input type="checkbox" name="circle[0]" autocomplete="off"> <span class="fas fa-exclamation-circle"></span>
Why? otherwise only the selected checkboxes will be send and the backend. The browser will only send that 2 checkboxes are checked to the backend/server. the server than has no idea which of the checkbox indexes where checked. thats why in the frontend you need to provide an index for each checkbox.
Warning: not all backends understand these kind of form names (but most do).
you could do this like this::
var index =1;
$('input').each(function(inputElement) {
// execute the function for each input element. (might want to do the same for select elements.
// take the name of that element
var name = $(inputElement).prop('name');
// replace [] with the index you want// (warning this only works if you dont use multi dimensional arrays.
var newName = name.relace('[]','['+index+']');
// replace the old name with the new name.
$(inputElement).prop('name',newName);
});
note you can use a function like this:
function setIndeces(container, index){
$('input',container).each(function(inputElement){
var name = $(inputElement).prop('name');
var newName = name.relace('[]','['+index+']');
$(inputElement).prop('name',newName);
});
}
setIndeces($('newAddedDiv', 1);
When i use more than one input files, the remove button only works on first input. The intention is to be able to use several inputs without the action in one of them changing the rest. It seems that the code is not seeing the different IDs of the inputs. How do I make them see which input is undergoing changes, noting the ID of each?
function bs_input_file() {
$(".input-file").find('input').each(function (index, dom) {
var id = dom.id;
$("#" + id).parent().find("button.btn-reset").addClass("hidden");
$(".input-file").before(
function () {
if (!$(this).prev().hasClass('input-ghost')) {
var element = $("<input type='file' id='" + id + "' class='input-ghost' style='visibility:hidden; height:0'>");
element.attr("name", $(this).attr("name"));
element.change(function () {
element.next(element).find('input').val((element.val()).split('\\').pop());
});
$(this).find("button.btn-choose").click(function () {
element.click();
});
$(this).find("button.btn-reset").click(function () {
element.val(null);
$(this).parents(".input-file").find('input').val('');
bs_input_file();
});
$(this).find('input').css("cursor", "pointer");
$(this).find('input').mousedown(function () {
$(this).parents('.input-file').prev().click();
return false;
});
console.log(element)
return element;
}
}
);
$("#" + id).change(function () {
var element = $("#" + id);
if (element.val() != "") {
$("#" + id).parent().find("button.btn-reset").removeClass("hidden");
} else {
$("#" + id).parent().find("button.btn-reset").addClass("hidden");
}
})
})
}
bs_input_file();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<h3>Example</h3>
<form method="POST" action="#" enctype="multipart/form-data">
<!-- COMPONENT START -->
<div class="form-group">
<div class="input-group input-file" name="Fichier1">
<input id="fileInput0" type="text" class="form-control" placeholder='Select file...' />
<span class="input-group-btn">
<button class="btn btn-secondary btn-reset" type="button"><em class="glyphicon glyphicon-trash"></em></button>
<button class="btn btn-default btn-choose " type="button"><em class="glyphicon glyphicon-folder-open"></em> Search...</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group input-file" name="Fichier2">
<input id="fileInput1" type="text" class="form-control" placeholder='Select file...' />
<span class="input-group-btn">
<button class="btn btn-secondary btn-reset" type="button"><em class="glyphicon glyphicon-trash"></em></button>
<button class="btn btn-default btn-choose " type="button"><em class="glyphicon glyphicon-folder-open"></em> Search...</button>
</span>
</div>
</div>
<!-- COMPONENT END -->
</form>
</div>
</div>
I dont quite understand, but if you call a function via click event, you can pass in an event object. This has an attribute called target which has an attribute called id
function clicked(event){
console.log(event.target.id)
}
How to disable a button if certain condition happened. Example my order_status is 'Accepted' then the button for 'Accept' will be disabled. How can I disabled it using javascript?
Below is my code, but it didn't quiet working and I dont know why.
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label>
<input type="text" class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
</div>
<button type="button" input style="background-color:#4CAF50;color:white;border-color:#000000;" name="submitDelivered" id="submitDelivered" class="btn btn-success" data-toggle="modal" data-target="#myDeliverModal" onclick="deliver('<?= $_POST['order_id'] ?>')" > Delivered </button>
<button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" onclick="accept('<?= $_POST['order_id'] ?>')" > Accept </button>
<button type="button" style="background-color:#FFFF00;color:black;border-color:#000000;" class="btn btn-success" data-toggle="modal" data-target="#myDropdown" onclick="send('<?= $_POST['order_id'] ?>')"> Send </button>
<button type="button" input style="background-color:#f44336;color:white;border-color:#000000;" name="submitCancel" id="submitCancel" class="btn btn-success" data-toggle="modal" data-target="#myCancelModal" onclick="cancel('<?= $_POST['order_id'] ?>')">Cancel</button>
<script>
function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
document.getElementById("t_order_id").setAttribute("value", order_id);
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
document.getElementById("t_user_id").setAttribute("value", user_id);
document.getElementById("t_order_date").setAttribute("value", order_date);
document.getElementById("t_order_time").setAttribute("value", order_time);
document.getElementById("t_order_deliveryCharge").setAttribute("value", order_deliveryCharge);
document.getElementById("t_order_totalAmount").setAttribute("value", order_totalAmount);
document.getElementById("t_address").setAttribute("value", address);
document.getElementById("t_coordinates").setAttribute("value", coordinates);
document.getElementById("t_drivers_number").setAttribute("value", driver_number);
document.getElementById("t_order_status").setAttribute("value", order_status);
document.getElementById("ORDER_MODAL_ACCEPT").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_DELIVER").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_CANCEL").setAttribute("value", order_id);
}
function accept() {
var x = document.getElementById("t_order_status").value;
if(x == "Accepted"){
document.getElementById("submitAccept").disabled = true;
}
}
</script>
Please help me guys with my problem. If you have other suggestion/idea how can I solve this problem feel free to comment guys. I really appreciate it a lot guys, Thanks!