I have the following form with two labels:
<form method="POST" action='/process' enctype="multipart/form-data">
<div>
<label for="file" class="upload-button"><i class="far fa-file-image"></i></label>
<label for="file" class="upload-button"><i class="fas fa-angry"></i></label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png" style="display: none; visibility: none;" onchange="$('form').submit();">
</div>
</form>
I would like the input to remain as it is currently written if the first label is clicked, but for a 'capture="user"' attribute to be added if the second label is clicked. Is there an easy way of achieving this?
First, give the second label a unique class:
<label for="file" class="upload-button second"><i class="fas fa-angry"></i></label>
Then, select it, and add to it a click event listener that gives the <input /> tag a "capture"="user" attribute using attr() method:
$(".second").click(function() {
$("input").attr("capture", "user");
});
Running sample: inspect the input tag to see the change
$(".second").click(function() {
$("input").attr("capture", "user");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<form method="POST" action='/process' enctype="multipart/form-data">
<div>
<label for="file" class="upload-button"><i class="far fa-file-image"></i></label>
<label for="file" class="upload-button second"><i class="fas fa-angry"></i></label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png" onchange="$('form').submit();">
</div>
</form>