Tengo el siguiente formulario con dos etiquetas:
<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>Me gustaría que la entrada permanezca como está escrita actualmente si se hace clic en la primera etiqueta, pero que se agregue un atributo 'capturar = "usuario"' si se hace clic en la segunda etiqueta. ¿Hay una manera fácil de lograr esto?
Primero, dale a la segunda etiqueta una clase única:
<label for="file" class="upload-button second"><i class="fas fa-angry"></i></label> Luego, selecciónelo y agréguele un detector de eventos de clic que le dé a la etiqueta <input /> un atributo "capture"="user" usando el método attr() :
$(".second").click(function() { $("input").attr("capture", "user"); });Muestra en ejecución: inspeccione la etiqueta de entrada para ver el cambio
$(".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>