Activate the capture property for the file selection based on the label that is selected

This is a form that consists of 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>

If the first label is clicked, I want the input to stay as it is. However, if the second label is clicked, I would like to add a 'capture="user"' attribute. Is there a simple way to achieve this?

javascripthtmlcssinput

Answer №1

To begin, assign a distinct class to the second label:

<label for="file" class="upload-button second"><i class="fas fa-angry"></i></label>

Next, target this label and attach a click event listener that adds a 

"capture"="user"
attribute to the <input /> tag using the attr() method:

$(".second").click(function() {
  $("input").attr("capture", "user");
});

Check the updated input tag in the sample below:

$(".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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The straightforward splitting of a string is yielding an object rather than an array

Attempting a simple string split in NodeJS is resulting in an unexpected outcome where it returns an object instead of an array. var mytext = "a,b,c,d,e,f,g,h,i,j,k"; var arr = mytext.split(","); console.log(typeof mytext); <======= output string conso ...

javascriptnode.js

Unable to fetch source for HTML img tag

I am struggling with using jQuery to retrieve the src attribute of an image when it is clicked. Unfortunately, my current code does not output anything to the console and returns undefined when I try to manipulate it in the browser console. I do not have m ...

javascriptjquery

It seems that Ionic 2 does not support the registration of custom HTML tags

Encountering a problem with Ionic 2 and custom components. Developed a component to show in a list, serving as the list item. However, my app crashes when attempting to use the custom HTML tag. The stack trace is provided below. Uncertain about the issue. ...

htmlangulartypescriptionic2components

Display the element when the input is in focus

I'm currently working on optimizing a code snippet. The idea is to display a paragraph tag showing the characters remaining when you focus on a textarea. Here's what I have so far: import React, { Component } from "react"; class Idea extends Co ...

javascriptreactjs

What is the best way to conceal the header on a 404 error page?

<HeaderContainer> <Switch> <Route exact path='/counters' component={ParentCounterContainer}/> <Route exact path='/about' component={AboutContainer} /> <Route exact path='/' component={H ...

javascriptreactjs

When running the PHP script, the output is shown in the console rather than in the

Here is a PHP script snippet that I am working with: <?php add_action('wp_ajax_nopriv_getuser', 'getuser'); add_action('wp_ajax_getuser', 'getuser'); function getuser($str) { global $wpdb; if(!wp_verif ...

javascriptjqueryajaxjsonwordpress

Tips on utilizing HTML tags in shiny context to highlight or potentially enlarge the font size for sprintf使

Can anyone help me figure out how to bold or increase the font size for my sprintf in R? I attempted the code below but it didn't work as expected. Instead of bolding the text, the "<strong" tags became part of the label. Any suggestions on how to ...

htmlrshiny

Header bar not extending across the entire width of the screen when viewed on mobile devices

View the problem screenshot hereWelcome to my first stackoverflow post, please be gentle if I make any mistakes. I'm currently working on a project for a course using Bootstrap 4. The issue I'm facing pertains to the navbar losing its full width ...

htmlcssbootstrap-4

"Encountered a type error: The .join method is not recognized as a function

Hello everyone, I've encountered an issue that has me a bit stumped. I recently took over a project and found a problem in which the previous developer was attempting to join an array of strings. Unfortunately, when I try to build the project, I keep ...

javascriptreactjsnetlify

The second AJAX call is unsuccessful

I have created a dynamic ajax website that retrieves pages from the /pages folder and displays them within an ajax-container div on my index.php. Now, I am looking to implement a second ajax request that will only be triggered on certain pages. For examp ...

javascriptphpjqueryajax

leveraging array elements in the data and label properties of a chart.js chart

I would like to assign the values of an array to the data and label fields within a chart.js dataset. Below is the code executed upon successfully fetching JSON data using an AJAX call. The fetched JSON data is then stored in an array. Data = jQuery.pars ...

javascriptarraysajaxchart.jschart.js2

Incomplete Rotation CSS Animation

I am attempting to create a horizontal spinning image using only CSS3. Check out my webpage here: You can find the CSS file here: www.csupomona.edu/~lannguyen/ISSM_WEB/css/main.css The code for calling the spin effect is at the top, with the actual imp ...

cssanimation

Mongoose is encountering issues with error handling due to the 'useUnifiedTopology: true' pass option

Recently, I discovered that by using the 'useUnifiedTopology: true' option in Mongoose, it eliminates the emission of an error if there are issues with the connection. For instance: mongoose.connect(DB, { useNewUrlParser: true, useCreateInde ...

javascriptnode.jsmongodbnpmmongoose

What is the method for formatting within the <textarea> element?

While working on developing a comment system, I recently made the discovery that text areas cannot be formatted to retain paragraphs, line breaks, etc. This was particularly noticeable when comparing sites like StackOverflow, which uses a text editor inste ...

javascripthtmlforms

Utilize React to reduce, replace, and encapsulate content within a span element

I have a Map that receives JSON data and generates a list item for each value. Then, I modify specific parts of the strings with state values. const content = { "content": [ { "text" : "#number# Tips to Get #goal#" ...

javascriptreactjsecmascript-6

Browser does not support the Media Query

I'm completely puzzled by Media Queries. I've been attempting to resolve this issue but cannot seem to identify where the problem lies. While creating a website with Wordpress, my header.php contains the following line: <meta name="viewpo ...

cssmedia-queriesviewport

Adding or Deleting Rows from Input Table

I'm in the process of creating a website that features an input table allowing users to easily add or remove rows at their discretion. The desired UI is shown below: https://i.sstatic.net/EFAlM.jpg Here is the HTML code I have developed so far: & ...

javascripthtmlcssbootstrap-4

I encountered an error in my Rails 4 project where I got a NoMethodError stating "undefined method `id' for nil:NilClass" in my create.js

When I click a button, I'm attempting to display a partial. It seems like I am making an obvious mistake... and I suspect it's not related to the following code snippet: $('#modrequest').empty(); $('#modrequest').html("<%= ...

javascriptruby-on-railsajaxruby-on-rails-4.1

Triggering a JQuery slider event on each individual slider handle within the range

Can events be triggered based on the movement of individual slider handles? I am curious because I need to dynamically update a datepicker depending on which handle is moved. However, I'm unsure if there is a way to: Specify an event for a specifi ...

javascriptjqueryeventssliderjquery-events

Merging classes from several files into a unified namespace in typescript

When working with typescript, my goal is to instantiate a class by using its name as a string. After some research, I discovered the following approach: const googlecommand = Object.create((Commands as any)['GoogleCommand'].prototype); This lin ...

javascripttypescript