How to call Javascript function and pass elements with HTML button?

Question

I am trying to implement a Javascript function within an HTML button. Below is the Javascript and HTML that I am using. I want the submit button to call the function with the file_name and file_data being passed into the function, but I am not exactly sure how to do this. I know there is an onClick I can use, but I don't know how to pass the information from the file input into the function.

<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 = "/";
  });
}

You should be creating a form submit handler, not a click handler. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event — isherwood, Dec 07 '21 at 21:05
See [How to prevent form from being submitted?](/q/3350247/4642212). Use `yourForm.addEventListener("submit", (event) => { event.preventDefault(); /* Perform validation. When ready to submit: */ event.target.submit(); });`. Alternatively, use your `fetch` code instead of `event.target.submit();`. — Sebastian Simon, Dec 07 '21 at 21:06
@isherwood the link you shared looks perfect, but I'm not exactly sure how to pass the file input data into the function. Could you provide an answer with an example? Thank you so much for your help! I am very new to web development so this is greatly appreciated! — MarkMichaels123, Dec 08 '21 at 00:48

Runejm · Answer 1 · 2021-12-08T08:50:15.253

Creating a handleSubmit function which gets called from the forms onSubmit='handleSubmit()'.

The form information is acquired via: Object.fromEntries((new FormData(event.target)).entries());. which is of the type object.

    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>

-------- EDITED I. Following the recommendation by: isherwood, your result should look something like this:

      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>

score -1 · Answer 2 · answered Dec 07 '21 at 21:07

-1

In HTML there is actually an Event-Listener called "onclick". Try using it on your submit button like this:

<button onclick="uploadFile(file_name, file_data)">Add File</button>

answered Dec 07 '21 at 21:07

Dragon

1
2

2

Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Furthermore, `
` submission should be handled with the `submit` event. A `click` event on the `submit` button doesn’t cover all cases. You also need to prevent the default submit action to run the `uploadFile` function.
– Sebastian Simon Dec 07 '21 at 21:08

How to call Javascript function and pass elements with HTML button?

2 Answers2