Estoy tratando de implementar una función Javascript dentro de un botón HTML. A continuación se muestra el Javascript y HTML que estoy usando. Quiero que el botón Enviar llame a la función con el nombre del archivo y los datos del archivo que se pasan a la función, pero no estoy exactamente seguro de cómo hacerlo. Sé que hay un onClick que puedo usar, pero no sé cómo pasar la información de la entrada del archivo a la función.
<form method="POST"> <div align="center"> <input type="file" id="myfile" name="myfile"> </div> <br /> <div align="center"> <button type="submit" class="btn btn-primary">Add File</button> </div> </form> function uploadFile(file_name, file_data) { fetch("/upload-file", { method: "POST", body: JSON.stringify({ file_name: file_name, file_data: file_data }), }).then((_res) => { window.location.href = "/"; }); }Creación de una función handleSubmit que se llama desde los formularios onSubmit='handleSubmit()' .
La información del formulario se adquiere a través de: Object.fromEntries((new FormData(event.target)).entries()); . que es del tipo objeto.
function handleSubmit() { let formValues = Object.fromEntries((new FormData(event.target)).entries()); /* call any function you want! */ } <form action="/action_page.php" onsubmit="handleSubmit()"> Enter name: <input type="text" name="fname"/> <input type="submit" value="Submit"/> </form>-------- EDITADO I. Siguiendo la recomendación de: isherwood , su resultado debería verse así:
function logSubmit(event) { let fieldValue = form.fname.value; //gets field value event.preventDefault(); } const form = document.getElementById('form'); form.addEventListener('submit', logSubmit); <form id="form"> <label>Test field: <input type="text" name="fname"></label> <br/><br/> <button type="submit">Submit form</button> </form>En HTML, en realidad hay un Event-Listener llamado "onclick". Intente usarlo en su botón de envío de esta manera:
<button onclick="uploadFile(file_name, file_data)">Add File</button>